Jump to content


Photo

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


  • Please log in to reply
7 replies to this topic

#1 play_

play_
  • Staff Alumni
  • Advanced Member
  • 717 posts

Posted 04 June 2006 - 06:37 AM

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:
function resize() {
    var target = document.getElementById('test');
    target.style.height = '100';

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

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?
regex.kat.sh --- regex library
u.kat.sh ---- url shortener
tabbit.org ---- tabbed pastebin

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 04 June 2006 - 10:05 AM

You'll want to use setInterval like so:
<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" />


#3 play_

play_
  • Staff Alumni
  • Advanced Member
  • 717 posts

Posted 04 June 2006 - 05:53 PM

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\" /]
regex.kat.sh --- regex library
u.kat.sh ---- url shortener
tabbit.org ---- tabbed pastebin

#4 play_

play_
  • Staff Alumni
  • Advanced Member
  • 717 posts

Posted 06 June 2006 - 12:02 PM

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.


regex.kat.sh --- regex library
u.kat.sh ---- url shortener
tabbit.org ---- tabbed pastebin

#5 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 06 June 2006 - 04:31 PM

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

NoGray.com


#6 play_

play_
  • Staff Alumni
  • Advanced Member
  • 717 posts

Posted 06 June 2006 - 08:40 PM

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

Thank you very much.
regex.kat.sh --- regex library
u.kat.sh ---- url shortener
tabbit.org ---- tabbed pastebin

#7 play_

play_
  • Staff Alumni
  • Advanced Member
  • 717 posts

Posted 07 June 2006 - 04:51 AM

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.


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>

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?
regex.kat.sh --- regex library
u.kat.sh ---- url shortener
tabbit.org ---- tabbed pastebin

#8 Guest_Rus_*

Guest_Rus_*
  • Guests

Posted 30 June 2006 - 06:31 AM

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





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users