The above contains the javascript code for slide in menu with a menu-bar picture. I would like to increase the length of the picture 3 (the horizontal bar) from 100 to 200 as my menu page is 200px in width.Code:<style type="text/css"> <!-- .j_menu { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt} .j_menu1 { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt; color: #FF6600; text-align: center} a:active { text-decoration: none} a:hover { text-decoration: none} a:link { text-decoration: none} a:visited { text-decoration: none} --> </style> <SCRIPT language=javascript> document.write("<style type=text/css>#master {LEFT: -100px; POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 200px; Z-INDEX: 2}#menu {LEFT: 100px; POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 18px; Z-INDEX: 5}#top {LEFT: 0px; POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}#screen {LEFT: 0px; POSITION: absolute; TOP: 31px; VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}#screenlinks {LEFT: 0px; POSITION: absolute; TOP: 31px; VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}</style>") var ie = document.all ? 1 : 0 var ns = document.layers ? 1 : 0 if(ie){ document.write('<style type="text/css">') document.write("#screen {filter:Alpha(Opacity=50);}") document.write("</style>") } if(ns){ document.write('<style type="text/css">') document.write("#master {clip:rect(0,150,250,0);}") document.write("</style>") } var ie = document.all ? 1 : 0 var ns = document.layers ? 1 : 0 var master = new Object("element") master.curLeft = -100; master.curTop = 10; master.gapLeft = 0; master.gapTop = 0; master.timer = null; function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop){ clearTimeout(eval(layerName).timer) if(eval(layerName).curLeft != fromLeft){ if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft){eval(layerName).curLeft = fromLeft} else if(eval(layerName).curLeft < fromLeft){eval(layerName).curLeft = eval(layerName).curLeft + paceLeft} else if(eval(layerName).curLeft > fromLeft){eval(layerName).curLeft = eval(layerName).curLeft - paceLeft} if(ie){document.all[layerName].style.left = eval(layerName).curLeft} if(ns){document[layerName].left = eval(layerName).curLeft} } if(eval(layerName).curTop != fromTop){ if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop){eval(layerName).curTop = fromTop} else if(eval(layerName).curTop < fromTop){eval(layerName).curTop = eval(layerName).curTop + paceTop} else if(eval(layerName).curTop > fromTop){eval(layerName).curTop = eval(layerName).curTop - paceTop} if(ie){document.all[layerName].style.top = eval(layerName).curTop} if(ns){document[layerName].top = eval(layerName).curTop} } eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30) } function setPace(layerName, fromLeft, fromTop, motionSpeed){ eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft))/motionSpeed eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop))/motionSpeed moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop) } var expandState = 0 function expand(){ if(expandState == 0){setPace("master", 0, 10, 10); if(ie){document.menutop.src = "menub.gif"}; expandState = 1;} else{setPace("master", -100, 10, 10); if(ie){document.menutop.src = "menu.gif"}; expandState = 0;} } document.write("<div id=master><div id=menu onmouseover=javascript:expand()><table border=0 cellpadding=0 cellspacing=0 width=18><tbody><tr><td width=100%><a href=javascript:expand() onFocus=this.blur()><img alt="click here to open/close" border=0 height=70 name=menutop src=menu.gif width=18></a></td></tr></tbody></table></div><div id=top><table border=0 cellpadding=0 cellspacing=0 width=100><tbody><tr><td width=100%><img border=0 height=6 src=top-m.gif width=100></td> </tr></tbody></table></div><div id=screen onmouseout=javascript:expand()><table border=0 cellpadding=5 cellspacing=0 width=100><tbody><tr><td bgcolor=#8FC0E0 width=100%><table bgcolor=#0090DF border=0 cellpadding=0 cellspacing=0 width=100% height=196><tbody><tr><td width=100%><table border=0 cellpadding=5 cellspacing=1 width=100%><tbody><tr> <td bgcolor=#B0CFDF width=100%><br><br><br><br><br></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><div id=screenlinks ><table border=0 cellpadding=6 cellspacing=0 width=100><tbody><tr><td style=FILTER: alpha(opacity=90) width=100%><table bgcolor=#0090DF border=0 cellpadding=0 cellspacing=0 width=100% ><tbody> <tr><td width=100%><table border=0 cellpadding=6 cellspacing=1 width=100%><tbody class=j_menu><tr><td bgcolor=#E3E3E3 width=100%><div class=j_menu1>slide-in menu</div><br>link 1<br><a href=http://easylearn.bhes.tpc.edu.tw/name/hardware/name_hardware.htm target=_blank> link 2</a><br><a href=http://easylearn.bhes.tpc.edu.tw/name/software/name_software.htm target=_blank> link 3</a><br>Javascript<br><a href=http://easylearn.bhes.tpc.edu.tw/java/script.htm target=_blank> Script</a><br><a href=http://easylearn.bhes.tpc.edu.tw/java/applet.htm target=_blank> Applet</a><br>Students' works<br><a href=http://easylearn.bhes.tpc.edu.tw/student/homepage/stu_web.htm target=_blank> link 5</a><br><a href=http://easylearn.bhes.tpc.edu.tw/student/picture/stu_picture.htm target=_blank> link 6</a><br><a href=http://easylearn.bhes.tpc.edu.tw/student/study/study.htm target=_blank> link 7</a><br></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div></div>"); if(ie){var sidemenu = document.all.master;} if(ns){var sidemenu = document.master;} function FixY(){ if(ie){sidemenu.style.top = document.body.scrollTop+10} if(ns){sidemenu.top = window.pageYOffset+10} } setInterval("FixY()",100); </SCRIPT>
I have increased the width as follows:
Would appreciate if someone could advise on how to modify the above codes so that the menu width could be increased to 200px.HTML Code:<img border=0 height=6 src=top-m.gif width=200>
Thank you.
Edit--------Through trial and error, I have got the problem fixed.^_^



Reply With Quote
Bookmarks