JS Animation

**Markstagram** · 12-20-2012 04:20 PM

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

**Markstagram** · 12-20-2012 04:26 PM

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>

**Lesshardtoofind** · 12-20-2012 08:23 PM

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.

**Markstagram** · 12-21-2012 02:16 AM

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!

**Lesshardtoofind** · 12-21-2012 04:17 AM

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>

**Lesshardtoofind** · 12-21-2012 04:56 AM

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>

**Markstagram** · 12-21-2012 11:04 AM

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!

**Lesshardtoofind** · 12-21-2012 04:52 PM

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.

**xelawho** · 12-22-2012 08:48 PM

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>

**Lesshardtoofind** · 12-23-2012 01:43 AM

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.

**vwphillips** · 12-23-2012 08:43 AM

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>

Thread: JS Animation

Thread Tools

Display

JS Animation

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions