PDA

View Full Version : A Little Help With A JS News Ticker Please



ahallicks
Mar 1st, 2007, 04:44 PM
If you head to http://www.themits.co.uk/home.html you'll notice a nice little news ticker at the bottom (forgive the poor styling I'm still in the test stage!). However, I have a problem.

When the news ticker reaches the end of the news feeds it suddenly snaps back to the beginning of the news feeds. But if you look at this one (http://www.mioplanet.com/rsc/newsticker_javascript.htm) you'll see that the news enters and leaves smoothly. I have used their EXACT javascript, but cannot see why mine is not working and theirs does. Any help would be appreciated.

My news ticker script is here (http://www.themits.co.uk/script.js) and I also sourced this page (http://www.soft32.com) who use the same news ticker.

Cheers guys!

chump2877
Mar 1st, 2007, 09:33 PM
Try my news ticker (look at source code): http://www.mediamogulsweb.com/client/scroll_news/rumors2.php

ahallicks
Mar 2nd, 2007, 08:58 AM
That's a nice one, but having very little JS knowledge I would know the first thing about turning that, into the one I want... the one line scrolling from right to left method.

Thanks for the help tho...

chump2877
Mar 2nd, 2007, 01:50 PM
Here you go...I converted my news ticker to a horizontal scroll for you....The code probably could be a bit leaner, and perhaps I'll work on it some more later...But, for now, the code that follows does work:


<!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" lang="en" xml:lang="en" dir="ltr">

<head>

<title>Horizontal News Ticker</title>

<style type="text/css">

body
{
background-color:#E5E5E5;
margin:0;
}

#page
{
background-color:#fff;
position:absolute;
width:800px;
left:50%;
margin:0 0 0 -400px;
min-height:600px;
}

#feed_container
{
background-color:#EDEDED;
position:absolute;
width:790px;
left:50%;
margin:10px 0 0 -395px;
height:15px;
font:12px Arial,Helvetica;
overflow:hidden;
}

#feed_container p
{
margin:0;
display:inline;
}

#feed_container a
{
color:#4E86BF;
text-decoration:none;
}
#feed_container a:hover
{
color:#4899C6;
}

#feed_container span
{
background-color:#FCC223;
font-weight:bold;
color:#fff;
padding:0 5px;
margin:0 5px;
}

#feed
{
position:absolute;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

</head>

<body>

<div id="page">
<div id="feed_container">
<div id="feed">
<p><span>News</span><a href="">1) This is a headline featuring today's latest news</a> </p>
<p><span>News</span><a href="">2) This is a headline featuring today's latest news</a> </p>
<p><span>News</span><a href="">3) This is a headline featuring today's latest news</a> </p>
<p><span>News</span><a href="">4) This is a headline featuring today's latest news</a> </p>
<p><span>News</span><a href="">5) This is a headline featuring today's latest news</a> </p>
</div>
</div>
</div>

<script type="text/javascript">

// Global variables
var dObj = document.getElementById('feed');
var pArray = dObj.getElementsByTagName("p");
var pArray2 = collectionToArray(dObj.getElementsByTagName("p"));
var w = 0;
var speed = 1;
var left = 0;
var timer;
var repeatPs = 0;
var tempID = 0;
var num = 0;

// Set Width of "feed" div
for (i=0; i<pArray.length-1; i++)
w += pArray[i].offsetWidth;
dObj.style.width = w+"px";

// Functions
function scrollNews()
{
var temp;

if (repeatPs == 1)
{
for (k=0; k<pArray2.length; k++)
{
temp = document.createElement("p");
tempID++;
temp.id = "newP" + tempID;
dObj.appendChild(temp);
document.getElementById("newP"+tempID).innerHTML = pArray[k].innerHTML;
}

// Reset Width of "feed" div
var w2 = 0;
for (i=0; i<pArray.length-1; i++)
w2 += pArray[i].offsetWidth;
dObj.style.width = w2+"px";

repeatPs = 0;
}

left -= speed;
num += speed;
dObj.style.left = left + "px";
timer = setTimeout('scrollNews()',30);

if (num + 1200 > w)
{
num = 0;
repeatPs = 1;
}
}

function pauseScroll(id,state,e,obj)
{
if (!e) var e = window.event;

// prevent event bubbling
if (e.relatedTarget)
var relTarg = e.relatedTarget
else if (e.type == 'mouseout')
var relTarg = e.toElement
else
var relTarg = e.fromElement;

while (relTarg && relTarg != obj)
relTarg = relTarg.parentNode;

if (relTarg == obj)
return;

// perform action
if (state == 1)
clearTimeout(timer);
else if (state == 2)
scrollNews();
}

// Convert HTMLCollection object to Array object
function collectionToArray(col)
{
a = new Array();
for (i=0; i<col.length; i++)
a[a.length] = col[i];
return a;
}

// Start scrolling onload
window.onload = function()
{
scrollNews();

dObj.onmouseover = function(event)
{
pauseScroll('feed',1,event,dObj);
}
dObj.onmouseout = function(event)
{
pauseScroll('feed',2,event,dObj);
}
}

</script>

</body>

</html>

Edit: I assume you will be using some dynamic source for your news ticker (like an RSS feed)...the only requirement for integrating something like that into my script is that you must place each headline inside a set of <p> tags....
Update: I improved the code some more, so you'll want to use the source code at this URL: http://www.mediamogulsweb.com/client/scroll_news/horiz_news_ticker.php. Don;t use the code above...

ahallicks
Mar 5th, 2007, 03:05 PM
Thanks very much. I'll check that out!

I found out what was wrong with mine... they used an image placeholder that was the whole width of the news ticker, and invisible. When the page loads you'd see (or not) an invisible image, then the text scrolls in from the right, and as it gets to the end of the feeds the image would 'appear' again and the text would look like it's disappearing off the the left.

:)