www.webdeveloper.com
Results 1 to 11 of 11

Thread: JS Animation

  1. #1
    Join Date
    Dec 2012
    Location
    California
    Posts
    5

    JS Animation

    Hey there folks,

    My name is Mark and I'm an aspiring web developer (who isn't), and I have already run into my first headache:

    I am trying to make a div block expand to a certain width when the mouse rolls over the block and then collapse when the mouse rolls off the image. Easy enough right? Well I've only been doing javascript for a week or so and for whatever reason I can't get it. Prepare for newbie code:

    Code:
    tabLength=100;
    function expandAbout() { 
    	tabLength += 1;
    	document.getElementById("aboutTab").style.width = (tabLength)+"px";
    	if (tabLength>=150 || tabLength==150) {
    		tabLength=150;
    		document.getElementById("aboutTab").style.width = 150 +"px";
    	}
    	else	{
    		var int2 = setInterval(expandAbout,10);
    	}
    };
    
    function collapseAbout() {
    	tabLength -= 1;
    	document.getElementById("aboutTab").style.width = (tabLength)+"px";
    	if (tabLength<=100 || tabLength==100) {
    		tabLength=100;
    		document.getElementById("aboutTab").style.width = 100 +"px";
    	}
    	else	{
    		var int1 = setInterval(collapseAbout,10);
    	}
    };
    Would this do what I explained above or am I incredibly off?
    Any help would be greatly appreciated. I'm sure I'll be the one helping everyone out one day...just get me rollin first eh?

    Thanks everyone,
    ~~Markstagram

  2. #2
    Join Date
    Dec 2012
    Location
    California
    Posts
    5
    Oh, sorry, here are the event handlers as well:

    Code:
    <li><a href="about.html" id="aboutTab" onmouseover="int1=window.clearInterval(int1);expandAbout()" onmouseout="int2=window.clearInterval(int2);collapseAbout()">About</a></li>

  3. #3
    Join Date
    Dec 2012
    Posts
    54
    A few things. I would read

    https://developer.mozilla.org/en-US/...ow.setInterval

    If you call the setInterval once it will continue to call the function on the interval.
    Your code calls it over and over. This isn't needed you only need to clear the interval when you are done needing it to repeat.

    You could try something like
    Code:
    <script>
      var interval;
      tabLength=100;
      function expandAbout() {
        if(tabLength < 150) 
          tabLength++;
        document.getElementById("aboutTab").style.width = (tabLength)+"px";
        if(tabLength == 150)
          clearInterval(interval);
      }
      function StartExpansion(){
        interval = setInterval(expandAbout, 10);
      }
    </script>
    Then replace wherever your code called expandAbout() with StartExpansion(). Or whatever you want to name the call. Then you can similarly adjust your collapse function as well.

    Note: I did not test the sytax in a web browser so the code is to teach a concept.

  4. #4
    Join Date
    Dec 2012
    Location
    California
    Posts
    5
    Hey there!

    By mixing your code above and some little adjustments (that I learned from that source you gave me), I can only come up with this...:

    Code:
    <html>
    <head>
    <style type="text/css">
    a {
    	display: block;
    	width:100px;
            text-align:right;
    	text-decoration: none;
    	background-color: #CCC;
    	color: #600;
    	padding-top: 5px;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-left: 15px;
    }
    
    a:hover, a:active, a:focus {
    	color: #CCC;
    	background-color: #660000;
    }
    
    #aboutTab {
    	width: 100px;
    	max-width: 150px;
    	min-width: 100px;
    }
    </style>
    <script type="text/javascript">
      var int1;
      var int2;
      function abTabExpand() {
        tabLength=((document.getElementsByTagName("a")["aboutTab"].offsetWidth)-20);
    	if(tabLength < 150) 
          tabLength++
        document.getElementById("aboutTab").style.width = (tabLength)+"px";
        if(tabLength >= 150 || tabLength==150) {
          clearInterval(int1);
    	  delete(tabLength);	  
    	}
      }
      function startExpand(){
       	var int1 = setInterval(abTabExpand, 5);
      }
     </script>
     <script type="text/javascript">
      function abTabCollapse() {
        tabLength=document.getElementsByTagName("a")["aboutTab"].offsetWidth;
    	if(tabLength > 100) 
          tabLength--
        document.getElementById("aboutTab").style.width = (tabLength)+"px";
        if(tabLength <= 100 || tabLength==100) {
          clearInterval(int2);
    	  delete(tabLength);
      }
      }
      function startCollapse(){
       	var int2 = setInterval(abTabCollapse, 5);
      }
    </script>
    </head>
    <body>
    <a href=about.html id="aboutTab" onmouseover="startExpand()" onmouseout="startCollapse()">ABOUT</a>
    </body>
    </html>
    I copied/adjusted everything so you can see the specific code I am working with. The point is to make it work like a flash nav (where the box expands to the right when you are hovering over it; then collapses back when you are not)

    Thanks for the help regardless; if anything, this experiment is teaching me way more than I had expected it would!
    Last edited by Markstagram; 12-21-2012 at 03:10 AM.

  5. #5
    Join Date
    Dec 2012
    Posts
    54
    I adjusted your code to a working example... I simplified things alot. If you have any questions or comments on the new code let me know. I am very new at JavaScript too. I just started last week, but I'm pretty fluent in C++.

    Code:
    <html>
    <head>
    <meta charset= "utf-8">
    <style type="text/css">
    a {
    	display: block;
    	width:100px;
            text-align:right;
    	text-decoration: none;
    	background-color: #CCC;
    	color: #600;
    	padding-top: 5px;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-left: 15px;
    }
    
    a:hover, a:active, a:focus {
    	color: #CCC;
    	background-color: #660000;
    }
    
    #aboutTab {
    	width: 100px;
    
    }
    </style>
    <script>
      var int1;
      var int2;
      var tabLength = 100;
      function abTabExpand() {
        if(tabLength < 150)
          document.getElementById("aboutTab").style.width = (tabLength++) + 'px';
      }
      function startExpand(){
            clearInterval(int2);
            int1 = setInterval(abTabExpand, 5);
      }
      function abTabCollapse() {
        if(tabLength > 100)
          document.getElementById("aboutTab").style.width = (--tabLength) + 'px';
      }
      function startCollapse(){
            clearInterval(int1);
       	int2 = setInterval(abTabCollapse, 5);
      }
    </script>
    </head>
    <body>
    <a href=about.html id="aboutTab" onmouseover="startExpand()" onmouseout="startCollapse()">ABOUT</a>
    </body>
    </html>
    Last edited by Lesshardtoofind; 12-21-2012 at 04:20 AM.

  6. #6
    Join Date
    Dec 2012
    Posts
    54
    Lol dunno why I got hooked on this, but I realized the coding would get really redundant if you continued on that path when needing to add multiple elements. So I adjusted the code again if you notice I added two parameters to the setinterval functions.

    One parameter is the ID of the item that is doing the mouseover and the second is an index in the corresponding arrays that represent length and intervals. So you can add more things to the menu just by following the simple formula

    Code:
    <html>
    <head>
    <meta charset= "utf-8">
    <style type="text/css">
    a {
    	display: block;
    	width:100px;
            text-align:right;
    	text-decoration: none;
    	background-color: #CCC;
    	color: #600;
    	padding-top: 5px;
    	padding-right: 5px;
    	padding-bottom: 5px;
    	padding-left: 15px;
    }
    
    a:hover, a:active, a:focus {
    	color: #CCC;
    	background-color: #660000;
    }
    
    #aboutTab {
    	width: 100px;
    }
    </style>
    <script>
      var int1 = new Array();
      var int2 = new Array();
      var tabLength = new Array();
      for(var x = 0; x < 3; x++)
        tabLength[x] = 100;
      function abTabExpand(tab, index){
        if(tabLength[index] < 150)
          document.getElementById(tab).style.width = (++tabLength[index]) + 'px';
        else
          clearInterval(int1[index]);
      }
      function startExpand(tab, index){
            clearInterval(int2[index]);
            int1[index] = setInterval(function(){abTabExpand(tab, index)}, 0);
      }
      function abTabCollapse(tab, index) {
        if(tabLength[index] > 100)
          document.getElementById(tab).style.width = (tabLength[index]--) + 'px';
        else
          clearInterval(int2[index]);
      }
      function startCollapse(tab, index){
            clearInterval(int1[index]);
       	int2[index] = setInterval(function(){abTabCollapse(tab, index)}, 0);
      }
    </script>
    </head>
    <body>
    <a href=about.html id="aboutTab" onmouseover="startExpand('aboutTab', '0')" onmouseout="startCollapse('aboutTab', '0')">ABOUT</a>
    <a href=about.html id="andthis" onmouseover="startExpand('andthis', '1')" onmouseout="startCollapse('andthis', '1')">ANDTHIS</a>
    <a href=about.html id="andthat" onmouseover="startExpand('andthat', '2')" onmouseout="startCollapse('andthat', '2')">ANDTHAT</a>
    </body>
    </html>

  7. #7
    Join Date
    Dec 2012
    Location
    California
    Posts
    5
    Wow! I love this place already...I'm glad you got as sucked into this code as I did haha (and that you're a bit more experienced) - your fix worked 100% perfectly; It looks beautiful! I won't lie I don't really understand the concept of arrays yet - my mind is still processing basic stuff - but I think this example might clear a lot of things up for me. Great work! Hopefully one day I can return the favor...even though by then I'm sure you'll be making automatic planes and what not

    Thanks for your help - I appreciate the effort you put into this!

  8. #8
    Join Date
    Dec 2012
    Posts
    54
    Lol I doubt that. Glad it works for you. Hope you don't mind since I spent some time on it and I think it looks nice I am borrowing the concept for one of my pages! Seriously if you have questions about how it works just let me know you can toss me a PM too. I'm a pretty big nerd so I'm coding something every other day. (whether its html, css, javascipt, xhtml, C, or C++) As for the arrays learn them! They are VERY useful.. the next thing I'm trying to learn is how to give a function its own methods so that I can have alot of scripts working together w/o stepping on each others toes.

  9. #9
    Join Date
    Nov 2010
    Posts
    1,084
    here's another way of doing it, in case you're interested...
    Code:
    <body>
    <a href=about.html id="aboutTab" >ABOUT</a>
    <a href=about.html id="andthis">ANDTHIS</a>
    <a href=about.html id="andthat" >ANDTHAT</a>
    <script>
    var int0,int1,int2;
      function startExpand(tab,ind){
          var twidth=parseFloat(tab.style.width)||100;
    	  clearTimeout(window["int"+ind]);
    	  window["int"+ind]=setTimeout(function(){if(twidth<150){tab.style.width=(++twidth)+"px";}startExpand(tab,ind)},20)
      }
    
      function startCollapse(coltab,ind){
        var tabwidth=parseFloat(coltab.style.width);
    	  clearTimeout(window["int"+ind])
    	  window["int"+ind]=setTimeout(function(){if(tabwidth>100){coltab.style.width=(--tabwidth)+"px";}startCollapse(coltab,ind)},20)
      }
      
      var links=document.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
    	(function (i) {
    	links[i].onmouseover=function(){
    	startExpand(this,i)
    			}; 
    	links[i].onmouseout=function(){
    	startCollapse(this,i)
    			};
    		})(i);
    	}
    </script>
    </body>

  10. #10
    Join Date
    Dec 2012
    Posts
    54
    Nice post I've not tried using the setTimeout function yet. I'm still pretty new with the JavaScript so I guess I overcomplicated the problem a little bit.

  11. #11
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    excuse me for butting in

    but this is simplified and does not leave the timeout running or global variables

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div style="background-Color:red;width:100px;"><a href=about.html id="aboutTab" >ABOUT</a></div>
    <div style="background-Color:red;width:100px;"><a href=about.html id="andthis">ANDTHIS</a></div>
    <div style="background-Color:red;width:100px;"><a href=about.html id="andthat" >ANDTHAT</a></div>
    
    <script>
    
      function startExpand(tab,ud,to){
       var twidth=(parseFloat(tab.style.width)||100)+ud;
       clearTimeout(startExpand[to]);
       if ((ud>0&&twidth<=150)||(ud<0&&twidth>=100)){
        tab.style.width=twidth+"px";
       	startExpand[to]=setTimeout(function(){startExpand(tab,ud,to)},20);
       }
      }
    
      var links=document.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
    	(function (i) {
    	links[i].onmouseover=function(){
    	startExpand(this.parentNode,1,'dly'+i)
    			};
    	links[i].onmouseout=function(){
    	startExpand(this.parentNode,-1,'dly'+i)
    			};
    		})(i);
    	}
    
    </script>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles