New on DHTMLGoodies.com:

DHTML Chess is now available for WordPress at WordPressChess.com.

Download Fixed marquee script

Put this into your <HEAD> section

	<style type="text/css">
	html{
		height:100%;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	body{
		margin:0px;
		padding:0px;
		text-align:center;
		height:100%;
	}
	#mainContainer{
		width:760px;
		border-left:1px solid #000;
		border-right:1px solid #000;
		margin:0 auto;
		height:100%;
		text-align:left;
	}
	#topRow{

	}
	#mainContent{
		padding-left:10px;
		padding-right:10px;
	}

	#dhtmlgoodies_marquee{
		/* general marquee layout*/
		padding-top:3px;
		height:25px;
		background-color: #000;


		/* End general marquee layout */


		position:absolute;
		left:0px;
		z-index:1000;
		bottom:0px;
		display:none;
		width:100%;
		overflow:hidden;
	}
	body > div#dhtmlgoodies_marquee{	/* Firefox rule */
		position:fixed;
	}
	#dhtmlgoodies_marquee .textObj{	/* Layout for the marquee text */
		position:absolute;
		color: #FFF;
		font-weight:bold;
		white-space:nowrap;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	/* Just some layout classes used in this example script */
	.highlighted{
		color:#F00;	// Red color
	}
	.greenText{
		color:#0F0;	// Green color
	}
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005

	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.

	Thank you!

	www.dhtmlgoodies.com
	Alf Magne Kalleland

	************************************************************************************************************/
	var dhtmlgoodies_marqueeSteps = 2;	// Higher = Faster, Lower = slower and more smoothly
	var dhtmlgoodies_marqueeSpeed = 8;	// Lower value = Faster
	var dhtmlgoodies_marqueeStopOnMouseOver = false;	// Make the marquee stop moving when user moves his mouse over it
	var dhtmlgoodies_marqueePosition = 'bottom';	// "top" or "bottom"

	/* Don't change anything below here */
	var dhtmlgoodies_marqueeObj;
	var dhtmlgoodies_marqueeTextObj;
	var dhtmlgoodies_marqueeTmpStep;
	var dhtmlgoodies_marqueeTextObjects = new Array();
	var dhtmlgoodies_marqueeHiddenSpans = new Array();

	var dhtmlgoodies_marqueeIndex = 0;
	function repositionMarquee(e,timeout)
	{
		if(document.all)e=event;
		if(dhtmlgoodies_marqueePosition.toLowerCase()=='top'){
			dhtmlgoodies_marqueeObj.style.top = '0px';
		}else{
			dhtmlgoodies_marqueeObj.style.bottom = '-1px';
		}
		if(document.all && !timeout)setTimeout('repositionMarquee(false,true)',500)
	}
	function marqueeMove()
	{
		var leftPos = dhtmlgoodies_marqueeTextObj.offsetLeft;
		leftPos = leftPos - dhtmlgoodies_marqueeTmpStep;
		var rightEdge = leftPos + dhtmlgoodies_marqueeHiddenSpans[dhtmlgoodies_marqueeIndex].offsetLeft;
		if(rightEdge<0){
			leftPos = document.documentElement.offsetWidth;
			dhtmlgoodies_marqueeTextObj.style.display='none';
			dhtmlgoodies_marqueeIndex++;
			if(dhtmlgoodies_marqueeIndex>=dhtmlgoodies_marqueeTextObjects.length)dhtmlgoodies_marqueeIndex = 0;
			dhtmlgoodies_marqueeTextObj = dhtmlgoodies_marqueeTextObjects[dhtmlgoodies_marqueeIndex];
			dhtmlgoodies_marqueeTextObj.style.display='block';

		}
		dhtmlgoodies_marqueeTextObj.style.left = leftPos + 'px';

	}

	function stopMarqueeMove()
	{
		if(dhtmlgoodies_marqueeStopOnMouseOver)dhtmlgoodies_marqueeTmpStep = 0;
	}
	function resumeMarqueeMove()
	{
		dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps;
	}
	function initMarquee()
	{
		dhtmlgoodies_marqueeObj = document.getElementById('dhtmlgoodies_marquee');

		var spans = dhtmlgoodies_marqueeObj.getElementsByTagName('DIV');
		for(var no=0;no<spans.length;no++){
			if(spans[no].className=='textObj'){
				if(!dhtmlgoodies_marqueeTextObj){
					dhtmlgoodies_marqueeTextObj = spans[no];
					spans[no].style.display='block';
				}else spans[no].style.display='none';
				dhtmlgoodies_marqueeTextObjects.push(spans[no]);
				var hiddenSpan = document.createElement('SPAN');
				hiddenSpan.innerHTML = ' '
				spans[no].appendChild(hiddenSpan);
				dhtmlgoodies_marqueeHiddenSpans.push(hiddenSpan);

			}
		}

		var oldIE = isOldIe();

		if(dhtmlgoodies_marqueePosition.toLowerCase()=='top'){
			dhtmlgoodies_marqueeObj.style.top = '0px';
		}else{
			if(oldIE){
				dhtmlgoodies_marqueeObj.style.bottom = '0px';
			}else{
				dhtmlgoodies_marqueeObj.style.bottom = '-1px';
			}
		}




		dhtmlgoodies_marqueeObj.style.display='block';
		dhtmlgoodies_marqueeTextObj.style.left = document.documentElement.offsetWidth + 'px';
		dhtmlgoodies_marqueeObj.onmouseover = stopMarqueeMove;
		dhtmlgoodies_marqueeObj.onmouseout = resumeMarqueeMove;
		if(oldIE)window.onscroll = repositionMarquee; else dhtmlgoodies_marqueeObj.style.position = 'fixed';

		dhtmlgoodies_marqueeObj.style.display='block';
		dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps;

		setInterval('marqueeMove()',dhtmlgoodies_marqueeSpeed);
	}

	function isOldIe() {
		var isMsie = navigator.userAgent.indexOf('MSIE') >=0;
		if(isMsie) {
			string = '';
			for(var prop in navigator) {
				string = string + prop + ':' + navigator[prop] + '\n';

			}
			var version = navigator.userAgent;
			for(var i=4;i<=7;i++) {
				if(version.indexOf('MSIE ' + i) >=0){
					return true;
				}
			}
			return false;
		}else{
			return false;
		}

	}

	</script>

Put this into your <BODY> section

<!-- Start of marquee HTML code -->
<div id="dhtmlgoodies_marquee">
	<div class="textObj"><span class="highlighted">Breaking news!</span> This is the content of my marquee. </div>
	<div class="textObj"><span class="highlighted">STOCK NEWS:</span> Company 1 <span class="greenText">82.5</span>(+0.5), Company 2 <span class="greenText">42.9</span>(-2.4), Company 3 <span class="greenText">189.9</span>(-13.7)</div>
	<div class="textObj"><span class="highlighted">Sport:</span> The soccer season is almost over in Norway now. We have a few thrilling matches ahead of us.</div>
	<div class="textObj"><span class="highlighted">Other news:</span> The quick brown fox jumps over a lazy dog.</div>
</div>
<!-- END OF MARQUEE HTML CODE -->
<script type="text/javascript">
initMarquee();	// Initialize marquee script
</script>

Configuration

You use plain HTML when you define the content of the marquee.
<div id="dhtmlgoodies_marquee"> is used to define the marquee object, and you use one inner div for each of your news messages. Example:
<div class="textObj">
<span class="highlighted">Breaking news!</span>
This is the content of my marquee.
</div>

CSS in the <HEAD> section is used for the layout of the marquee. Look at the comments there for more information.

You could choose between showing the marquee at the top or at the bottom of your window. This is defined in a javascript variable:
var dhtmlgoodies_marqueePosition = 'bottom'; // "top" or "bottom"

The speed is also something you could change. Two variables are used for this:
var dhtmlgoodies_marqueeSteps = 2; // Higher = Faster, Lower = slower and more smoothly
var dhtmlgoodies_marqueeSpeed = 8; // Lower value = Faster

Comments

I want to add a picture to the left of the scroll and change the textplease help methanks

miguel perez at 02:43AM, 2011/05/16.

nice tutorial, greats :D

andi at 12:30PM, 2011/05/22.

when i put var dhtmlgoodies_marqueePosition = 'top'; // "top" or "bottom" it doesnt work in my IE 8, why?

cookiegal at 02:36AM, 2011/09/02.

nice!!!!!!!!!!
:)

asad at 05:43AM, 2011/10/06.

Thanks so much for this ... i really appreciate it. God bless and more grace

Oladokun Stephen at 12:02AM, 2011/11/23.

Yea I have problem with ie8 any hints?

clark at 04:06PM, 2011/12/12.

Is there a way to set a background image? I set up a a tag in my site.css of #mycrawler { background-image: url(../Images/red-background.png); background-repeat: no-repeat;}and it shows up in preview mode (dreamwweaver) but when I go live it disappears and the background color shows through.

Bradley Corner at 02:01PM, 2012/03/20.

Hello...Great script btw. Changed highlight colors & text...works like a charm, BUT it shifted my entire front page content to align:left. How can I align my page back to center without removing script? Please help asap! Thx

Tirah at 08:29PM, 2012/04/20.

Great tutorial. Thank YOU guys;D

banana at 10:34AM, 2012/05/09.

how I change text right to left

abrahim at 04:02PM, 2012/12/30.

how I change text moving from left to right

JWHAR at 10:17AM, 2013/07/01.

nice...Thank you

salar at 03:38PM, 2013/07/31.

Hello how to i change it so the next "breaking news" comes before the other has disappeared. So there is just a little bit of space between them?

Thor SÃ¸lyst Farup at 10:57AM, 2014/09/17.

Hi,how can i display a marquee tag like a block.means news display in channels in abox..........

santosh at 06:31AM, 2014/12/15.

Great http://vintageitsolutions.com

Jagmeet Lal at 10:39AM, 2018/08/09.

You should also make sure you carefully look at the profiles of your possible associates. Should you don't like their pictures, you may not would like to begin a romantic relationship <a href="https://bedpage.app/gfe-nj">nj gfe</a> along with them. This could seem clear, but it only making you seem untrustworthy. It is then tougher to get good quality guys to start out a chat along with you. Listed pictures can help you talk your requirements and avoid refusal. In a nutshell, make sure to look at the user profiles you're thinking about and maintain them up to date.

Ronaldlog at 03:02AM, 2022/11/02.