PDA

View Full Version : Cross Browser Marquee Problem



branzzt
12-05-2006, 08:39 PM
1) Script Title: Cross Browser Marquee

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

3) Describe problem:

Hello,
I've just discovered this site and have found many useful tools, but I'm running into a problem I can't solve. I've been using a DHTML menu for a long time, but when I add the above scroller to my page all of the menus stay expanded when the page loads. When everything loads correctly all the main menu items show, but their sub-items are hidden.

The script for my menu system is very simple and I don't see any interference between the two....I guess if I could this wouldn't be a problem. :)

Anyways, if someone could help me out it would be much appreciated.

I've stripped out any site specific information from the code below so you should be able to cut and paste it to see what I mean.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id2) {
var d2 = document.getElementById(id2);
for (var h = 1; h<=10; h++) {
if (document.getElementById('smenu'+h)) {document.getElementById('smenu'+h).style.display='none';}
}
if (d2) {d2.style.display='block';}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>


<!-- <link href="includes/asc.css" rel="stylesheet" type="text/css" /> -->

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="ticker">
<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
*/

//Specify the marquee's width (in pixels)
var marqueewidth="310px";
//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="#";
//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" font color="#000000">This is just a test. This is just a test.</font></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>

</div>
<div id="banner"></div>
<div id="menu">

<dl>
<dt onmouseover="javascript:montre('smenu1');">Recreational</dt>
<dd id="smenu1">
<ul>
<li><a href="rec-general.html">General Info</a></li>
<li><a href="rec-development.html">Player Development </a> </li>
<li><a href="rec-schedule.html">Schedule </a></li>
<li><a href="rec-tournaments.html">Tournaments</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu2');">Competitive</dt>
<dd id="smenu2">
<ul>
<li><a href="comp-general.html">General Info</a></li>
<li><a href="comp-development.html">Player Development</a><a href="comp-tryouts.html">Tryouts</a></li>
<li><a href="comp-tournaments.html">Tournaments</a></li>
<li><a href="comp-schedule.html">Schedule</a></li>
<li><a href="collegeprep.html">College Prep</a></li>
<li><a href="comp-training.html">Winter Training</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Programs</dt>

<dd id="smenu3">
<ul>
<li><a href="summercamps.html">Summer Camps </a></li>
<li><a href="clinics.html">Clinics</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">Forms</dt>
<dd id="smenu4">
<ul>
<li><a href="registrationform.html">Registration</a></li>
<li><a href="campclinicforms.html">Camps/Clinics</a></li>
<li><a href="tryoutforms.html">Tryouts</a></li>
<li><a href="otherforms.html">Other Forms</a></li>
</ul>
</dd></dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">Referees</dt>
<dd id="smenu5">
<ul>
<li><a href="referees-general.html">General Info</a></li>
<li><a href="referee-schedules.html">Schedules</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');">Admin</dt>
<dd id="smenu6">
<ul>
<li><a href="philosophy.html">Philosophy</a></li>
<li><a href="admin.html">Administrative Assistant</a></li>
<li><a href="board.html">Board</a></li>
<li><a href="policies.html">Policies</a></li>
<li><a href="concession.html">Concession Stand</a></li>
<li><a href="alumni.html">Alumni</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu7');" id="coaching"><a href="#">Coaching</a></dt>
<dd id="smenu7">
<ul>
<li><a href="prof-coaches.html">Professional Coaches</a></li>
<li><a href="rec-coaches.html">Rec Coaches</a></li>
<li><a href="coaching-education.html">Education</a></li>
</ul></dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu8');">Resources</dt>
<dd id="smenu8">
<ul>
<li><a href="links.html">Links</a></li>
<li><a href="rules.html">Rules</a></li>
<li><a href="facilities.html">Facilities</a></li>
<li><a href="newsletters.html">Newsletters</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>

jscheuer1
12-06-2006, 06:35 AM
There could be other problems but, for one - you cannot have two onload statements on a page:


window.onload=montre;

and:


window.onload=populate;

Get rid of both of those and try this one:


window.onload=function(){montre();populate();};

branzzt
12-06-2006, 04:24 PM
That did the trick. It's always the simple things that screw me up. :)