Results 1 to 1 of 1

Thread: query on slide in menu with picture

  1. #1
    Join Date
    Mar 2007
    Posts
    27
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default query on slide in menu with picture

    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&#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:

    HTML Code:
    <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.^_^
    Last edited by jiam1; 05-22-2007 at 02:44 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •