StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavascript Assistance
text
Body
copied!<p>The issue I am having is when the function is called multiple times for different elements. I believe I need to localize all of the variables such that this function can be used against multiple elements. In case it matters I also call in jquery 1.3.</p> <p>If I only call pageSlide once, everything is fine, but once I call it multiple times it gets painful. No errors, just erratic behaviour.</p> <p><strong>The code has been updated</strong></p> <pre><code>var slideMenu=function(){ var speed, startWidth, time, menuId, liID, menuLen, menuWidth, globalWidth, openWidth; return{ speed : 0, startWidth : 0, time : 0, menuId : 0, liID : 0, menuLen : 0, menuWidth : 0, globalWidth : 0, openWidth : 0, build:function(ulID,passStartWidth,passTime,s,passSlideLen,passHeight){ speed=s; startWidth=passStartWidth; time=passTime; menuId=document.getElementById(ulID); liID=menuId.getElementsByTagName('li'); menuLen=liID.length; menuWidth=menuId.offsetWidth; globalWidth=menuWidth/menuLen; openWidth=Math.floor((menuWidth-startWidth)/(menuLen-1)); var i=0; for(i;i<menuLen;i++){ s=liID[i]; s.style.width=globalWidth+'px'; this.timer(s) } if(passSlideLen!=null){ menuId.timer=setInterval(function(){ slideMenu.slide(liID[passSlideLen-1]) },time) } }, timer:function(s){ s.onmouseover=function(){ clearInterval(menuId.htimer); clearInterval(menuId.timer); menuId.timer=setInterval(function(){ slideMenu.slide(s) }, time) } s.onmouseout=function(){ clearInterval(menuId.timer); clearInterval(menuId.htimer); menuId.htimer=setInterval(function(){ slideMenu.slide(s,true) }, time) } }, slide:function(s,passChange){ var changeWidth=parseInt(s.style.width); if((changeWidth<startWidth && !passChange) || (changeWidth>globalWidth && passChange)){ var overallWidth=0; var i=0; for(i;i<menuLen;i++){ if(liID[i]!=s){ var slideObj,openWidth; var opening=0; slideObj=liID[i]; openWidth=parseInt(slideObj.style.width); if(openWidth<globalWidth && passChange){ opening=Math.floor((globalWidth-openWidth)/speed); opening=(opening>0)?opening:1; slideObj.style.width=(openWidth+opening)+'px'; }else if(openWidth>openWidth && !passChange){ opening=Math.floor((openWidth-openWidth)/speed); opening=(opening>0)?opening:1; slideObj.style.width=(openWidth-opening)+'px' } if(passChange){ overallWidth=overallWidth+(openWidth+opening)}else{overallWidth=overallWidth+(openWidth-opening) } } } s.style.width=(menuWidth-overallWidth)+'px'; }else{ clearInterval(menuId.timer); clearInterval(menuId.htimer) } } }; }(); </code></pre> <p>The code above does not error but fails to work. When I use the this keyword, it doesn't get any better.</p> <p>My question is which variables should be "this.". I have tried various combinations that I thought would work, but I am missing something.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload