Cross Browser marquee - Modifications

[accxess]

Cross Browser marquee
http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

Script is almost perfect for what i am using however there are two changes which would be really handy...

1. To be able to set the width as a percentage of the page.
2. If using a set width to centre the text.

Tried to use 100% instead of 800px in the var marqueewidth="??px" area but no luck.... any ideas

Surely its easy to centre the text too.... just no sure how to do it. Is there a tutorial that might help?

[jscheuer1]

Try this mod of the script:

<script type="text/javascript">

/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Set Height Adjustment to center marquee vertically
var hgtAdj=3
//Specify the marquee's width (in pixels or percentage)
var marqueewidth="100%"
//Specify the marquee's height (in pixels)
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#DEFDD9"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var ie=document.all && !window.opera
function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

if (((typeof(window.onresize))==('object')||('undefined'))&&(marqueewidth.indexOf('%')!==-1))
window.onresize=refresh;
function refresh() {
setTimeout("doit()",1)
}
function doit(){
if (window.location.reload)
window.location.reload( true );
else if (window.location.replace)
window.location.replace(unescape(location.href))
else
window.location.href=unescape(location.href)
}

if (marqueewidth.indexOf('%')!==-1)
var marqueewidth=ie? (iecompattest().clientWidth*parseInt(marqueewidth)/100)-20+'px' : (window.innerWidth*parseInt(marqueewidth)/100)-20+'px'

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:'+hgtAdj+'px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top='+hgtAdj+' onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
write('</td></table>')
}
}
</script>

[accxess]

John,

thanks for this.... width seems to work ok, however I was looking for horizontal centering and hadn't even considered a vertical centering in the marquee height! this feature is a great addition.

How can I get horizontal centering of the reduced width marquee on the page as well?


my examples of live use is at: (just the script page) php included in the site: (here)

Any ideas?

Mark

[jscheuer1]

OK, we've got a one easy solution and one potential problem. Good news first:

To center the marquee on the page horizontally, simply surround the script:

<center>

script goes here

</center>

Now the bad news. Using the percentage width with this modified script will cause the page to reload whenever the window is resized. With PHP this may cause data to be resubmitted and/or lost. Experiment and see if this is the case. If so, use pixel width or disable the reload. To disable the reload while still using percentage width delete this section of the code:

if (((typeof(window.onresize))==('object')||('undefined'))&&(marqueewidth.indexOf('%')!==-1))
window.onresize=refresh;
function refresh() {
setTimeout("doit()",1)
}
function doit(){
if (window.location.reload)
window.location.reload( true );
else if (window.location.replace)
window.location.replace(unescape(location.href))
else
window.location.href=unescape(location.href)
}

or if you want to keep it for possible later use, simply comment out the lines:

//if (((typeof(window.onresize))==('object')||('undefined'))&&(marqueewidth.indexOf('%')!==-1))
//window.onresize=refresh;

This will mean that once the window is loaded, if the user changes resolution, or even just changes the browser's window size, the marquee will not adjust to compensate, a small price to pay for not messing up you database.

[accxess]

John just great... all worked fine!

On the EZI site pixel width worked fine and centering now active. I am am a happy chappy now!

I have all i need to make the script work on several sites.

THanks a million!

I have what i NEED but a wish list would be an external file to load the content of the marquee.... how hard is that to achieve?

What about another element to the script calling a text (or htm formatted) file in place of the current line: "var marqueecontent='<nobr><font face="Arial">Thank you......"

Mark

[jscheuer1]

You might be able to use a PHP include but, that is outside my area of expertise.