Member Avatar for asif49

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 because: n/a
  • 2 Contributors
  • 6 Replies
  • 97 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by asif49
Member Avatar for AleMonteiro

asif39, what text? Your code don't have any text.

Member Avatar for asif49

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 because: n/a
Member Avatar for AleMonteiro

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; }
Member Avatar for asif49

It works beautifully.

Thanks a lot man!

Member Avatar for AleMonteiro

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.

Member Avatar for asif49

Marked as solved ^^

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.