Centering The Ticker Tape Script

**BorderTerroir** · 12-26-2008, 07:53 AM

Fading Ticker Tape Script

http://www.dynamicdrive.com/dynamici...tickertape.htm

I've modified this script on a test page on our website

http://www.hillamhotdogs.co.uk/TestPage.htm

How do I centre it?

**bartjr** · 12-26-2008, 02:17 PM

There are many way to center it...but try this one

<div align="center" your code go here... </div>

try the above

**jscheuer1** · 12-26-2008, 05:05 PM

Originally Posted by bartjr

There are many way to center it...but try this one

<div align="center" your code go here... </div>

try the above

That's a very bad idea. You should use a valid URL DOCTYPE like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

as the very first thing in your source code. Then you may do this:

Code:

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

**BorderTerroir** · 12-27-2008, 06:52 AM

Thanks for the replies guys if you take a look it now it sort of works but I'm confused

I tried the 'good' script first but it didn't work, (FrontPage jumbled up the code so I had to copy and paste via Notepad).

Then I tried the 'bad' script, it tried to work but I had to increase the size of the tickertape box to centre it.

I've put the margin back so you will see what I mean.

http://www.hillamhotdogs.co.uk/TestPage.htm

Thanks in advance.

John

**jscheuer1** · 12-27-2008, 07:37 AM

Now I'm a little confused. Do you want to center the ticker, or its contents within it. I answered the first question. But, as appears to be the case now (but I'm still not sure), if you were asking the second question, the answer would have been:

Code:

#subtickertape{
background-color:white;
position:absolute;
border: 1px solid black;
width:500px;
height:20px;
text-align: center;
}

But, if it really was the first question, you should do it the way I first said. If your editor cannot handle the job, yes you should use NotePad.

If you want both, then simply combine both my first answer and my second one:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!--
a:hover {
color: red;
text-decoration: none;
}

#tickertape {
position: relative;
background-color: white;
width: 500px;
height: 20px;
margin: 0 auto;
}

#subtickertape {
background-color: white;
position: absolute;
border: 1px solid black;
width: 500px;
height: 20px;
text-align: center;
}

.subtickertapefont {
font: bold 16px 'Comic Sans MS', sans-serif;
text-decoration: underline;
color: blue;
}

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

</head>

<body onload="if (ie||ns6||ns4) {regenerate2();updatecontent()}">

&nbsp;
<p>

&nbsp;
<p align="center">&nbsp;</p>
<div id="tickertape">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>

<script type="text/javascript">

/***********************************************
* 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=3000

var news=new Array()

news[0]="<a href='http://www.hillamhotdogs.co.uk/LinksPages/TheDogsBlogs.htm'>Click here to see Daisy's latest blog.<\/a>"
news[1]="<a href='http://www.hillamhotdogs.co.uk/ResultsPages2008/RedcarSeptember.htm'>Click here for the latest tournement results.<\/a>"
news[2]="<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=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(255,255,255)"
var endcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(255,255,255)"
var frame=30;

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("+255+","+255+","+255+")"; // 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>
              <p align="center">&nbsp;</p>
</body>

</html>

**BorderTerroir** · 12-27-2008, 04:34 PM

Thanks and apologies.

Yes I wanted both ticker and text to be in the centre.

Please mark this question resolved.

John

BTW - Ace website if you send me a jpeg of your logo I'll stick a link on our website.

Thread: Centering The Ticker Tape Script

Thread Tools

Search Thread

Centering The Ticker Tape Script

The Following User Says Thank You to bartjr For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions