Jump to content

Archived

This topic is now archived and is closed to further replies.

play_

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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\" /]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
set the style "overflow:hidden" so the extra text won't show up.

Share this post


Link to post
Share on other sites
[!--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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
Guest Rus
Try setInterval("commentsDiv("+id+")", 1); - it might help

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.