Dynamic Drive DHTML Scripts- Cross Browser marquee II

New Revised CSS Library Forums Web Tools

Cross Browser marquee II

Author: Dynamic Drive

Note: Script completely rewritten Oct 31st 05'.

Description: This is version 2 of the cross browser marquee that scrolls the contents upwards (instead of sideways). It's also different in that the content to scroll is not stored inside JavaScript variables, but as plain HTML wrapped around a special DIV. This makes specifying long and complex HTML a breeze.

In Netscape 7 and Opera, there is an issue with long hidden content pushing the rest of the page down. To overcome this, the script will display manual scrollbars in these two browsers for the user to manually scroll the contents, instead of dynamically.

Demo:

Iframe & Ajax category added
The Dynamic Content category has just been branched out with a new sub category to better organize its scripts.

Gradient Image Maker
We're excited to introduce our latest web tool- Gradient Image Maker!

DD Help Forum
Check out our new forums for help on our scripts and coding in general.

Terms of Usage update
Please review our updated usage terms regarding putting our scripts in an external .js file.

Directions

Step 1: Insert the below code in the <head> section of your page:

Select All
<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(){ 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>

The CSS at the top controls the basic look of the marquee. Also refer to the variables inside script for additional config options.

Step 2: Then add the below HTML to the <body> where you want the marquee to appear:

whereby you would simply insert the HTML contents to scroll in between the comments.