Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 481
  • Last Modified:

Javascript newbie

I am new to javascript and am using some free code I found on the net to try to learn, so please bare with me if I do not explain thing correctly.

I downloaded a free slider menu and got it working.  The problem is the load state (or state it is in when its first loaded) is not what I expected.  

If you look at the following website

aliviarosevona.com

When it loads the sesame street image is open.  If you mouse over any image then bring your mouse out then are all collapsed, and this is how I would expect it to be when it loads.

Hope I explained this correctly.

Any help would be appreciated. Java code attached
var slideMenu=function(){
	var sp,st,t,m,sa,l,w,gw,ot;
	return{
		build:function(sm,sw,mt,s,sl,h){
			sp=s; st=sw; t=mt;
			m=document.getElementById(sm);
			sa=m.getElementsByTagName('li');
			l=sa.length; w=m.offsetWidth; gw=w/l;
			ot=Math.floor((w-st)/(l-1)); var i=0;
			for(i;i<l;i++){s=sa[i]; s.style.width=gw+'px'; this.timer(s)}
			if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
		},
		timer:function(s){
			s.onmouseover=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
			s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
		},
		slide:function(s,c){
			var cw=parseInt(s.style.width);
			if((cw<st && !c) || (cw>gw && c)){
				var owt=0; var i=0;
				for(i;i<l;i++){
					if(sa[i]!=s){
						var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
						if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+'px';
						}else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
						if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
				s.style.width=(w-owt)+'px';
			}else{clearInterval(m.timer);clearInterval(m.htimer)}
		}
	};
}();

Open in new window

0
savone
Asked:
savone
  • 3
  • 2
1 Solution
 
Ali KayahanFull Stack DeveloperCommented:
here you are ;
<script>
var slideMenu=function(){
	var sp,st,t,m,sa,l,w,gw,ot;
	return{
		build:function(sm,sw,mt,s,sl,h){
			sp=s; st=sw; t=mt;
			m=document.getElementById(sm);
			sa=m.getElementsByTagName('li');
			l=sa.length; w=m.offsetWidth; gw=w/l;
			ot=Math.floor((w-st)/(l-1)); var i=0;
			for(i;i<l;i++){s=sa[i]; s.style.width=gw+'px'; this.timer(s)}
		},
		timer:function(s){
			s.onmouseover=function(){clearInterval(m.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
			s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
		},
		slide:function(s,c){
			var cw=parseInt(s.style.width);
			if((cw<st && !c) || (cw>gw && c)){
				var owt=0; var i=0;
				for(i;i<l;i++){
					if(sa[i]!=s){
						var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
						if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+'px';
						}else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
						if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
				s.style.width=(w-owt)+'px';
			}else{clearInterval(m.timer);clearInterval(m.htimer)}
		}
	};
}();
</script>

Open in new window

0
 
savoneAuthor Commented:
Thank you much!  Can you give me a brief explanation of what you did so I can learn from it?
0
 
Ali KayahanFull Stack DeveloperCommented:
I just removed this line ;

if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}

which triggers inner method of slide that causes to slide on build .
0
 
savoneAuthor Commented:
Thanks
0
 
Ali KayahanFull Stack DeveloperCommented:
you are welcome :)
0

Featured Post

Configuration Guide and Best Practices

Read the guide to learn how to orchestrate Data ONTAP, create application-consistent backups and enable fast recovery from NetApp storage snapshots. Version 9.5 also contains performance and scalability enhancements to meet the needs of the largest enterprise environments.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now