This javascript isn't working, and it's my first try

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I've never dealt in js because, to be quite honest, I was afraid of taking it on - I'm not a programmer by any means.

I'm trying to get a div to grow incrementally so it looks like an animation. I'm not showing any errors in the code so I'm thinking maybe I'm leaving something out that I haven't thought or heard of.
Code: [ Select ]
<html>
<head>
<script type="text/javascript">
function makeBig()
{
  var grow;
 
    if (document.documentElement || document.all)
    {
        grow = document.getElementById(the_div);
        grow.style.height = grow.style.height + 5;
    }
 
    if (grow.style.height < 200)
    {
        setTimeout("makeBig();", 10);
    }
}
</script>
 
<style type="text/css">
#the_div {
    background-image:url(bg_image.jpg);
    width: 200;
    height: 0;
}
</style>
 
</HEAD>
<BODY>
 
<form>
<input name="submit" type="button" value="submit" onClick="makeBig();">
</form>
<div id="the_div">
 
</div>
</BODY>
</HTML>
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function makeBig()
  5. {
  6.   var grow;
  7.  
  8.     if (document.documentElement || document.all)
  9.     {
  10.         grow = document.getElementById(the_div);
  11.         grow.style.height = grow.style.height + 5;
  12.     }
  13.  
  14.     if (grow.style.height < 200)
  15.     {
  16.         setTimeout("makeBig();", 10);
  17.     }
  18. }
  19. </script>
  20.  
  21. <style type="text/css">
  22. #the_div {
  23.     background-image:url(bg_image.jpg);
  24.     width: 200;
  25.     height: 0;
  26. }
  27. </style>
  28.  
  29. </HEAD>
  30. <BODY>
  31.  
  32. <form>
  33. <input name="submit" type="button" value="submit" onClick="makeBig();">
  34. </form>
  35. <div id="the_div">
  36.  
  37. </div>
  38. </BODY>
  39. </HTML>

Anyone know why this isn't working?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Try something like this.

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    
        <script type="text/javascript">
            function grow(id) {
                h=document.getElementById(id).offsetHeight;
                if(h<500) {
                    document.getElementById(id).style.height=h+10+'px';
                }
            }
            setInterval("grow('the_div')",500);
        </script>
        
        <style type="text/css">
            #the_div { border: 2px solid #000; width: 300px;}
        </style>
        
    </head>
    <body>
    
        <div id="the_div"></div>
    
    </body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4.     <head>
  5.     
  6.         <script type="text/javascript">
  7.             function grow(id) {
  8.                 h=document.getElementById(id).offsetHeight;
  9.                 if(h<500) {
  10.                     document.getElementById(id).style.height=h+10+'px';
  11.                 }
  12.             }
  13.             setInterval("grow('the_div')",500);
  14.         </script>
  15.         
  16.         <style type="text/css">
  17.             #the_div { border: 2px solid #000; width: 300px;}
  18.         </style>
  19.         
  20.     </head>
  21.     <body>
  22.     
  23.         <div id="the_div"></div>
  24.     
  25.     </body>
  26. </html>
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

awesome, thanks a ton. How would I keep it from executing until a button is clicked?

According to http://www.w3schools.com/js/js_functions.asp a function shouldn't run until it's called by an event.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Code: [ Select ]
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
   
        <script type="text/javascript">
            function grow(id) {
                h=document.getElementById(id).offsetHeight;
                if(h<500) {
                    document.getElementById(id).style.height=h+10+'px';
                }
            }
        </script>
       
        <style type="text/css">
            #the_div { border: 2px solid #000; width: 300px;}
        </style>
       
    </head>
    <body>
   
        <div id="the_div"></div>
   
        <input type="button" value="clicky!" onClick="setInterval('grow(\'the_div\')',500);" />
    </body>
</html>
 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5.     <head>
  6.    
  7.         <script type="text/javascript">
  8.             function grow(id) {
  9.                 h=document.getElementById(id).offsetHeight;
  10.                 if(h<500) {
  11.                     document.getElementById(id).style.height=h+10+'px';
  12.                 }
  13.             }
  14.         </script>
  15.        
  16.         <style type="text/css">
  17.             #the_div { border: 2px solid #000; width: 300px;}
  18.         </style>
  19.        
  20.     </head>
  21.     <body>
  22.    
  23.         <div id="the_div"></div>
  24.    
  25.         <input type="button" value="clicky!" onClick="setInterval('grow(\'the_div\')',500);" />
  26.     </body>
  27. </html>
  28.  


I updated my site to include the button firing the grow.

From the same:
Quote:
A function contains code that will be executed by an event or by a call to the function


What we're doing here is calling the function via an event listener. What the first code showed was a direct inline call to the function (via setTimeout, which was called just underneath our function).
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

hm, still running on pageload...
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Your copy or my example one? Try refreshing the page (CTRL+R version), b/c mine doesn't fire until you press the button.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

ah, alas! Thanks a ton mate! Not sure where the craziness was (I had refreshed a few time). Guess I made a change I didn't think would effect it in this way. It's working and looks fantastic. Thanks again for the time spent!
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Any time, glad I could help.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

just read your edit, I pasted the form but didn't remove the inline "setInterval." So there ya have it, the reason it wasn't working. Today javascript - tomorrow the world! Muahahaha.

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 68 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.