PDA

View Full Version : Cross Browser Marquee different in FF and IE?



TCArknight
02-19-2006, 04:53 PM
Script: Cross Browser marquee
http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

Hi!

when I use this, for some reason on IE6 the background of the marquee doesn't completely fill the area of the marquee the way it does on FF. You can see this on the site I'm working on (http://www.uca.edu/divisions/student/intramurals/testsite/HPER/hours.html)

This is the relevant code in the page (part of a Dreamweaver 8 template):

<tr>
<td height="87" colspan="2" align="center">
<img src="../Testsite/images/bkgd_images/btn_hper.jpg" alt="HPER Menu" onClick="return clickreturnvalue()" onMouseover="dropdownimagemapmenu(this, 0, event, mnu_hper, '150px')" onMouseout="delayhidemenu()"/>
<img src="../Testsite/images/bkgd_images/btn_fitness.jpg" alt="Fitness Menu" onClick="return clickreturnvalue()" onMouseover="dropdownimagemapmenu(this, 0, event, mnu_fitwell, '150px')" onMouseout="delayhidemenu()"/>
<img src="../Testsite/images/bkgd_images/btn_group.jpg" alt="Group Menu" onClick="return clickreturnvalue()" onMouseover="dropdownimagemapmenu(this, 0, event, mnu_exercises, '150px')" onMouseout="delayhidemenu()"/>
<img src="../Testsite/images/bkgd_images/btn_aquatics.jpg" alt="Aquatics Menu" onClick="return clickreturnvalue()" onMouseover="dropdownimagemapmenu(this, 0, event, mnu_aqua, '150px')" onMouseout="delayhidemenu()"/>
<img src="../Testsite/images/bkgd_images/btn_intramurals.jpg" alt="Intramural Menu" onClick="return clickreturnvalue()" onMouseover="dropdownimagemapmenu(this, 0, event, mnu_intra, '150px')" onMouseout="delayhidemenu()"/>
<img src="../Testsite/images/bkgd_images/btn_facilities.jpg" alt="Facilities Menu" onClick="return clickreturnvalue()" onMouseover="dropdownimagemapmenu(this, 0, event, mnu_fac, '150px')" onMouseout="delayhidemenu()"/>
<!-- TemplateBeginEditable name="Page Heading" -->
<h1 class="style3"></h1>
<!-- TemplateEndEditable -->
<!-- News & Events Scroll - This is a side-scrolling ticker for the news & events that are on the main page. -->
<script language="JavaScript1.2">
/*
Cross browser Marquee script- &#169; 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
*/
//Specify the marquee's width (in pixels)
var marqueewidth="600px"
//Specify the marquee's height
var marqueeheight="20px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//configure background color:
var marqueebgcolor="#750F7D"
//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 color="#000000">In this location is where you\'ll see the NEWS, ANNOUNCEMENT, and other IMPORTANT INFORMATION Scroll by. By moving the mouse over this area, you can pause the scrolling allowing as much time as needed for any particular bit of the text.</nobr>'

////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
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){
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:0px"></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=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
<!-- End Scroll -->
</td>
</tr>


Any thoughts?
Thanks!
Thomas

jscheuer1
02-19-2006, 06:25 PM
Just a suggestion, use either white or light colored text on that dark purple marquee background or use a lighter shade of purple for the background. As it is, it is hard to read.

To fix the problem, find this line in the script:


write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')

Make it like so:


write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden;background-color:'+marqueebgcolor+'">')