Develop Reference

Contenteditable divs hide content after reloading

For text editing purposes I use contenteditable divs in a website. When I edit some text the div height is growing dynamically and all other elements on the webiste below shift downwards. That's what I want. Finally I store the content via Ajax on a server. So far everything is working fine.
The problem is when I reload the content from the server the height of the contenteditable divs does not grow automatically to show all it's content. Instead its height stay in the initial size.
BTW, this is true for all browsers.
Does anyone have some hints to overcome this issue ?
EDIT
This is the html and javascript contendeditable relevant code
<div class="editable" contentEditable=true onkeyup="autoGrowSave(this)" onblur="update(this)" ></div>
function autoGrowSave (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
I use above javascript function to auto grow the contenteditable. Actually I do not know if even I need it. The jsFiddle example from Abhitalks below does not need one. Hmm ... I have to try without...
To store content on a sever I use the onblur attribute, which works perfect.

I answer the question myself. Thanks to Abhitaks jsFiddle I found the problem which limited to auto adjust the height. For this I appreciate the answer of course ;-)
In a CSS declaration I gave the class editable an initial height of 20px. Because of this the contenteditable could not adjust its height automatically. In turn I needed the javascript function autoGrow() to compensate this issue. While this "crazy" approach worked when editing the content, it did not work when reloading the content.
So the solution is to eliminate the heightin the CSS declaration and get rid of the javascript function autoGrow(). Now it works perfect !

Change paragraph content when height of a div reaches a certain percentage

I'm making a loader for a website. The HTML is as follows:
<div class="loadingContainer">
<div class="greyContainer">
<img class="eggGrey" src="img/egg-grey.png">
<p id="bluePercent">50%</p>
</div>
<div class="blueContainer">
<img class="eggBlue" src="img/egg-blue.png">
<p class="greyPercent">50%</p>
</div>
</div>
When element blueContainer has a height of 2%, I want the text in both paragraphs to be 2%. I want the paragraph text to always show the height in percentage of blueContainer. Height values are applied through an external CSS file, I am not very well versed in the language of Javascript, and I've tried some ways but I cannot figure out how I should do this.
EDIT: Some of the things I've tried (and probably miserably failed at):
function percentages(){
document.getElementByClassName("greyPercent, bluePercent"){
if (document.getElementByClassName("greyContainer, blueContainer"){
}
}
}
This is where I'm stuck at too, because I have no idea how I could tell the javascript to run the function when the element has a certain height.
EDIT: Here is a jsfiddle to illustrate what I'm doing. I gave the containers a background colour because of a lack of images.
https://jsfiddle.net/1s5tw6es/

from https://stackoverflow.com/a/9628472/2818869.
First, There is no such css-changes event out of the box, but you can
create one by your own, as onchange is for :input elements only.
not for css changes.
There are two ways to track css changes.
Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.
Nowadays, there are more solutions.
MutationObserver (If you can drop old IEs)
CSS Element Queries
But in this case, I would create function like setProgress which change both the element height and the paragraph.
Example: http://jsfiddle.net/e59u3p4j/1/

This should work:
$("document").ready(function(){ //In case you didn't use this
$(window).resize(function(){
$('#bluePercent').html($('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
});
});

Fit div to size of contents without overlapping text?

I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>

Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Rollover Image to Text with Transparent Background

I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!

This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)

If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.

Obscure break in div tag

I am trying to make a div which expands to show hidden content when hovered over. However there seems to be a random space in between images inside the div, hence a premature onmouseout method call. Is there any way to get rid of this problem?
Check out a live version here.

The onmouseout event bubbles.
Therefore, you get the event whenever the mouse moves out of one of your child elements.
You need to check event.target and make sure it's the <div> element. (Or use jQuery's hover method)

Where exactly is the problem? is it the black space between the first two car images when you hover over the first car?
The div is expanding to more than what the image width is. set the width of the image to be 300px.
Then try setting margin,border,padding to zero on all container divs
div.itemHolder {
border:0 none;
margin:0;
padding:0;
}
I think that since you are setting both the height AND width properties, that the image is coming up with a weird aspect ratio. try setting only one of them. If that is not a part of your worries, please ignore

I must not have explained this clear enough, but we managed to fix the issue.
Many thanks for the responses.