JavaScript Scroll

Instructions

First of all, copy/paste the following code into a file called xbMarquee.js

/*<br /> * xbMarquee.js<br /> * $Revision: 1.2 $ $Date: 2003/02/07 16:04:20 $<br /> */<br /> <br /> /* ***** BEGIN LICENSE BLOCK *****<br /> * Version: MPL 1.1/GPL 2.0/LGPL 2.1<br /> *<br /> * The contents of this file are subject to the Mozilla Public License Version<br /> * 1.1 (the "License"); you may not use this file except in compliance with<br /> * the License. You may obtain a copy of the License at<br /> * http://www.mozilla.org/MPL/<br /> *<br /> * Software distributed under the License is distributed on an "AS IS" basis,<br /> * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License<br /> * for the specific language governing rights and limitations under the<br /> * License.<br /> *<br /> * The Original Code is Netscape code.<br /> *<br /> * The Initial Developer of the Original Code is<br /> * Netscape Corporation.<br /> * Portions created by the Initial Developer are Copyright (C) 2002<br /> * the Initial Developer. All Rights Reserved.<br /> *<br /> * Contributor(s): Doron Rosenberg <doron@netscape.com><br /> * Bob Clary <bclary@netscape.com><br /> *<br /> * ***** END LICENSE BLOCK ***** */<br /> <br /> document.writeln('<style type="text/css">');<br /> document.writeln(' div.marqueecenter1 { text-align: center; }');<br /> document.writeln(' div.marqueecenter2 { margin-left: auto; margin-right: auto; }');<br /> document.writeln(' div.marqueeleft1 { text-align: left; }');<br /> document.writeln(' div.marqueeleft2 { margin-left: 0; margin-right: auto; }');<br /> document.writeln(' div.marqueeright1 { text-align: right; }');<br /> document.writeln(' div.marqueeright2 { margin-left: auto; margin-right: 0; }');<br /> document.writeln('</style>');<br /> <br /> function xbMarquee(id, height, width, scrollAmount, scrollDelay, direction, behavior, html)<br /> {<br /> this.id = id;<br /> this.scrollAmount = scrollAmount ? scrollAmount : 6;<br /> this.scrollDelay = scrollDelay ? scrollDelay : 85;<br /> this.direction = direction ? direction.toLowerCase() : 'left'; <br /> this.behavior = behavior ? behavior.toLowerCase() : 'scroll'; <br /> // this.name = 'xbMarquee_' + (++xbMarquee._name);<br /> this.name = id;<br /> this.runId = null;<br /> this.html = html;<br /> this.isHorizontal = ('up,down'.indexOf(this.direction) == -1);<br /> <br /> if (typeof(height) == 'number')<br /> {<br /> this.height = height;<br /> this.heightUnit = 'px';<br /> }<br /> else if (typeof(height) == 'string')<br /> {<br /> this.height = parseInt('0' + height, 10);<br /> this.heightUnit = height.toLowerCase().replace(/^[0-9]+/, '');<br /> }<br /> else<br /> {<br /> this.height = 100;<br /> this.heightUnit = 'px';<br /> }<br /> <br /> if (typeof(width) == 'number')<br /> {<br /> this.width = width;<br /> this.widthUnit = 'px';<br /> }<br /> else if (typeof(width) == 'string')<br /> {<br /> this.width = parseInt('0' + width, 10);<br /> this.widthUnit = width.toLowerCase().replace(/^[0-9]+/, '');<br /> }<br /> else<br /> {<br /> this.width = 100;<br /> this.widthUnit = 'px';<br /> }<br /> <br /> // xbMarquee UI events<br /> this.onmouseover = null;<br /> this.onmouseout = null;<br /> this.onclick = null;<br /> // xbMarquee state events<br /> this.onstart = null;<br /> this.onbounce = null;<br /> <br /> var markup = '';<br /> <br /> if (document.layers)<br /> {<br /> markup = '<ilayer id="' + this.id + 'container" name="' + this.id + 'container" ' +<br /> 'height="' + height + '" ' +<br /> 'width="' + width + '" ' +<br /> 'clip="' + width + ', ' + height + '" ' +<br /> '>' + <br /> '<\/ilayer>'; <br /> <br /> }<br /> else if (document.body && typeof(document.body.innerHTML) != 'string')<br /> {<br /> markup = '<div id="' + this.id + 'container" name="' + this.id + 'container" ' +<br /> 'style="position: relative; overflow: scroll; ' + <br /> 'height: ' + this.height + this.heightUnit + '; ' +<br /> 'width: ' + this.width + this.widthUnit + '; ' +<br /> 'clip: rect(0px, ' + this.width + this.widthUnit + ', ' + this.height + this.heightUnit + ', 0px); ' +<br /> '">' + <br /> '<div id="' + this.id + '" style="position:relative;' + <br /> (this.isHorizontal ? 'width:0px;' : '') + // if we scroll horizontally, make the text container as small as possible<br /> '">' +<br /> (this.isHorizontal ? '<nobr>' : '') +<br /> this.html +<br /> (this.isHorizontal ? '<\/nobr>' : '') +<br /> '<\/div>' +<br /> '<\/div>'; <br /> <br /> }<br /> else <br /> {<br /> markup = '<div id="' + this.id + 'container" name="' + <br /> this.id + 'container" ' +<br /> 'style="position: relative; overflow: hidden; overflowY: visible; ' + <br /> 'height: ' + this.height + this.heightUnit + '; ' +<br /> 'width: ' + this.width + this.widthUnit + '; ' +<br /> 'clip: rect(0px, ' + this.width + this.widthUnit + ', ' + this.height + this.heightUnit + ', 0px); ' +<br /> '">' + <br /> '<\/div>'; <br /> <br /> }<br /> document.write(markup); <br /> <br /> window[this.name] = this;<br /> <br /> }<br /> <br /> // Class Properties/Methods<br /> <br /> xbMarquee._name = -1;<br /> <br /> xbMarquee._getInnerSize = function(elm, propName)<br /> {<br /> var val = 0;<br /> <br /> if (document.layers)<br /> {<br /> // navigator 4<br /> val = elm.document[propName]; <br /> }<br /> else if (elm.style && typeof(elm.style[propName]) == 'number')<br /> {<br /> // opera<br /> // bug in Opera 6 width/offsetWidth. Use clientWidth<br /> if (propName == 'width' && typeof(elm.clientWidth) == 'number')<br /> val = elm.clientWidth;<br /> else<br /> val = elm.style[propName];<br /> }<br /> else<br /> {<br /> //mozilla and IE<br /> switch (propName)<br /> {<br /> case 'height':<br /> if (typeof(elm.offsetHeight) == 'number')<br /> val = elm.offsetHeight;<br /> break;<br /> case 'width':<br /> if (typeof(elm.offsetWidth) == 'number')<br /> {<br /> val = elm.offsetWidth; <br /> }<br /> break;<br /> }<br /> }<br /> <br /> return val;<br /> <br /> };<br /> <br /> xbMarquee.getElm = function(id)<br /> {<br /> var elm = null;<br /> if (document.getElementById)<br /> {<br /> elm = document.getElementById(id);<br /> }<br /> else<br /> {<br /> elm = document.all[id];<br /> }<br /> return elm;<br /> }<br /> <br /> xbMarquee.dispatchUIEvent = function (event, marqueeName, eventName)<br /> {<br /> var marquee = window[marqueeName];<br /> var eventAttr = 'on' + eventName;<br /> if (!marquee)<br /> {<br /> return false;<br /> }<br /> <br /> if (!event && window.event)<br /> {<br /> event = window.event;<br /> }<br /> <br /> switch (eventName)<br /> {<br /> case 'mouseover':<br /> case 'mouseout':<br /> case 'click':<br /> if (marquee[eventAttr])<br /> return marquee['on' + eventName](event);<br /> }<br /> <br /> return false;<br /> };<br /> <br /> xbMarquee.createDispatchEventAttr = function (marqueeName, eventName)<br /> {<br /> return 'on' + eventName + '="xbMarquee.dispatchUIEvent(event, \'' + marqueeName + '\', \'' + eventName + '\')" ';<br /> };<br /> <br /> // Instance properties/methods<br /> <br /> xbMarquee.prototype.start = function ()<br /> {<br /> var markup = '';<br /> <br /> this.stop();<br /> <br /> if (!this.dirsign)<br /> {<br /> if (!document.layers)<br /> {<br /> this.containerDiv = xbMarquee.getElm(this.id + 'container')<br /> <br /> if (typeof(this.containerDiv.innerHTML) != 'string')<br /> {<br /> return;<br /> }<br /> <br /> // adjust the container size before inner div is filled in<br /> // so IE will not hork the size of percentage units <br /> var parentNode = null;<br /> if (this.containerDiv.parentNode)<br /> parentNode = this.containerDiv.parentNode;<br /> else if (this.containerDiv.parentElement)<br /> parentNode = this.containerDiv.parentElement;<br /> <br /> if (parentNode && <br /> typeof(parentNode.offsetHeight) == 'number' && <br /> typeof(parentNode.offsetWidth) == 'number')<br /> {<br /> if (this.heightUnit == '%')<br /> {<br /> this.containerDiv.style.height = <br /> parentNode.offsetHeight * (this.height/100) + 'px';<br /> }<br /> <br /> if (this.widthUnit == '%')<br /> {<br /> this.containerDiv.style.width = <br /> parentNode.offsetWidth * (this.width/100) + 'px';<br /> }<br /> }<br /> <br /> markup += '<div id="' + this.id + '" name="' + this.id + '" ' +<br /> 'style="position:relative; visibility: hidden;' +<br /> //(this.isHorizontal ? 'width:0px;' : '') + // if we scroll horizontally, make the text container as small as possible<br /> '" ' +<br /> xbMarquee.createDispatchEventAttr(this.name, 'mouseover') +<br /> xbMarquee.createDispatchEventAttr(this.name, 'mouseout') +<br /> xbMarquee.createDispatchEventAttr(this.name, 'click') +<br /> '>' +<br /> (this.isHorizontal ? '<nobr>' : '') +<br /> this.html +<br /> (this.isHorizontal ? '<\/nobr>' : '') +<br /> '<\/div>';<br /> <br /> this.containerDiv.innerHTML = markup;<br /> this.div = xbMarquee.getElm(this.id);<br /> this.styleObj = this.div.style; <br /> <br /> }<br /> else /* if (document.layers) */<br /> {<br /> this.containerDiv = document.layers[this.id + 'container'];<br /> markup = <br /> '<layer id="' + this.id + '" name="' + this.id + '" top="0" left="0" ' +<br /> xbMarquee.createDispatchEventAttr(this.name, 'mouseover') +<br /> xbMarquee.createDispatchEventAttr(this.name, 'mouseout') +<br /> xbMarquee.createDispatchEventAttr(this.name, 'click') +<br /> '>' +<br /> (this.isHorizontal ? '<nobr>' : '') + <br /> this.html +<br /> (this.isHorizontal ? '<\/nobr>' : '') +<br /> '<\/layer>';<br /> <br /> this.containerDiv.document.write(markup);<br /> this.containerDiv.document.close();<br /> this.div = this.containerDiv.document.layers[this.id];<br /> this.styleObj = this.div;<br /> }<br /> <br /> if (this.isHorizontal && this.height < xbMarquee._getInnerSize(this.div, 'height') )<br /> {<br /> <br /> this.height = xbMarquee._getInnerSize(this.div, 'height')<br /> this.containerDiv.style.height = this.height + this.heightUnit;<br /> this.containerDiv.style.clip = 'rect(0px, ' + this.width + this.widthUnit + ', ' + this.height + this.heightUnit + ', 0px)';<br /> }<br /> <br /> <br /> // Start must not run until the page load event has fired<br /> // due to Internet Explorer not setting the height and width of <br /> // the dynamically written content until then<br /> switch (this.direction)<br /> {<br /> case 'down':<br /> this.dirsign = 1;<br /> this.startAt = -xbMarquee._getInnerSize(this.div, 'height');<br /> this._setTop(this.startAt);<br /> <br /> if (this.heightUnit == '%')<br /> this.stopAt = this.height * xbMarquee._getInnerSize(this.containerDiv, 'height') / 100;<br /> else<br /> this.stopAt = this.height;<br /> <br /> break;<br /> <br /> case 'up':<br /> this.dirsign = -1;<br /> <br /> if (this.heightUnit == '%')<br /> this.startAt = this.height * xbMarquee._getInnerSize(this.containerDiv, 'height') / 100;<br /> else <br /> this.startAt = this.height;<br /> <br /> this._setTop(this.startAt);<br /> this.stopAt = -xbMarquee._getInnerSize(this.div, 'height'); <br /> <br /> break;<br /> <br /> case 'right':<br /> this.dirsign = 1;<br /> this.startAt = -xbMarquee._getInnerSize(this.div, 'width');<br /> this._setLeft(this.startAt);<br /> <br /> if (this.widthUnit == '%')<br /> this.stopAt = this.width * xbMarquee._getInnerSize(this.containerDiv, 'width') / 100;<br /> else <br /> this.stopAt = this.width;<br /> <br /> break;<br /> <br /> case 'left':<br /> default:<br /> this.dirsign = -1;<br /> <br /> if (this.widthUnit == '%')<br /> this.startAt = this.width * xbMarquee._getInnerSize(this.containerDiv, 'width') / 100;<br /> else <br /> this.startAt = this.width <br /> <br /> this._setLeft(this.startAt);<br /> <br /> <br /> // this.stopAt = -xbMarquee._getInnerSize(this.div,'width')*2;<br /> <br /> // this method does not work very well with FireFox. offsetWidth property used in this function returns the absolute width of the div container<br /> // instead of the new offsetWidth when innerHTML is added or when the div becomes wider. To overcome this a new span element is added to <br /> // the document body to measure the new offsetwidth and then it is removed.<br /> <br /> var temp_span = document.createElement('span'); <br /> <br /> temp_span.id = 'span_' + this.div.id;<br /> temp_span.innerHTML = this.html;<br /> <br /> document.body.appendChild(temp_span); <br /> <br /> this.stopAt = - temp_span.firstChild.firstChild.offsetWidth; <br /> <br /> document.body.removeChild(temp_span); <br /> <br /> break;<br /> }<br /> this.newPosition = this.startAt;<br /> this.styleObj.visibility = 'visible'; <br /> }<br /> <br /> this.newPosition += this.dirsign * this.scrollAmount;<br /> <br /> if ( (this.dirsign == 1 && this.newPosition > this.stopAt) ||<br /> (this.dirsign == -1 && this.newPosition < this.stopAt) )<br /> {<br /> if (this.behavior == 'alternate')<br /> {<br /> if (this.onbounce)<br /> {<br /> // fire bounce when alternate changes directions<br /> this.onbounce();<br /> }<br /> this.dirsign = -this.dirsign;<br /> var temp = this.stopAt;<br /> this.stopAt = this.startAt;<br /> this.startAt = temp;<br /> }<br /> else<br /> {<br /> // fire start when position is a start<br /> if (this.onstart)<br /> {<br /> this.onstart();<br /> }<br /> this.newPosition = this.startAt;<br /> }<br /> }<br /> <br /> switch(this.direction)<br /> {<br /> case 'up': <br /> case 'down':<br /> this._setTop(this.newPosition);<br /> break;<br /> <br /> case 'left': <br /> case 'right':<br /> default:<br /> this._setLeft(this.newPosition);<br /> <br /> break;<br /> }<br /> this.runId = setTimeout(this.name + '.start()', this.scrollDelay);<br /> };<br /> <br /> xbMarquee.prototype.stop = function ()<br /> {<br /> if (this.runId)<br /> clearTimeout(this.runId);<br /> <br /> this.runId = null;<br /> };<br /> <br /> xbMarquee.prototype.setInnerHTML = function (html)<br /> {<br /> if (typeof(this.div.innerHTML) != 'string')<br /> {<br /> return;<br /> }<br /> <br /> var running = false;<br /> if (this.runId)<br /> {<br /> running = true;<br /> this.stop();<br /> }<br /> this.html = html;<br /> this.dirsign = null;<br /> if (running)<br /> {<br /> this.start();<br /> }<br /> };<br /> <br /> // fixes standards mode in gecko<br /> // since units are required<br /> <br /> if (document.layers)<br /> {<br /> xbMarquee.prototype._setLeft = function (left)<br /> {<br /> this.styleObj.left = left; <br /> };<br /> <br /> xbMarquee.prototype._setTop = function (top)<br /> {<br /> this.styleObj.top = top; <br /> };<br /> }<br /> else<br /> {<br /> xbMarquee.prototype._setLeft = function (left)<br /> {<br /> this.styleObj.left = left + 'px'; <br /> };<br /> <br /> xbMarquee.prototype._setTop = function (top)<br /> {<br /> this.styleObj.top = top + 'px'; <br /> };<br /> }<br />
Once you've done that, you can use any of the following codes to display your JavaScript scroller. These codes simply provide the parameters for the xbMarquee.js file. These parameters determine things such as the scroll direction, the text to scroll, the speed of the marquee etc. You only need to reference xbMarquee.js once on any page that uses the code (regardless of how many marquees are on that page).

Right to Left

This marquee scrolls from right to left.

Example:

JavaScript scrolling text

Code:

<!-- <br /> Note: Make sure you place the xbMarquee.js file into the same directory that you run your code from. If you do place it into a different directory, make sure you update src="xbMarquee.js" to reflect the new location. Also, you only need to download xbMarquee.js once (regardless of how many scrolling marquees you have on your page).<br /> And thanks for visiting Quackit.com!<br /> --><br /> <script type="text/javascript" src="xbMarquee.js"></script><br /> <script type="text/javascript"><br /> <!--<br /> //set the marquee parameters<br /> function init() { rtl_marquee.start(); }<br /> var rtl_marquee_Text = 'JavaScript scrolling text';<br /> var rtl_marquee_Direction = 'left';<br /> var rtl_marquee_Contents='<span style="font-family:Comic Sans MS;font-size:12pt;white-space:nowrap;">' + rtl_marquee_Text + '</span>';<br /> rtl_marquee = new xbMarquee('rtl_marquee', '19px', '400px', 6, 100, rtl_marquee_Direction, 'scroll', rtl_marquee_Contents);<br /> window.setTimeout( init, 200);<br /> --><br /> </script><br />

Left to Right

This text scrolls from left to right.
Example:

JavaScript scrolling text

Code:
<!-- <br /> Note: Make sure you place the xbMarquee.js file into the same directory that you run your code from. If you do place it into a different directory, make sure you update src="xbMarquee.js" to reflect the new location. Also, you only need to download xbMarquee.js once (regardless of how many scrolling marquees you have on your page).<br /> And thanks for visiting Quackit.com!<br /> --><br /> <script type="text/javascript" src="xbMarquee.js"></script><br /> <script type="text/javascript"><br /> <!--<br /> //set the marquee parameters<br /> function init() { ltr_marquee.start(); }<br /> var ltr_marquee_Text = 'JavaScript scrolling text';<br /> var ltr_marquee_Direction = 'right';<br /> var ltr_marquee_Contents='<span style="font-family:Comic Sans MS;font-size:12pt;white-space:nowrap;">' + ltr_marquee_Text + '</span>';<br /> ltr_marquee = new xbMarquee('ltr_marquee', '19px', '400px', 6, 100, ltr_marquee_Direction, 'scroll', ltr_marquee_Contents);<br /> window.setTimeout( init, 200);<br /> --><br /> </script><br />

Faster

This text scrolls from right to left, but much faster than the previous examples.
Example:

JavaScript scrolling text

Code:
<!-- <br /> Note: Make sure you place the xbMarquee.js file into the same directory that you run your code from. If you do place it into a different directory, make sure you update src="xbMarquee.js" to reflect the new location. Also, you only need to download xbMarquee.js once (regardless of how many scrolling marquees you have on your page).<br /> And thanks for visiting Quackit.com!<br /> --><br /> <script type="text/javascript" src="xbMarquee.js"></script><br /> <script type="text/javascript"><br /> <!--<br /> //set the marquee parameters<br /> function init() { fast_marquee.start(); }<br /> var fast_marquee_Text = 'JavaScript scrolling text';<br /> var fast_marquee_Direction = 'right';<br /> var fast_marquee_Contents='<span style="font-family:Comic Sans MS;font-size:12pt;white-space:nowrap;">' + fast_marquee_Text + '</span>';<br /> fast_marquee = new xbMarquee('fast_marquee', '19px', '400px', 6, 10, fast_marquee_Direction, 'scroll', fast_marquee_Contents);<br /> window.setTimeout( init, 200);<br /> --><br /> </script><br />

Scrolling Up

This text scrolls upwards. The height of the marquee has changed too - from 19px to 100px.
Example:

JavaScript scrolling text

Code:
<!-- <br /> Note: Make sure you place the xbMarquee.js file into the same directory that you run your code from. If you do place it into a different directory, make sure you update src="xbMarquee.js" to reflect the new location. Also, you only need to download xbMarquee.js once (regardless of how many scrolling marquees you have on your page).<br /> And thanks for visiting Quackit.com!<br /> --><br /> <script type="text/javascript" src="xbMarquee.js"></script><br /> <script type="text/javascript"><br /> <!--<br /> //set the marquee parameters<br /> function init() { up_marquee.start(); }<br /> var up_marquee_Text = 'JavaScript scrolling text';<br /> var up_marquee_Direction = 'up';<br /> var up_marquee_Contents='<span style="font-family:Comic Sans MS;font-size:12pt;white-space:nowrap;">' + up_marquee_Text + '</span>';<br /> up_marquee = new xbMarquee('up_marquee', '100px', '400px', 6, 100, up_marquee_Direction, 'scroll', up_marquee_Contents);<br /> window.setTimeout( init, 200);<br /> --><br /> </script><br />

Scrolling Down

This text scrolls downwards.
Example:

JavaScript scrolling text