IE6/7 issues with Fading Ticker Tape

[Greg Wood]

1) Script Title: Fading Ticker Tape Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tickertape.htm

3) Describe problem: This is working FINE in Firefox, but not IE....the first headline appears in IE7, then I get an undefined message that stays up. In IE6, the initializing... message never goes away. I'd like to get this working on both IE browsers, if possible.

Here is the test page with the script running:
http://www.hutchcountry.com/indexticker.php

Thanks for any advice.....
Greg

[Greg Wood]

I realize from a previous post that the var i lines might be a problem, but I am running many scripts on the page. Is there a way to change the ticker script variable to a local one, rather than hunting down and changing all the possible other variables?
Thanks.

[jscheuer1]

Undeclared global variable i - Yuck! In the ticker script, change the first:

i=0

to:

var fadingTickerI=0;

Then change all the other i's to:

fadingTickerI

That will take care of that issue, there could also be other problems.

[Greg Wood]

Works like a charm now, John.
I'm slooowly learning....

[superman26]

Hi,

I am also having the same prob. But while John is working, mine is not working in IE7 and IE6. Could anyone please advise me please.
the site that i am working on is : http://www.eba-enq.com

I used this:


<!--start of ticker tape-->
<div id="tickertape">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>

<script language="JavaScript1.2">

/***********************************************
* Fading Ticker Tape Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//default speed is 4.5 seconds, Change that as desired
var speed=4500

var news=new Array()
news[0]="<a href='http://www.dynamicdrive.com'>Click here to go to Dynamic Drive's front page</a>"
news[1]="<a href='http://www.javascriptkit.com'>Visit JavaScript Kit for free JavaScripts!</a>"
news[2]="<a href='http://freewarejava.com'>Looking for free java applets? Click here.</a>"
//expand or shorten this list of messages as desired

var fadescheme=0 //set 0 to fade bgcolor from (white to black), 1 for (black to white)
var hex=(fadescheme==0)? 255 : 0
var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(0,0,0)"
var endcolor=(fadescheme==0)? "rgb(0,0,0)" : "rgb(255,255,255)"
var frame=20;

var ie=document.all
var ns6=document.getElementById
var ns4=document.layers

<!--i=0-->
var fadingTickerI=0;
tickerobject=ie? subtickertape: ns6? document.getElementById("subtickertape") : document.tickertape.document

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function bgcolorfade() {
// 20 frames fading process
if(frame>0) {
hex=(fadescheme==0)? hex-12 : hex+12 // increase or decrease color value depd on fadescheme
tickerobject.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("bgcolorfade()",20);
}
else{
tickerobject.style.backgroundColor=endcolor;
frame=20;
hex=(fadescheme==0)? 255 : 0
}
}

function updatecontent(){
if (ie||ns6)
bgcolorfade()
if (ns4){
tickerobject.subtickertape.document.write('<span class="subtickertapefont">'+news[fadingTickerI]+'</span>')
tickerobject.subtickertape.document.close()
}
else
tickerobject.innerHTML=news[fadingTickerI]

if (fadingTickerI<news.length-1)
fadingTickerI++
else
fadingTickerI=0
setTimeout("updatecontent()",speed)
}

</script>

I Hope someone can help me.
Thank you very much in advance.


Su

[jscheuer1]

You have a different problem. Change:

<div id="tickertape">

to:

<div id="tickertape" style="text-align:left>

[superman26]

Thanks John, but may i ask another question please.

How do i chnage the text font and color?..i cant seem to change the text and font even in the css it does not reflect.

Sorry for the trouble. Hope you can advise on this.

Thank you!.

Su

[jscheuer1]

You must have some rule that overrides the children of elements including of fscroller. But you can override that with this selector:

#fscroller * {
whatever rules you want go here
}

If, in some browsers, that still doesn't work out, include the !important directive after each rule, ex:

#fscroller * {
color: red!important;
}

[superman26]

Hi John,
thank you very much!..it helps in my work for this script!.thanks again.

Su

[BorderTerroir]

I have been modifying this script for the home page of our website, www.hillamhotdogs.co.uk

<style type="text/css">
<!--

<style type="text/css">
a:hover{
color:red;
text-decoration:none;
}
</style>

#tickertape{
position:relative;
layer-background-color:white;
width:400px;
height:20px;
}

#subtickertape{
background-color:white;
position:absolute;
border: 0px solid white;
width:400px;
height:20px;

}

.subtickertapefont{
font:bold 12px "Comic Sans MS"
text-align: center;
text-decoration:underline;
color:blue;
}

.subtickertapefont a{
color:blue;
text-decoration:none;
}
-->
</style>

<div id="tickertape">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>

<script language="JavaScript1.2">

/***********************************************
* Fading Ticker Tape Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//default speed is 4.5 seconds, Change that as desired
var speed=4500

var news=new Array()
news[0]="What's new on the website?"
news[1]="<a href='http://www.hillamhotdogs.co.uk/LinksPages/TheDogsBlogs.htm'>Click here to see Daisy's latest blog.</a>"
news[2]="<a href='http://www.hillamhotdogs.co.uk/ResultsPages2008/RedcarSeptember.htm'>Click here for the latest tournement results.</a>"
news[3]="<a href='http://www.hillamhotdogs.co.uk/Diary.htm'>Our next tournement? Click here for the diary.</a>"
news[4]="<a href="http://www.doggiesolutions.co.uk" target="_blank">Click here for the website of the month.</a>"
//expand or shorten this list of messages as desired

var fadescheme=1 //set 0 to fade bgcolor from (white to black), 1 for (black to white)
var hex=(fadescheme==0)? 255 : 0
var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(0,0,0)" //"rgb(255,255,255)"=white
var endcolor=(fadescheme==0)? "rgb(0,0,0)" : "rgb(255,255,255)" //"rgb(0,0,0)"=black
var frame=20;

var ie=document.all
var ns6=document.getElementById
var ns4=document.layers

var fadingTickerI=0;
tickerobject=ie? subtickertape: ns6? document.getElementById("subtickertape") : document.tickertape.document

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function bgcolorfade() {
// 20 frames fading process
if(frame>0) {
hex=(fadescheme==0)? hex-12 : hex+12 // increase or decrease color value depd on fadescheme
tickerobject.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("bgcolorfade()",20);
}
else{
tickerobject.style.backgroundColor=endcolor;
frame=20;
hex=(fadescheme==0)? 255 : 0
}
}

function updatecontent(){
if (ie||ns6)
bgcolorfade()
if (ns4){
tickerobject.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>')
tickerobject.subtickertape.document.close()
}
else
tickerobject.innerHTML=news[i]

if (i<news.length-1)
i++
else
fadingTickerI
setTimeout("updatecontent()",speed)
}

</script>

I need help with an If statement.

Basically I would like this line news[0]="What's new on the website?" to appear as plain black text and not to be affected by mouseover.

All help appreciated.