0

I've put on my website a box which gets longer in height when it is clicked, I did this using the following code:

<script type="text/javascript">
var x=100; /*original height*/
function expand() {
document.getElementById("move").style.height=x+'px'; /*Height from css.css in the div called "move"*/
if(x>300) { /*Desired height after expansion*/
clearTimeout(t);
return;
}
x++; /*desired height isnt yet reached, keep expanding*/
t=setTimeout('expand()',0); /*Speed of expansion*/
}
</script>

The following is in the body:

<body>
<div id="move" onclick="expand()"></div> 
</body>

The expansion part works perfectly but when I try to put text in there, I want each line of text to appear as the box is stretching rather than everything appearing at the same time because right now it makes it seem like the text is misaligned compared to the box.

If someone can figure out a way to do this please include a few comments so I can understand it better.

Edited by asif49: n/a

2
Contributors
6
Replies
7
Views
5 Years
Discussion Span
Last Post by asif49
0

I hadnt included it here due to the fact the text just appears suddenly after the box has expanded altogether with the method I use whereas I want the text/content to appear as the box is expanding.

Here's how I tried to put the text into it, this line was put into the above javascript in several places but none of them solved anything:

document.getElementById("move").innerHTML="text<br>text<br>text<br>text<br>text<br>text<br>";

Edited by asif49: n/a

0

You have to set the text before starting the expanding.

And to be sure that the text will not overcome the size, and display outside, you have to set the overflow style to hidden;

#move { overflow: hidden; }
0

You are welcome.

Just mark as solved please.

And an advice, try to be more specific on the thread title. "JS Help" means nothing inside an javascript forum. This thread, in example, could be named like "Text problem with dynamic box size" or "Dynamic box size with text".

Cheers.

0

Marked as solved ^^

And thanks for that advice, will remember it! :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.