Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Scrolling Menu

  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Scrolling Menu

    Hi

    I've got this code to create a scrolling menu... works a treat...

    That is until I try to add a 2nd menu to the same page. I kinda knew it was going to happen but have no idea how to adapt the javascript/css/html to make them both work.

    Any ideas.???


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    
    <style type="text/css">
    
    
    #motioncontainer a img{ /*image border color*/
    border: 0px;
       filter:alpha(opacity=30);   /* Internet Explorer       */
       -moz-opacity:0.3;           /* Mozilla 1.6 and below   */
       opacity: 0.3; 
    }
    
    #motioncontainer a:hover img{ /*image border hover color*/
    border:0px;
       filter:alpha(opacity=100);   /* Internet Explorer       */
       -moz-opacity:1.0;           /* Mozilla 1.6 and below   */
       opacity: 1.0; 
    }
    
    #motioncontainer a:hover{
    color: red; /* Dummy definition to overcome IE bug */
    }
    
    
    	
    </style>
    
    
    <script type="text/javascript">
    
    /***********************************************
    * CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for source code
    * Last updated Mar 15th, 04'. Added "End of Gallery" message.
    * This copyright notice must stay intact for legal use
    ***********************************************/
    
    var restarea=145 //1) width of the "neutral" area in the center of the gallery in px
    var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
    var endofgallerymsg="" //3) message to show at end of gallery. Enter "" to disable message.
    
    
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var iedom=document.all||document.getElementById
    var scrollspeed=0
    var movestate=""
    
    var actualwidth=''
    var cross_scroll, ns_scroll
    var loadedyes=0
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function creatediv(){
    statusdiv=document.createElement("div")
    statusdiv.setAttribute("id","statusdiv")
    document.body.appendChild(statusdiv)
    statusdiv=document.getElementById("statusdiv")
    statusdiv.innerHTML=endofgallerymsg
    }
    
    function positiondiv(){
    menuheight=parseInt(crossmain.offsetHeight)
    mainobjoffsetH=getposOffset(crossmain, "top")
    statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
    statusdiv.style.top=menuheight+mainobjoffsetH+"px"
    }
    
    function showhidediv(what){
    if (endofgallerymsg!="")
    statusdiv.style.visibility=what
    }
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function moveleft(){
    if (loadedyes){
    movestate="left"
    if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
    showhidediv("hidden")
    }
    else
    showhidediv("visible")
    }
    lefttime=setTimeout("moveleft()",10)
    }
    
    function moveright(){
    if (loadedyes){
    movestate="right"
    if (iedom&&parseInt(cross_scroll.style.left)<0){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
    showhidediv("hidden")
    }
    else
    showhidediv("visible")
    }
    righttime=setTimeout("moveright()",10)
    }
    
    function motionengine(e){
    var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
    var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
    var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
    curposy-=mainobjoffset-dsocx
    var leftbound=(menuwidth-restarea)/2
    var rightbound=(menuwidth+restarea)/2
    if (curposy>rightbound){
    scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed
    if (window.righttime) clearTimeout(righttime)
    if (movestate!="left") moveleft()
    }
    else if (curposy<leftbound){
    scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
    if (window.lefttime) clearTimeout(lefttime)
    if (movestate!="right") moveright()
    }
    else
    scrollspeed=0
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function stopmotion(e){
    if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
    if (window.lefttime) clearTimeout(lefttime)
    if (window.righttime) clearTimeout(righttime)
    movestate=""
    }
    }
    
    function fillup(){
    if (iedom){
    crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
    menuwidth=parseInt(crossmain.style.width)
    mainobjoffset=getposOffset(crossmain, "left")
    cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
    actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth
    
    crossmain.onmousemove=function(e){
    motionengine(e)
    }
    
    crossmain.onmouseout=function(e){
    stopmotion(e)
    showhidediv("hidden")
    }
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv()
    positiondiv()
    }
    }
    
    </script>
    
    <title>Scrolltest</title>
    
    
    
    </head>
    
    <body onload="fillup();LoadPopUps();">
    
    <div id="motioncontainer" style="position:absolute;width:900px;height:100px;overflow:hidden;top: 0%;">
    
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
    
    <nobr id="trueContainer">
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r1.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r2.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r3.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r4.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r5.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r6.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r7.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r8.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r9.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r10.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r11.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r12.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r13.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r14.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r15.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r16.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r17.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r18.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r19.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    
    </nobr>
    
    </div>
    </div>
    
    
    
    
    
    <div id="motioncontainer" style="position:absolute;width:900px;height:100px;overflow:hidden;bottom: 0%;">
    
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
    
    <nobr id="trueContainer">
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r1.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r2.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r3.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r4.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r5.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r6.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r7.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r8.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r9.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r10.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r11.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r12.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r13.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r14.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r15.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r16.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r17.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r18.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    <a href="#" onclick="PopUp('enlarged','images/ring/r19.jpg',
    'caption','Product Name<br/>Description');">
    <img name="" src="" width="80" height="80" alt="" style="background-color: #00CC99" /></a>
    
    
    </nobr>
    
    </div>
    </div>
    
    </body>
    
    </html>
    Thanks

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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