Trying to insert some svg's in my chat app. If I use them as PHP files, it's ok they will display in the chat#div but in the text area it's the full code of the svg's. When I'm trying to display them as svg the only thing I can see in the chat is this [object XMLDocument] both in text area and in #div
here's the code for the textarea
<textarea id="comment" style="width: 280px; margin-top: 10px; box-shadow:
inset 0 -15px 35px -5px rgba(0,0,0,0.3); height: 40px; overflow: auto;
pointer-events: all;">
</textarea>
and here is the javascript for the svg
function test(){
$.ajax({
url:"emoticons/cloudda3.svg",
success:function(result){
$("#comment").val(result);
}
})
}
A div Element has a contenteditable attribute, setting it to true will allow the user to enter and modify the data in the div. The best thing: the div can contain rich text including images.
.textarea {
font-family: monospace;
outline: none;
background: #efefef;
border: #888 1px solid;
display: block;
position: relative;
resize: both;
overflow: auto;
font-size: 9pt;
}
img {
height: 9pt;
}
<div class="textarea" contenteditable="true">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Perry-miniature-donkey-in-Palo-Alto-CA-2016.jpg/800px-Perry-miniature-donkey-in-Palo-Alto-CA-2016.jpg" />
</div>
Note: The <img> tag in the <div> can be replaced with any valid image or SVG.
As a sidenote, #emaillenin is correct in saying that textareas are only for text. Also I'm noticing you using the val function to insert, that would mean that the value of the element is updated, not it's innerHTML. This would result in a behaviour similar to what you are seeing now. If you want to get just the text from the div, use the text function.
Related
I made a comment section for my website and I have a button that allows you to edit your comment which reroutes you to another page. I have a margin set up so content doesn't get hidden behind my header or footer but now I can't seem to find a way to get the background color to stretch across to the very bottom of the page.
I messed around with the position in css and the background color did stretch to the bottom of the page, but then my header disappeared.
My CSS...
#headerContainer {
margin: -60px 0px 0px 0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
}
.editCommentBody {
margin: 60px 0px 40px 0px;
height: 100%;
text-align: center;
background-color: #ddd;
}
The editCommentBody class is everything from the header to the edit button.
you have not set a value for the fixed position in your headerContainer style .
try giving left:value and top:value for it and also , when you use positions , margins wont work sometimes , if your margin even works , it has a top:-60px which cause your header to be out of screen , try this :
#headerContainer {
margin:0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
left:0px;
top:0px;
}
Try adding the desired background color to the body instead, like this:
body { color: #ddd; }
Try using:
box-sizing: border-box;
I am designing a form in which i have an input text field,
And my text is of the following type,
abc-112233
scenario for new record -
I want first 4 characters of text to be fixated/non-editable in the field, ie. "abc-" and user can type number coming after the hyphen, but when the form gets submitted, i want it to get submitted as abc- 112233, not just 112233.
Hence in short, i want the text to be shown as 112233 (abc- fixed) inside the input, but value after submission should be whole "abc-112233".
scenario for previous record to be updated -
and for when the input field is pre-filled according to records in database, ie. when the record needs to be updated, i want to show it as abc- 112233
my code is according to following,
<div class="">
<label for="inputError" class="">Name</label>
<input
type="text"
id="" class="form-control"
name="name"
value="<?php
if(isset($data->name)){
echo $data->name;
} else{
echo "";
}
?>"
required
>
</div>
right now, the value is,
$data->name
which is abc-112233.
and the text shown inside the input is also abc-112233,
I want the text to be 112233(with abc fixated/non-editable on left hand side) and the value to be abc-112233
I don't think you can do it within only 1 <input> element, maybe you can try separated into 2, one is fixed for "abc-" and the other is for user input. Then you can control whether to show / hide the fixed one.
You could consider using pseudo code to display the prefix.
label {
display: block;
}
.demo:before {
content:"abc-";
}
<label for="demo">Demo input</label>
<span class="demo"><input id="demo" type="text"></span>
You could use this approach:
body, input
{
font-family: arial;
font-size: 14px;
}
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
padding-left: 40px;
}
.editable::before
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 1;
z-index: 1;
}
<div class="editable" data-placeholder="ABC- ">
<input type="text" value="" />
</div>
you will need to play with the CSS a bit to get it to look right. I presume you are using Bootstrap based on your ".form-control" class.
Basicly this is just forcing content to overlay on top of your input. not inside of it. otherwise you will need to prepend or append content to the input value using JavaScript
I'm working on a website for an American Football team. They have these newsitems on their front page which they can manage through a CMS system. I have a problem with alligning the text inside those news items. Two of the news items look like this:
As you can see, the right newsitem text are displayed nicely. But the left cuts it off really bad. You can only see the top half of the text at the last sentence. I use overflow: hidden; to make sure the text doesn't make the div or newsitem bigger. Does anyone have any idea how to solve this through HTML and CSS or should I cut it off serverside with PHP?
Here's my code (HTML):
<div class="newsitem">
<div class="titlemessagewrapper">
<h2 class="titel" align="center"><?php echo $row['homepagetitel']; ?></h2>
<div class="newsbericht">
<?php echo $row['homepagebericht']; ?>
</div>
</div>
<div class="newsfooter">
<span class="footer_author"><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></span> <span class="footer_comment">Comments <span>todo</span></span>
Lees meer
</div>
</div>
And here is the CSS:
.newsitem{
float: left;
height: 375px;
width: 296px;
margin: 20px 20px 0px 20px;
background-color: #F5F5F5;
}
.newsitem .titel{
color:#132055;
font-size:1.2em;
line-height:1.3em;
font-weight:bold;
margin:10px 5px 5px 5px;
padding:0 0 6px 0;
border-bottom:1px dashed #9c0001;
}
.titlemessagewrapper{
height: 335px;
overflow: hidden;
}
.newsitem .newsbericht{
padding:5px 5px 5px 5px;
font-size: 0.8em;
margin-bottom: 5px;
}
.newsitem .newsfooter{
width: 100%;
height: 25px;
background-color: #132055;
margin: 0px auto;
font-size: 0.8em;
padding-top: 5px;
margin-top: 10px;
border: 1px solid #9c0001;
}
You should not rely on the user to enter <cut> !
User Input = error
What if the user forgets to enter <cut>? Will your news item now look unprofessional?
What would be the point of a user creating a news item to find that some of it was cut off?
If the div can only fit a fixed string length you should validate the max length of the news item Input body instead of relying on <cut>. This can be simply achieved using maxlength attribute.
<textarea id="userinput" maxlength="150">Enter your news</textarea>
If you do use <cut> you should also add in overflow: hidden; to ensure that the content is not unprofessionally displayed if no cut tag is present.
If you want to display the all text and keep the div the same fixed height
Replace
overflow: hidden;
with
overflow:auto;
(Scroll bar won't appear when content is smaller than the div)
Otherwise validate the length of the string / content in your div or remove the CSS height attribute to allow all the content appear with no scroll bars.
Hope this helps
Remove the height attribute on the .titlemessagewrapper. Its this height attribute which is causing the cut off.
If you want the boxes to remain the same height: Take the whole string, perform substr and save in a new variable and echo that.
Eg.
<?php
$str = "abcdefghijkl";
$new_strsubstr($str, 0, 8); // abcdef
// will return abcdefhi
?>
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic
I have a "news" div and a "banner" div.
I want user to see the "banner" div when page loads. This "banner" div should show over the "news" div, exactly over the position, covering the "news" div. So:
How should I do to detect position of "news" div and show the "banner" div over, floating, without affecting the grid structure?
Any jQuery plugin that allows user to hide that div and never show again? w/ cookie?
Hope you've understood my idea. I leave an image:
use the jquery's offset
http://api.jquery.com/offset/
and the jquery's show and hide
http://api.jquery.com/show/
you can use hte negative margin for the banner to come over to the news...div.
Let me know if you need anything...
use absolute postioning for news banner.
I've written a script for you which should help.
It uses the Cookie plugin for jQuery.
I've put some comments in the code so hopefully it should be pretty self-explanatory.
Feel free to come back with other questions you may have.
Usage
You should see a banner on first load, then click run again and it should dissapear.
The banner will be positioned exactly above the news-list using absolute positioning, the width/height and the top/left offset of the newslist.
I realise this question has already been answered, but I thought I'd offer a slight alternative, using CSS, jQuery and the jQuery cookie plugin:
html:
<div class="container">
<div class="news">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="banner">
<p>Yet more text, this time it's the banner.</p>
<span class="close">X</span>
</div>
</div>
<div id="clear">Remove the cookie</div>
css:
.container {
width: 80%;
min-height: 400px;
position: relative;
border: 4px solid #000;
}
.news {
width: 100%;
height: 100%;
}
.banner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f00;
}
.close {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
width: 2em;
line-height: 2em;
text-align: center;
display: block;
cursor: pointer;
}
#clear {
width: 80%;
text-align: right;
color: #fff;
background-color: #999;
border: 4px solid #000;
border-top-width: 0;
font-family: arial, sans-serif;
cursor: pointer;
}
jQuery:
$(document).ready(
function(){
if ($.cookie('closed')){
$('.banner').remove();
}
$('.close').click(
function(){
$(this).closest('.banner').remove();
$.cookie('closed',true, {expires: 30});
});
$('#clear').click(
function(){
$.cookie('closed',false, {expires: -200});
});
});
JS Fiddle demo.
A slightly more pleasing demo, with animate():
$(document).ready(
function(){
if ($.cookie('closed')){
$('.banner').remove();
}
$('.close').click(
function(){
$(this)
.closest('.banner')
.animate(
{
'top':'120%'
}, 1500,
function(){
$(this).remove();
}
);
$.cookie('closed',true, {expires: 30});
});
$('#clear').click(
function(){
$.cookie('closed',false, {expires: -200});
});
});
Demo at JS Fiddle
Edited with an afterthought, assuming that you get repeat visitors, it might be worth re-setting the cookie in the initial if check, to ensure that they don't see the banner ever again (unless they leave more than 30 days between visits), changing it to:
if ($.cookie('closed')){
$('.banner').remove();
$.cookie('closed',true,{expires: 30});
}