Results 1 to 2 of 2

Thread: Cross Browser marquee II - reverse direction

  1. #1
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cross Browser marquee II - reverse direction

    1) Script Title: Cross Browser marquee II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

    3) Describe problem: This is an excellent tool. But, how do I make it reverse direction? i.e. fall instead of rise?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    #marqueecontainer{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    background-color: white;
    overflow: hidden;
    border: 3px solid orange;
    padding: 2px;
    padding-left: 4px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=-2 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''
    
    function scrollmarquee(){
     var top=parseInt(cross_marquee.style.top);
     if ((copyspeed>0&&top>(actualheight*(-1)+8))||(copyspeed<0&&top<marqueeheight)){
      cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
     }
     else {
      cross_marquee.style.top=(copyspeed>0?parseInt(marqueeheight)+8:-actualheight)+"px"
     }
    }
    
    function initializemarquee(){
    cross_marquee=document.getElementById("vmarquee")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("marqueecontainer").offsetHeight
    actualheight=cross_marquee.offsetHeight
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    cross_marquee.style.overflow="scroll"
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    
    
    </script></head>
    
    <body>
    
    <input type="button" name="" value="Scroll Up" onmouseup="marqueespeed=2;copyspeed=2"/>
    <input type="button" name="" value="Scroll Down" onmouseup="marqueespeed=-2;copyspeed=-2"/>
    <div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <h4><p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
    Ajax category added</a></b><br>
    The Dynamic Content category has just been branched out with a new
    <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
    to better organize its scripts.</p>
    <p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
    We're excited to introduce our latest web tool- Gradient Image Maker!</p>
    
    <p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
    Check out our new forums for help on our scripts and coding in general.</p>
    <p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
    Usage update</a></b><br>
    Please review our updated usage terms regarding putting our scripts in an
    external .js file. </p>
    </h4>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    
    </body>
    
    </html>
    Last edited by vwphillips; 02-07-2011 at 04:43 PM.
    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/

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
  •