Mike's DHTML Scroller

[jeremiah]

1) Script Title: Mike's DHTML Scroller

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

3) Describe problem: It says it is cross-browser compatible. Unbelievably, it looks okay in IE7 but not firefox2.0.0.11 (the most updated version). The site is www.skypix.biz/pricing.html. It doesn't show at all in Opera.

[jscheuer1]

http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

[jeremiah]

So I did switch programs. Working in FF and Opera but is cut in half in IE. Below are the only parts I messed with.

#pscroller1{
width: 350px;
height: 20px;
border: 0px solid black;
padding: 2px;
background-color: #FFFFCC;
}

var pausecontent=new Array()
pausecontent[0]='<center>session fee:</center>'
pausecontent[1]='<center>$50.00 <small>(for up to three people)

</small></center>'
pausecontent[2]='add $25.00 for every 2 additional people'
pausecontent[3]='check out the <a

href="http://www.skypix.biz/faq.html">faq</a> page for more info'

<table style="margin-left: 200px; margin-right:

auto;"><tbody><tr><td style="vertical-align: center;"><script

type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname,

pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 2000)
document.write("<br />")

</script></td></tr></tbody></table>

[jscheuer1]

Alignment issues are more critical in IE than the other browsers. Do this (addition red):

 . . . <td style="vertical-align: center;text-align:left;"><script 

type="text/javascript"> . . .

That will align everything to the left except:

pausecontent[0]='<center>session fee:</center>'
pausecontent[1]='<center>$50.00 <small>(for up to three people)</small></center>'

Which already have the center formatting included. I think you want that centering though, so you could add it to the other pausecontent[x] entries.

Notes: You could do it like so -

var pausecontent=new Array()
pausecontent[0]='<div style="text-align:center;">session fee:</div>'
pausecontent[1]='<div style="text-align:center;">$50.00 <small>(for up to three people)</small></div>'
pausecontent[2]='<div style="text-align:center;">add $25.00 for every 2 additional people</div>'
pausecontent[3]='<div style="text-align:center;">check out the <a href="http://www.skypix.biz/faq.html">faq</a> page for more info</div>'

or even like:

var pausecontent=new Array()
pausecontent[0]='<div>session fee:</div>'
pausecontent[1]='<div>$50.00 <small>(for up to three people)</small></div>'
pausecontent[2]='<div>add $25.00 for every 2 additional people</div>'
pausecontent[3]='<div>check out the <a href="http://www.skypix.biz/faq.html">faq</a> page for more info</div>'

and add:

#pscroller1 div {
text-align:center;
}

to the style section.

With just the one scroller and no rules for 'someclass', you don't need any of this:

#pscroller2{
width: 400px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

or this:

var pausecontent2=new Array()
pausecontent2[0]='<a href="http://www.news.com">News.com: Technology and business reports</a>'
pausecontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
pausecontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>'