News Ticker Headlines Keep Rolling

zymurgy · #1 (**permalink**) May 19th, 2006, 14:03

Hello!!

For ages I wanted to know how to cobble together a news ticker -
Now Ive done it Ive no idea how to make the scrolling text pause when my mouse pointer hovers over the headlines.

Any ideas appreciated...

Actual ticker URL below:
http://www.york.ac.uk/univ/conf/admi...ws_ticker.html
Java Script
addLoadListener(initNewsTicker);
function initNewsTicker()
{
var newsScroller = document.getElementById("newsScroller");
var moStop=true;
newsScroller.style.left = 0;
if (retrieveComputedStyle(newsScroller, "position") == "relative")
{
var relativeWidth = newsScroller.offsetWidth;
newsScroller.style.position = "absolute";
newsScroller.calculatedWidth = newsScroller.offsetWidth;
if (relativeWidth > newsScroller.calculatedWidth)
{
newsScroller.calculatedWidth = relativeWidth;
}
newsScroller.style.position = "relative";
}
else
{
newsScroller.calculatedWidth = newsScroller.clientWidth;
}
var stopLink = document.createElement("a");
stopLink.setAttribute("id", "");
stopLink.id = "stopLink";
stopLink.setAttribute("href", "");
stopLink.href = "#";
stopLink.appendChild(document.createTextNode("Stop/start news ticker"));
attachEventListener(stopLink, "click", clickStopLink, false);
var stopButton = document.createElement("div");
stopButton.appendChild(stopLink);
var newsTicker = document.getElementById("newsTicker");
if (newsTicker.nextSibling != null)
{
newsTicker.parentNode.insertBefore(stopButton, newsTicker.nextSibling);
}
else
{
newsTicker.parentNode.appendChild(stopButton);
}
moveNewsScroller();
return true;
}
function moveNewsScroller()
{
var increment = 3;
var newsScroller = document.getElementById("newsScroller");
var currLeft = parseInt(newsScroller.style.left);

if (currLeft < newsScroller.calculatedWidth * -1)
{
newsScroller.style.left = newsScroller.parentNode.offsetWidth + "px";
}
else
{
newsScroller.style.left = (parseInt(newsScroller.style.left) - increment) + "px";
}
newsScroller.timeout = setTimeout("moveNewsScroller()", 50);
return true;
}
function clickStopLink()
{
var stopLink = document.getElementById("stopLink");
if (typeof stopLink.stopped != "undefined" && stopLink.stopped)
{
moveNewsScroller();
stopLink.stopped = false;
}
else
{
clearTimeout(document.getElementById("newsScroller ").timeout);
stopLink.stopped = true;
}
return true;
}

function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
function attachEventListener(target, eventType, functionRef, capture)
{
if (typeof target.addEventListener != "undefined")
{
target.addEventListener(eventType, functionRef, capture);
}
else if (typeof target.attachEvent != "undefined")
{
target.attachEvent("on" + eventType, functionRef);
}
else
{
eventType = "on" + eventType;
if (typeof target[eventType] == "function")
{
var oldListener = target[eventType];
target[eventType] = function()
{
oldListener();
return functionRef();
}
}
else
{
target[eventType] = functionRef;
}
}
return true;
}
function retrieveComputedStyle(element, styleProperty)
{
var computedStyle = null;
if (typeof element.currentStyle != "undefined")
{
computedStyle = element.currentStyle;
}
else
{
computedStyle = document.defaultView.getComputedStyle(element, null);
}
return computedStyle[styleProperty];
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The JavaScript Anthology: How do I make a scrolling news ticker?</title>
<script type="text/javascript" src="scrolling_news_ticker.js"></script>
<link rel="stylesheet" type="text/css" href="scrolling_news_ticker.css" />
</head>
<body>
<h1>
How do I make a scrolling news ticker?
</h1>

<div id="newsTicker">
<div id="newsScroller"> <strong>Breaking news:</strong> Liverpool defeats AC
Milan in a penalty shootout after a shock comeback from 3-0 down in the second
half of the Champions' League final. Hayley Clocks off early again<a href="#">test</a></div>
</div>
</body>
</html>
CSS
#newsTicker
{
position: relative;
background-color:red;
width: 300px;
height: 35px;
overflow: hidden;
text-color: black;

background-repeat: no-repeat;
}
#newsScroller
{
position: absolute;
position/**/: relative;
height: 35px;
line-height: 35px;
white-space: nowrap;
color: black;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
}
#stopLink
{
position: absolute;
width: 35px;
height: 35px;
margin-left: 305px;
margin-top: -35px;
background-image: url(http://www.york.ac.uk/univ/conf/admi...ker_button.jpg);
background-repeat: no-repeat;
text-indent: -9999px;
text-decoration: none;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Clickable News Ticker?	sing2trees	JavaScript Forum	2	Mar 19th, 2008 12:01
mouseover - news headlines	WDH	JavaScript Forum	4	Dec 10th, 2007 05:18
Rolling text	acrikey	Flash & Multimedia Forum	3	Apr 12th, 2007 07:05
How to make flash news headlines	marcusharun	Flash & Multimedia Forum	7	Oct 30th, 2006 21:15
News Ticker	andrewp	Web Page Design	3	May 10th, 2006 12:15

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
News Ticker Headlines Keep Rolling