...

View Full Version : News Ticker not working in IE



Iszak
05-07-2008, 12:52 PM
I've got this a news ticker I made custom edited what ever you want to call it right. It works fine in Firefox but fails to work in Internt Explorer. Any help is appreciation and thanks will be given.


<script type="text/javascript">
function rotator()
{
var urls = new Array()
urls[0] = "#";
urls[1] = "#";
urls[2] = "#";

var images = new Array()
images[0] = "image_1";
images[1] = "image_2";
images[2] = "image_3";

var contents = new Array()
contents[0] = "Text 1";
contents[1] = "Text 2";
contents[2] = "Text 3";

this.pointer = 1;
this.images = images;
this.id = "rotator";

var instance = this;

setTimeout(function(){instance.refresh()}, 1000)

rotator.prototype.refresh = function()
{
this.element = document.getElementById(this.id);
this.rotate();
}

rotator.prototype.rotate = function()
{
this.element.childNodes[5].href = urls[this.pointer];
this.element.childNodes[3].innerHTML = contents[this.pointer];
this.element.childNodes[1].src = "./images/promo/"+this.images[this.pointer]+".gif"

this.pointer = (this.pointer < this.images.length - 1)? this.pointer + 1 : 0
setTimeout(function(){instance.rotate()}, 1000)
}
}

new rotator()
</script>


HTML


<div id="rotator">
<img src="./images/promo/image_1.gif" alt="Promo" />
<p>
Text 1
</p>
<a href="#">&#187; Check it out!</a><br />
</div>

nottRobin
05-07-2008, 04:41 PM
The error I get in IE is "'this.element.childNodes.5' is null or not an object".

I imagine this is due to the problem outlined here: http://p2p.wrox.com/topic.asp?TOPIC_ID=31377 that IE and Firefox handle whitespace differently, so while firefox creates two text nodes in between your elements, making the link the 5th child node, IE doesn't do so, so presumably your link, under IE, would be the 3rd child node.

The best practice solution would be to give each child element a class and then locate it using that class, using either a getElementsByClassName (http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/) function, or using a library like jQuery (http://jquery.com).

I did it using jQuery:


<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
function rotator()
{
var urls = new Array()
urls[0] = "#";
urls[1] = "#";
urls[2] = "#";

var images = new Array()
images[0] = "image_1";
images[1] = "image_2";
images[2] = "image_3";

var contents = new Array()
contents[0] = "Text 1";
contents[1] = "Text 2";
contents[2] = "Text 3";

this.pointer = 1;
this.images = images;
this.id = "rotator";

var instance = this;

setTimeout(function(){instance.refresh()}, 1000)

rotator.prototype.refresh = function() {
this.element = document.getElementById(this.id);
this.rotate();
}

rotator.prototype.rotate = function() {
jQuery('.rotatorLink',this.element)[0].href = urls[this.pointer];
jQuery('.rotatorText',this.element)[0].innerHTML = contents[this.pointer];
jQuery('.rotatorImg',this.element)[0].src = "./images/promo/"+this.images[this.pointer]+".gif"

this.pointer = (this.pointer < this.images.length - 1)? this.pointer + 1 : 0
setTimeout(function(){instance.rotate()}, 1000)
}
}

new rotator()
</script>
</head>
<body>
<div id="rotator">
<img src="./images/promo/image_1.gif" alt="Promo" class="rotatorImg" />
<p class="rotatorText">
Text 1
</p>
<a href="#" class="rotatorLink">&#187; Check it out!</a><br />
</div>
</body>
</html>

Iszak
05-07-2008, 09:51 PM
Thanks it helped but jquery isn't exactly small and I want to keep the site fast loading for people with low internet speeds is there an alternative method? or like jquery with just the stuff I need for this task?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum