May
Javascript mouseovers not behaving in FF
The site is at http://www.ntsbdc.org
Try it first in IE, mouse over the "About Us" button, select one of the links from the dropdown, and you’ll see the menus working as they should. Open it w/firefox, and when you try to mouse over the items in the roll-down, it rolls back up as you’re trying to select a link.
Here’s the HTML involved:
The Menu Bar (I’m using the JS write method to hide the "onLoad" parameters from the W3C validation service)
<TABLE ID="menuBar" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD><A HREF="http://www.ntsbdc.org/default.asp"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnHome\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnHomeWhite.src;}\" onMouseOver=\"this.src=btnHomeBlue.src;\" onMouseOut=\"this.src=btnHomeWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnAbout\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnAboutWhite.src;}\" onMouseOver=\"this.src=btnAboutBlue.src; rollDown(’mnuAbout’,13);\" onMouseOut=\"rollUp(’mnuAbout’); this.src=btnAboutWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnServices\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnServicesWhite.src;}\" onMouseOver=\"this.src=btnServicesBlue.src; rollDown(’mnuServices’,13);\" onMouseOut=\"rollUp(’mnuServices’); this.src=btnServicesWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnLocal\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnLocalWhite.src;}\" onMouseOver=\"this.src=btnLocalBlue.src; rollDown(’mnuLocal’,13);\" onMouseOut=\"rollUp(’mnuLocal’); this.src=btnLocalWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="calendar/calendar.asp" TARGET="_blank"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnCalendar\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnCalendarWhite.src;}\" onMouseOver=\"this.src=btnCalendarBlue.src;\" onMouseOut=\"this.src=btnCalendarWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="success_stories.html" TARGET="_blank"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnSuccess\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnSuccessWhite.src;}\" onMouseOver=\"this.src=btnSuccessBlue.src;\" onMouseOut=\"this.src=btnSuccessWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="#"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnNews\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnNewsWhite.src;}\" onMouseOver=\"this.src=btnNewsBlue.src; rollDown(’mnuNews’,13);\" onMouseOut=\"rollUp(’mnuNews’); this.src=btnNewsWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="resources.shtml" TARGET="_blank"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnResources\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnResourcesWhite.src;}\" onMouseOver=\"this.src=btnResourcesBlue.src;\" onMouseOut=\"this.src=btnResourcesWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="faq.shtml"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnFaq\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnFaqsWhite.src;}\" onMouseOver=\"this.src=btnFaqsBlue.src;\" onMouseOut=\"this.src=btnFaqsWhite.src;\" />");</SCRIPT></A></TD>
<TD><A HREF="contact.shtml"><SCRIPT TYPE="text/javascript">document.write("<img id=\"btnContact\" src=\"http://www.webmaster-talk.com/images/pixel.gif\" border=\"0\" onload=\"if (!this.getAttribute(’loaded’)) {this.setAttribute(’loaded’, ‘1′); this.src = btnContactWhite.src;}\" onMouseOver=\"this.src=btnContactBlue.src;\" onMouseOut=\"this.src=btnContactWhite.src;\" />");</SCRIPT></A></TD>
</TR>
</TABLE>The Rolldown Menus
<UL ID="mnuAbout" class="menu" onMouseOver="stayDown('mnuAbout');" onMouseOut="rollUp('mnuAbout');" style="top:0px;">
<LI><A HREF="what_is.shtml">What Is NTSBDC</A></LI>
<LI><A HREF="econ_impct.shtml">Economic Impact</A></LI>
<LI><A HREF="adv_brd.shtml">Advisory Board</A></LI>
<LI><A HREF="partners.shtml">Partners</A></LI>
</UL>
<UL ID="mnuServices" class="menu" onMouseOver="stayDown(’mnuServices’);" onMouseOut="rollUp(’mnuServices’);" style="top:0px;">
<LI><A HREF="training.shtml">Training</A></LI>
<LI><A HREF="counseling.shtml">Counseling</A></LI>
<LI><A HREF="risk_mgmt.shtml">Risk Management</A></LI>
<LI><A HREF="gov_contr.shtml">Government Contracting</A></LI>
<LI><A HREF="internl_trade.shtml">International SBDC</A></LI>
<LI><A HREF="enterprise.shtml">Enterprise Excellence</A></LI>
<LI><A HREF="tech_asst.shtml">Technology Assistance</A></LI>
</UL>
<UL ID="mnuLocal" class="menu" onMouseOver="stayDown(’mnuLocal’);" onMouseOut="rollUp(’mnuLocal’);" style="top:0px;">
<LI><A HREF="map.shtml">SBDC Location Map</A></LI>
<LI><A HREF="county_list.shtml">Search by County</A></LI>
<LI><A HREF="sbdc_list.shtml">SBDC Offices</A></LI>
</UL>
<UL ID="mnuNews" class="menu" onMouseOver="stayDown(’mnuNews’);" onMouseOut="rollUp(’mnuNews’);" style="top:0px;">
<LI><A HREF="docs/NTSBDCannualReportBooklet.pdf" TARGET="_blank">Annual Report 2006</A></LI>
<LI><A HREF="docs/Annual 05.pdf" TARGET="_blank">Annual Report 2005</A></LI>
<LI><A HREF="docs/2004 NTSBDC Annual Report.pdf" TARGET="_blank">Annual Report 2004</A></LI>
<LI><A HREF="docs/2003_annual_report.pdf" TARGET="_blank">Annual Report 2003</A></LI>
<LI><A HREF="docs/2002 annual report.pdf" TARGET="_blank">Annual Report 2002</A></LI>
</UL>
The Javascript
var timeouts = {};
function rollDown(list,speed)
{
if(document.getElementById){
menu = document.getElementById(list)
menu.style.visibility = "visible";
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
if(parseInt(menu.style.top) < 148){
menu.style.top = parseInt(menu.style.top) + (speed) + "px";
speed = speed * .95;
if (speed < 1){speed = 1}
timeouts[ list ] = setTimeout("rollDown(’" + list + "’," + speed + ")", 5);
}else
{menu.style.top = 148;
// alert(menu.style.top);
clearTimeout( timeouts[ list ] );}
}else
{if(parseInt(menu.style.top) < 27){
menu.style.top = parseInt(menu.style.top) + speed + "px";
speed = speed * .9;
if (speed < 1){speed = 1}
timeouts[ list ] = setTimeout("rollDown(’" + list + "’," + speed + ")", 10);
}else
{menu.style.top = 27;
clearTimeout( timeouts[ list ] );}
}
}
}
function rollUp(list)
{
if(document.getElementById){
menu = document.getElementById(list)
menu.style.visibility = "visible";
if(parseInt(menu.style.top) > -30){
menu.style.top = parseInt(menu.style.top) - 10 + "px";
timeouts[ list ] = setTimeout("rollUp(’" + list + "’)", 10);
}else
{menu.style.visibility = "hidden";
clearTimeout( timeouts[ list] );}
}
}
function stayDown(list)
{
clearTimeout( timeouts[ list] );
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
document.getElementById(list).style.top = 148;
}else
{document.getElementById(list).style.top = 27;}
}
There is CSS that’s not shown here, because I don’t think it would have an effect on the problem.
Also, notice that the menus roll down smoothly in IE, but in firefox they are real jerky - If I remove the scrolling marque on the left side, they move smoothly in firefox. Can’t firefox do 2 things at a time?
Thanks,
joe
Relevant Links