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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with Cross Browser Marquee II code

    Hello, I'm new here so I hope I'm posting this in the correct place.

    I am needing help with a code I found here: http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

    I've already found a thread here on how to remove the space in between, so now I'm just wondering how/if I can get it to move up and down? The same as what the behavior="alternate" code would do, except I have no idea how to do that in javascript. Here's the code so far:

    Code:
    <link rel="stylesheet"type="text/css"href="http://rosybub.webs.com/coding.css">
    
    <html>
    <body oncontextmenu="return false;"></body>
    </html>
    
    <script language=JavaScript><!--
    var message="";
    ///////////////////////////////////
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if 
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers) 
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    
    document.oncontextmenu=new Function("return false")
    // --> </script>
    
    <H6>Gallery</H6>
    <H4>Art I own.<3</H4>
    
    <style type="text/css">
    
    #marqueecontainer{
    position: relative;
    width: 338px;
    height: 395px;
    background-color: transparent;
    overflow: hidden;
    border: 0px 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=0 //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(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
    else
    cross_marquee.style.top=parseInt(marqueeheight)+8+"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>
    
    <div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <center>Hello, hello, hello.</center>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    Thanks in advance for any help.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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>
    <link rel="stylesheet"type="text/css"href="http://rosybub.webs.com/coding.css">
    </head>
    
    <body>
    <script language=JavaScript><!--
    var message="";
    ///////////////////////////////////
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS; }
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    
    document.oncontextmenu=new Function("return false")
    // --> </script>
    
    <H6>Gallery</H6>
    <H4>Art I own.<3</H4>
    
    <style type="text/css">
    
    #marqueecontainer{
    position: relative;
    width: 338px;
    height: 395px;
    background-color: transparent;
    overflow: hidden;
    border: 1px 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=0 //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(spd){
     clearTimeout(scrollmarquee.to);
     var spd=typeof(spd)=='number'?spd:marqueespeed,top=parseInt(cross_marquee.style.top)-spd;
     if ((spd>0&&top<-actualheight)||(spd<0&&top>marqueeheight)){
      top=spd>0?marqueeheight:-actualheight;
     }
     cross_marquee.style.top=top+"px";
     scrollmarquee.to=setTimeout(function(){ scrollmarquee(spd); },30);
    }
    
    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(function(){ scrollmarquee(); }, 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>
    <input type="button" name="" value="Up" onmouseup="scrollmarquee(1);"/>
    <input type="button" name="" value="Down" onmouseup="scrollmarquee(-1);"/>
    <div id="marqueecontainer" onMouseover="scrollmarquee(0);" onMouseout="scrollmarquee(-1);">
    <div id="vmarquee" style="position: absolute; width: 98%;top:401px;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <center>Hello, hello, hello.</center>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    
    
    </body>
    
    </html>
    or

    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">
    
    .marquee{
    position: relative;
    width: 338px;
    height: 205px;
    background-color: transparent;
    overflow: hidden;
    border: 1px solid orange;
    padding: 0px;
    padding-left: 10px;
    text-Align:left;
    }
    
    </style>
    
    <script type="text/javascript">
    
    function scrollmarquee(id,spd,c){
     var o=scrollmarquee['zxc'+id],m=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
     if (m&&!o){
      var s=m.getElementsByTagName('DIV')[0],nu,z0=1;
      s.style.position='absolute';
      s.style.top=s.offsetTop+'px';
      o=scrollmarquee['zxc'+id]={
       s:s,
       sh:s.offsetHeight,
       max:m.offsetHeight,
       c:c===true
      };
      if (o.c){
       c=s.cloneNode(true);
       for (;z0<Math.ceil(o.max/o.sh)+1;z0++){
        c=c.cloneNode(true);
        c.style.left='0px';
        c.style.top=z0*o.sh+'px';
        o.s.appendChild(c);
        if (z0>40){
         return;
        }
       }
       s.style.top='0px';
       o.max=0
      }
     }
     if (m&&o){
      clearTimeout(o.to);
      var spd=typeof(spd)=='number'?spd:0,top=parseInt(o.s.style.top)-spd;
      if ((spd>0&&top<-o.sh)||(spd<0&&top>o.max)){
       top=o.c?spd>0?0:-o.sh:spd<0?-o.sh:o.max;
      }
      o.s.style.top=top+'px';
      o.to=setTimeout(function(){ scrollmarquee(id,spd); },30);
     }
    }
    
    </script>
    </head>
    
    <body>
     <input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee1',1);"/>
     <input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee1',-1);"/>
    
     <div id="marquee1" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
      <div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
    <!--YOUR SCROLL CONTENT HERE-->
       Hello, hello, hello.
    <!--YOUR SCROLL CONTENT HERE-->
      </div>
     </div>
     <input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee2',1);"/>
     <input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee2',-1);"/>
    
     <div id="marquee2" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
      <div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
    <!--YOUR SCROLL CONTENT HERE-->
       Hello, hello, hello.
    <!--YOUR SCROLL CONTENT HERE-->
      </div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    scrollmarquee('marquee1',1,true);
    scrollmarquee('marquee2',-1);
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 11-02-2012 at 03:45 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/

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your response vwphillips!

    I was hoping for something without buttons though, so when it automatically reaches the bottom, it starts going back up, and vice versa. I hope that makes sense, I probably should have added that to my first post.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    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>
    <link rel="stylesheet"type="text/css"href="http://rosybub.webs.com/coding.css">
    </head>
    
    <body>
    <script language=JavaScript><!--
    var message="";
    ///////////////////////////////////
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS; }
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    
    document.oncontextmenu=new Function("return false")
    // --> </script>
    
    <H6>Gallery</H6>
    <H4>Art I own.<3</H4>
    
    <style type="text/css">
    
    #marqueecontainer{
    position: relative;
    width: 338px;
    height: 395px;
    background-color: transparent;
    overflow: hidden;
    border: 1px 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=0 //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(spd){
     clearTimeout(scrollmarquee.to);
     var spd=typeof(spd)=='number'?spd:marqueespeed,top=parseInt(cross_marquee.style.top)-spd;
     if ((spd>0&&top<-actualheight)||(spd<0&&top>marqueeheight)){
    //  top=spd>0?marqueeheight:-actualheight;
      spd*=-1;
     }
     cross_marquee.style.top=top+"px";
     scrollmarquee.to=setTimeout(function(){ scrollmarquee(spd); },30);
    }
    
    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(function(){ scrollmarquee(); }, 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>
    <input type="button" name="" value="Up" onmouseup="scrollmarquee(1);"/>
    <input type="button" name="" value="Down" onmouseup="scrollmarquee(-1);"/>
    <div id="marqueecontainer" onMouseover="scrollmarquee(0);" onMouseout="scrollmarquee(-1);">
    <div id="vmarquee" style="position: absolute; width: 98%;top:401px;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <center>Hello, hello, hello.</center>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    
    
    </body>
    
    </html>
    
    Read more at http://www.codingforums.com/showthread.php?t=280484#bfUVHSfFdYmBKSvV.99
    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">
    
    .marquee{
    position: relative;
    width: 338px;
    height: 205px;
    background-color: transparent;
    overflow: hidden;
    border: 1px solid orange;
    padding: 0px;
    padding-left: 10px;
    text-Align:left;
    }
    
    </style>
    
    <script type="text/javascript">
    
    function scrollmarquee(id,spd,c){
     var o=scrollmarquee['zxc'+id],m=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
     if (m&&!o){
      var s=m.getElementsByTagName('DIV')[0],nu,z0=1;
      s.style.position='absolute';
      s.style.top=s.offsetTop+'px';
      o=scrollmarquee['zxc'+id]={
       s:s,
       sh:s.offsetHeight,
       max:m.offsetHeight,
       c:c===true
      };
      if (o.c){
       c=s.cloneNode(true);
       for (;z0<Math.ceil(o.max/o.sh)+1;z0++){
        c=c.cloneNode(true);
        c.style.left='0px';
        c.style.top=z0*o.sh+'px';
        o.s.appendChild(c);
        if (z0>40){
         return;
        }
       }
       s.style.top='0px';
       o.max=0
      }
     }
     if (m&&o){
      clearTimeout(o.to);
      var spd=typeof(spd)=='number'?spd:0,top=parseInt(o.s.style.top)-spd;
      if ((spd>0&&top<-o.sh)||(spd<0&&top>o.max)){
    // top=o.c?spd>0?0:-o.sh:spd<0?-o.sh:o.max;
       spd*=-1;
      }
      o.s.style.top=top+'px';
      o.to=setTimeout(function(){ scrollmarquee(id,spd); },30);
     }
    }
    
    </script>
    </head>
    
    <body>
     <input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee1',1);"/>
     <input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee1',-1);"/>
    
     <div id="marquee1" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
      <div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
    <!--YOUR SCROLL CONTENT HERE-->
       Hello, hello, hello.
    <!--YOUR SCROLL CONTENT HERE-->
      </div>
     </div>
     <input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee2',1);"/>
     <input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee2',-1);"/>
    
     <div id="marquee2" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
      <div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
    <!--YOUR SCROLL CONTENT HERE-->
       Hello, hello, hello.
    <!--YOUR SCROLL CONTENT HERE-->
      </div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    scrollmarquee('marquee1',1,true);
    scrollmarquee('marquee2',-1);
    /*]]>*/
    </script>
    </body>
    
    </html>
    
    Read more at http://www.codingforums.com/showthread.php?t=280484#bfUVHSfFdYmBKSvV.99
    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/

  • Users who have thanked vwphillips for this post:

    pixelkitten (11-03-2012)

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh thank you so much, that's what I was looking for!

    Works perfectly!
    Last edited by pixelkitten; 11-03-2012 at 08:51 PM.

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh sorry for double posting, but I actually just noticed a couple of things, I'm using the first code in your second post, and I'm wondering if they can be changed.

    The first thing is that when it firsts starts scrolling, their's no gap before they start scrolling, if that makes sense. I'm wondering if the coding can be changed so they can come from the bottom up.
    And secondly, when I hover my mouse over after it's changed directions, when I move my mouse back off it causes it too start going upwards again instead of continuing in the same direction.

    If you could help me with these two things I would greatly appreciate it, I hope I'm not being too much of a hassle.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anybody? D:


  •  

    Posting Permissions

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