PDA

View Full Version : query on slide in menu with picture



jiam1
05-20-2007, 11:00 AM
<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&#37;><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>&nbsp;link 2</a><br><a href=http://easylearn.bhes.tpc.edu.tw/name/software/name_software.htm target=_blank>&nbsp;link 3</a><br>Javascript<br><a href=http://easylearn.bhes.tpc.edu.tw/java/script.htm target=_blank>&nbsp;Script</a><br><a href=http://easylearn.bhes.tpc.edu.tw/java/applet.htm target=_blank>&nbsp;Applet</a><br>Students' works<br><a href=http://easylearn.bhes.tpc.edu.tw/student/homepage/stu_web.htm target=_blank>&nbsp;link 5</a><br><a href=http://easylearn.bhes.tpc.edu.tw/student/picture/stu_picture.htm target=_blank>&nbsp;link 6</a><br><a href=http://easylearn.bhes.tpc.edu.tw/student/study/study.htm target=_blank>&nbsp;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>

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.

I have increased the width as follows:


<img border=0 height=6 src=top-m.gif width=200>

Would appreciate if someone could advise on how to modify the above codes so that the menu width could be increased to 200px.

Thank you.

Edit--------Through trial and error, I have got the problem fixed.^_^