Jump to content

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?
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]
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.

[!--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.
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?
  • 4 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.