play_ Posted June 4, 2006 Share Posted June 4, 2006 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? Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted June 4, 2006 Share Posted June 4, 2006 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] Quote Link to comment Share on other sites More sharing options...
play_ Posted June 4, 2006 Author Share Posted June 4, 2006 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\" /] Quote Link to comment Share on other sites More sharing options...
play_ Posted June 6, 2006 Author Share Posted June 6, 2006 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. Quote Link to comment Share on other sites More sharing options...
nogray Posted June 6, 2006 Share Posted June 6, 2006 set the style "overflow:hidden" so the extra text won't show up. Quote Link to comment Share on other sites More sharing options...
play_ Posted June 6, 2006 Author Share Posted June 6, 2006 [!--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. Quote Link to comment Share on other sites More sharing options...
play_ Posted June 7, 2006 Author Share Posted June 7, 2006 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? Quote Link to comment Share on other sites More sharing options...
Guest Rus Posted June 30, 2006 Share Posted June 30, 2006 Try setInterval("commentsDiv("+id+")", 1); - it might help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.