javascript doens't have a real SLEEP() function does it?

[play_]

But i need a sleep().

What im doing is, i have a div that has height of 500px. When i click a button, the height changes to 100.
But it all happens so sudden. So i'm trying to make an effect, little by little the div's height diminishes untill it reaches 100.

Here is the rezising function:
[code]
function resize() {
    var target = document.getElementById('test');
    target.style.height = '100';
[/code]

the div and the button:
[code]
<div id="test" style="border:1px solid red; height:500px; width: 500px;"></div>
<input type="button" id="1" onclick="resize()" value="resize" />
[/code].

now. im pretty sure the easiest way to accomplish what i want is to use a for loop.
but i'd need to inset a sleep() function in it. so each time the div's height is diminished by 1, the sleep() function would make it wait before starting the loop again.

Any thoughts?

[wildteen88]

You'll want to use setInterval like so:
[code]<script type="text/javascript">

var size = 500;

function resize()
{
    var resizeInt = setInterval("resizeDiv()", 10);
}

function resizeDiv()
{
    if(size >= 100)
    {
        size = size - 1;
        document.getElementById('test').style.height = size + "px";

    }
}

</script>

<div id="test" style="border:1px solid red; height:500px; width: 500px;"></div>
<input type="button" id="1" onclick="resize()" value="resize" />[/code]

[play_]

Thank you very much wild teen [img src=\"style_emoticons/[#EMO_DIR#]/smile.gif\" style=\"vertical-align:middle\" emoid=\":smile:\" border=\"0\" alt=\"smile.gif\" /]

[play_]

Quick question.
If the div has text inside, it will stop resizing once the borders reach the text. I know there is a way around this because i've seen things like this used before in a site. Could someone tell me how(if it's simple)? If it's all that complicated, then don't worry. Just give me some pointers and ill go search on my own.

[nogray]

set the style "overflow:hidden" so the extra text won't show up.

[play_]

[!--quoteo(post=380654:date=Jun 6 2006, 12:31 PM:name=nogray)--][div class=\'quotetop\']QUOTE(nogray @ Jun 6 2006, 12:31 PM) [snapback]380654[/snapback][/div][div class=\'quotemain\'][!--quotec--]
set the style "overflow:hidden" so the extra text won't show up.
[/quote]

Thank you very much.

[play_]

Ok last time. I promise.
Wht ive been trying to do is, after each blog post, i have a "comments" link. When that link is clicked, i want the comments div to expand and show everything inside.

So here is the problem i am having. WildTeen88 helped me out with the functions(thanks).

I pull each blog entry via php/sql.
before the loop, i have $i = 0 and inside the loop i have $i++.
This works fine. each comment div gets an i ID of comments.$i (which ends up being comments1, comments2, comments3).

So when the comments link is clicked, i pass the ID to the javascript function resize(). which is then meant to pass it to commetsDiv() function. but it is not and i can't figure out why.


[code]
function commentsDiv(id) {
    var size = 1
    if(size <= 200) {
        size = size + 5;
        document.getElementById(id).style.height = size + "px";
    }
}


function resize(id) {
    size  = 5;
       setInterval("commentsDiv(id)", 1);
}


and here is the link inside the php loop:
<a href="#" onclick="resize(\'comment'.$i.'\')">'. $number_of_comments.$comments.'</a>
[/code]

the source code looks fine. i did a little test by putting alert(id) in the resize() function. so so far so good. but ID (which holds the division ID to be resized) is not being passed from resize() to commentsDiv().

Also, is there a way i can get the height of an element without setting the height? for example, let's say i have a DIV with random text in it and i don't know the height because the text changes, changing the height of the div. So is there a way to find out the height of a DIV?

[Guest Rus]

Try setInterval("commentsDiv("+id+")", 1); - it might help