Jump to content

Javascript Making The Page Load Slow.

anujojha

By anujojha
in JavaScript

Recommended Posts

anujojha Newbie

anujojha

Posted
Posted

Hi Guy's I have created a web page in which I have used javaScript for drop down menu. The page loads very slow and I suspect that its due to java script...can anyone tell me why this is happening? I am using IE6......here is the code... ---------------------------- javascript--------------------------------------------------stuHover = function() { var cssRule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets.rules.length ; x++) { cssRule = document.styleSheets.rules[x]; if (cssRule.selectorText.indexOf("LI:hover") != -1) { newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); document.styleSheets.addRule(newSelector , cssRule.style.cssText); } } var getElm = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<getElm.length; i++) { getElm.onmouseover=function() { this.className+=" iehover"; } getElm.onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", stuHover);------------------------------------ html---------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="images/stuHover.js" type="text/javascript"></script><title> template</title></head><body><span class="preload1"></span><span class="preload2"></span><div id="container"> <div id="header"> <ul id='nav' name="nav"> <li class="top"><a href="#" id = "Aboutus" class="top_link"><span class="down">ABOUT US </span></a></li> <ul class="sub"> <li><a href="#">Mission & Vission</a></li> <li><a href="#">Organization</a></li> <li><a href="#">Executive Bio's</a></li> <li><a href="#">New Hire Information</a></li> <li><a href="#">LG logo Program</a></li> <li><a href="#">Supply Chain Collaboration</a></li> </ul> <li class='top'><a href="#" id = "Plans" class="top_link"><span class="down">PLANS</span></a></li> <ul class="sub"> <li><a href="#">Strategic Plan</a></li> <li><a href="#">Business Plan</a></li> <li><a href="#">Fleet Optimization Study</a></li> <li><a href="#">ADC/BRAC Information</a></li> </ul> <li class="top"><a href="#" id = "teamsites" class="top_link"><span class ="down">TEAM SITES</span></a></li> <ul class="sub"> <li><a href="#">Operations</a></li> <li><a href="#">Transportation</a></li> <li><a href="#">Plans & Technology</a></li> <li><a href="#">Supply Chain</a></li> <li><a href="#">Contracting</a></li> <li><a href="#">Loss Prevention</a></li> <li><a href="#">Facility Management</a></li> <li><a href="#">Finance & Accounting</a></li> <li><a href="#">Planning Commitee</a></li> </ul> <li class="top"><a href="#" id = "events" class="top_link"><span class ="down">EVENTS</span></a></li> <ul class="sub"> <li><a href="#">Store Opening Schedule</a></li> <li><a href="#">Special Events</a></li> </ul> <li class="top"><a href="#" id = "quicklinks" class="top_link"><span class="down">Quick Links</span></a></li> <ul class="sub"> <li><a href="#">Store Support</a></li> <li><a href="#">Report & Tracking System</a></li> <li><a href="#">Cost Analysis Reports</a></li> <li><a href="#">PO Routing Matrix</a></li> <li><a href="#">Logistics Bulletins</a></li> <li><a href="#">Fact Papers</a></li> <li><a href="#">Closing a Facility</a></li> </ul> <li class="top"><a href="#" id = "partners" class="top_link"><span class ="down">PARTNERS</span></a></li> <ul class="sub"> <li><a href="#">2009 MSM/GM Conference</a></li> <li><a href="#">Tompkins Associates</a></li> <li><a href="#">Supply Chain Forum</a></li> <li><a href="#">CSCMP</a></li> </ul> <li class="top"><a href="#" id = "Contacts" class="top_link"><span class="down">CONTACTS</span></a></li> <ul class="sub"> <li><a href="#">LG HQ Directory</a></li> </ul> </ul> </div> <div id="content"> <div id="right"> <div class="menu"> <div class="menuheader"><h3>Associate Recognition</h3></div> <div class="menucontent"> <div class="member"> <a href="#"><img src="images/member1.jpg" alt="member" /></a> <span><a href="#">Employee 1</a></span> </div> <div class="member"> <a href="#"><img src="images/member2.jpg" alt="member" /></a> <span><a href="#">Employee 2</a></span> </div> <div class="member"> <a href="#"><img src="images/member3.jpg" alt="member" /></a> <span><a href="#">Employee 3</a></span> </div> <div class="member"> <a href="#"><img src="images/member4.jpg" alt="member" /></a> <span><a href="#">Employee 4</a></span> </div> <div class="member"> <a href="#"><img src="images/member5.jpg" alt="member" /></a> <span><a href="#">Employee 5</a></span> </div> <div class="member"> <a href="#"><img src="images/member6.jpg" alt="member" /></a> <span><a href="#">Employee 6</a></span> </div> <div class="member"> <a href="#"><img src="images/member7.jpg" alt="member" /></a> <span><a href="#">Employee 7</a></span> </div> <div class="member"> <a href="#"><img src="images/member8.jpg" alt="member" /></a> <span><a href="#">Employee 8</a></span> </div> <div class="clear"></div> </div> <div class="menufooter"></div> </div> <br /> <div class="menu"> <div class="menuheader"> <h3>Deployed Hero's</h3> </div> <div class="menucontent"> <marquee direction="up" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"> <div class="member"> <a href="#"><img src="images/member1.jpg" alt="member" /></a> <span><a href="#">Employee 1</a></span> </div> <div class="member"> <a href="#"><img src="images/member2.jpg" alt="member" /></a> <span><a href="#">Employee 2</a></span> </div> <div class="member"> <a href="#"><img src="images/member3.jpg" alt="member" /></a> <span><a href="#">Employee 3</a></span> </div> <div class="member"> <a href="#"><img src="images/member4.jpg" alt="member" /></a> <span><a href="#">Employee 4</a></span> </div> <div class="member"> <a href="#"><img src="images/member5.jpg" alt="member" /></a> <span><a href="#">Employee 5</a></span> </div> <div class="member"> <a href="#"><img src="images/member6.jpg" alt="member" /></a> <span><a href="#">Employee 6</a></span> </div> <div class="member"> <a href="#"><img src="images/member7.jpg" alt="member" /></a> <span><a href="#">Employee 7</a></span> </div> <div class="member"> <a href="#"><img src="images/member8.jpg" alt="member" /></a> <span><a href="#">Employee 8</a></span> </div> </marquee> <div class="clear"></div> </div> <div class="menufooter"></div> </div> <br /> <div class="menu"> <div class="menuheader"> <h3>Calendar</h3> </div> <div class="menucontent"> <div class="clear"></div> </div> <div class="menufooter"></div> </div> </div> <br /> <div id="middle"> <div class="post"> <div class="postheader"> <h1>NEWS OF THE WEEK</h1> </div> <div class="postcontent"> <p><img src="images/member1.jpg" align="left" > <u>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz</p><br /><br /> <hr /> <p><img src="images/member1.jpg" align="left" > <u>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz</p><br /><br /> <hr /> <p><img src="images/member1.jpg" align="left" > <u>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz</p><br /><br /> <hr /> <p><img src="images/member1.jpg" align="left" > <u>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz</p><br /><br /> <hr /> <p><img src="images/member1.jpg" align="left" > <u>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz</p><br /><br /> <hr /> </div> <div class="postfooter"></div> </div> <div class="post"> <div class="postheader"><h1>SITES</h1></div> <div class="postcontent"> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz.</p> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz.</p> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz.</p> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz z zzzzzzzzzzzz zzzzzzz zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzz.</p> </div> <div class="postfooter"></div> </div> <div class="post"> <div class="postheader"> <h1>WEATHER FORECAST</h1> </div> <div class="postcontent"> <table width="780" cellspacing="1" cellpadding="1"> <tr> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">HQ,DALLAS<br /><iframe src="http://free.timeanddate.com/clock/i1nvwrzg/n70/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">WCDC<br /><iframe src="http://free.timeanddate.com/clock/i1nvwrzg/n217/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">WADC<br /> <iframe src="http://free.timeanddate.com/clock/i1nvwrzg/n24/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe> </th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">ADC <br /> <iframe src="http://free.timeanddate.com/clock/i1nvwrzg/n25/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe> </th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">DDDC<br /> <iframe src="http://free.timeanddate.com/clock/i1nvwrzg/n862/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe> </th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">GDC<br /> <iframe src="http://free.timeanddate.com/clock/i1nvwrzg/n963/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe> </th> </tr> <tr> <td><a href="http://www.4wx.com/weather.php?pands=75236"><imgsrc="http://www.4wx.com/weather.php?config=png&forecast=hourly&alt=hwicc&hwvbg=transparent&hwvtc=white&pands=75236&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?pands=lathrop, ca"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=lathrop, ca&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?pands=waco, tx"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=hwicc&config=png&pands=waco, tx&hwvbg=transparent&hwvtc=white&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?pands=atlanta,ga"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=atlanta,ga&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?pands=newport news, va"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=hwicc&config=png&pands=newport news, va&hwvbg=transparent&hwvtc=white&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?forecast=zandh&pands=EDDL"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=cel_hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=EDDL&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> </tr></table><hr /><table width="780" cellspacing="1" cellpadding="1"> <tr> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">HADC <br /> <iframe src="http://free.timeanddate.com/clock/i1o2xd9l/n103/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">JADC<br /> <iframe src="http://free.timeanddate.com/clock/i1o2xd9l/n248/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">OKDC<br /> <iframe src="http://free.timeanddate.com/clock/i1o2xd9l/n248/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">KWDC<br /> <iframe src="http://free.timeanddate.com/clock/i1o2xd9l/n123/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">KODC<br /> <iframe src="http://free.timeanddate.com/clock/i1o2xd9l/n123/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> <th scope="col" style="color:#FFFFFF; margin-left:5px; font-size:11px;">PRDC<br /> <iframe src="http://free.timeanddate.com/clock/i1o2xd9l/n226/fs11/fcfff/tct/pct/ftb/tt0/tw0/tm2/td1/th1/ts1" frameborder="0" width="99" height="16" allowTransparency="true"></iframe></th> </tr> <tr> <td><a href="http://www.4wx.com/weather.php?pands=hawaii"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=hawaii&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?forecast=zandh&pands=RJTT"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=cel_hwicc&config=png&pands=RJTT&hwvbg=transparent&hwvtc=white&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?forecast=zandh&pands=RJFK"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=cel_hwicc&config=png&pands=RJFK&hwvbg=transparent&hwvtc=white&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?forecast=zandh&pands=OKBK"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=cel_hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=OKBK&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?forecast=zandh&pands=RKSM"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=cel_hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=RKSM&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> <td><a href="http://www.4wx.com/weather.php?forecast=zandh&pands=TJPS"><imgsrc="http://www.4wx.com/weather.php?forecast=hourly&alt=cel_hwicc&hwvbg=transparent&hwvtc=white&config=png&pands=TJPS&hwvdisplay=" width="120" height="66" border="0" title="Click for Forecast from 4WX.COM"></a></td> </tr></table> </div> <div class="postfooter"></div> </div> </div> </div> <div id="footer"> <ul> <li><a href="#">ABOUT US</a></li> <li><a href="#">PLANS</a></li> <li><a href="#">TEAM</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">SITES</a></li> <li class="last"><a href="#">contact</a></li> </ul> <span>Copyright © developed by AJ</span> </div> </div></body></html>---------------------------------------- css---------------------------------body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; background-repeat: repeat-x; background-color: #FFFFFF;}* {margin: 0px;padding: 0px;}p { padding: 10px 10px 10px 20px; display:block; color:#525757; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-align:center;}hr {color: #999999;margin-left:10px;margin-right:10px;}.postcontent img{width:75px;height:70px;border: solid 2px #999999;}.postcontent u{font-size:14px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-transform: uppercase;color:#999999;}a { color:#6b7272; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold;}#container { margin-left: 224px; margin-top:168px; text-align: left; width: 800px; background-color:#000000;}#header{ margin-top:10px; height:304px; width:777px; /* background-image:url(images/header.jpg); */ /* change made*/ background-image:url(images/picture1.png); background-repeat: no-repeat;}#content{}#left{ width:192px; float:left;} #middle{ margin-left:20px; margin-right:40px; width:450px;}#right{ width:192px; float:right; margin-bottom:20px;}/********************* menu ****************************/.menuheader{ width:192px; height:37px; background-image:url(images/menutop.gif); display:block;}.menucontent{ width:192px; background-image:url(images/menumiddle.gif); padding-top:10px; background-repeat: repeat-y;}.menuheader h3{ padding: 10px 0px 0px 20px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;}.menufooter{ width:192px; height:15px; background-image:url(images/menubottom.gif); display:block;}.postheader,.menuheader{ color:#CCCCCC; text-transform: uppercase;}/********************* post ****************************/.post{ margin-bottom:15px;}.postheader{ background-image:url(images/posttop.gif); display:block; width:450px; height:33px;}.postheader h1{ padding: 7px 0px 0px 20px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold;}.postcontent{ background-image:url(images/postmiddle.gif); background-repeat: repeat-y; padding: 20px 0px;}/*.postimg{display:block;border: solid 2px #999999;float:left;}*/.postfooter{ background-image:url(images/postbottom.gif); background-repeat: no-repeat; display:block; width:450px; height:15px;}/********************* header ****************************/#header{ position:relative;}#header ul{ position:absolute; top:243px; display:block; left:0px; width: 800px;}#header ul li{ display:inline; text-align:center; margin:auto; width:auto; border-right: 1px solid #6b7272; }.last{ border-right: 0px none #6b7272 !important;}#header ul li a{ display:inline; text-align:center; text-decoration:none; padding: 0px 10px; text-transform: uppercase;}#header ul li a:hover{ text-decoration:underline;}/********************* footer ****************************/#footer{ width:850px;}#footer ul{ display:block; margin-left:190px;}#footer ul li{ display:inline; text-align:center; margin:auto; width:auto; border-right: 1px solid #6b7272; }#footer ul li a{ display:inline; text-align:center; text-decoration:none; padding: 0px 10px; text-transform: uppercase;}#footer ul li a:hover{ text-decoration:underline;}#footer span{ color:#525757; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-align:center; width:850px; display:block; padding: 15px 0px;}/********************* menu members ****************************/.menu ul{ list-style-position: inside; list-style-type: disc; padding: 0px 0px 0px 20px; color:#666666;}.menu ul li{ padding-top: 5px; color:#666666;}.menu ul li a{ text-decoration:none; padding: 0px; text-transform: uppercase;}.menu ul li a:hover{ text-decoration:underline; text-transform: uppercase;}.member{ display:inline; float:left; margin-left:10px;}.member span{ display:block; text-align:center; padding: 2px 0px 13px 0px; text-transform: uppercase;}.member img{ width:75px; height:70px; border: solid 2px #999999; }.clear{ clear:both;}/* css for Drop Down Menu */.preload1 {background: url(images/three_1.gif);}.preload2 {background: url(images/three_1a.gif);}#nav { padding:0; margin:0; list-style:none; height:34px; background:#fff url(images/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}#nav li.top {display:block; float:left; height:35px;}#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(images/three_0.gif);}#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/three_0.gif) right top no-repeat;}#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/three_0a.gif) no-repeat right top;}#nav li:hover a.top_link {color:#fff; background: url(images/three_1.gif) no-repeat;}#nav li:hover a.top_link span {background:url(images/three_1.gif) no-repeat right top;}#nav li:hover a.top_link span.down {background:url(images/three_1a.gif) no-repeat right top;}/* Default list styling */#nav li:hover {position:relative; z-index:200;}#nav li:hover ul.sub{left:1px; top:35px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:auto; height:auto; z-index:300;}#nav li:hover ul.sub li{display:block; /*height:20px; position:relative;float:left;*//*removed to keep the small line in drop down alligned at right and the text to left*/ text-align:left; width:auto; font-weight:normal;}#nav li:hover ul.sub li a{display:block; text-align:left;font-size:9px; height:18px; width:auto/*was previously 88px*/; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}#nav li ul.sub li a.fly{background: #bbd37e url(images/arrow.gif) 80px 6px no-repeat;}#nav li:hover ul.sub li a:hover {background:#6a812c; color:#fff; border-color:#fff;}#nav li:hover ul.sub li a.fly:hover{background:#6a812c url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff;}#nav li:hover li:hover ul,#nav li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover ul,#nav li:hover li:hover li:hover li:hover li:hover ul{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}#nav ul, #nav li:hover ul ul,#nav li:hover li:hover ul ul,#nav li:hover li:hover li:hover ul ul,#nav li:hover li:hover li:hover li:hover ul ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#nav li:hover li:hover a.fly,#nav li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover a.fly,#nav li:hover li:hover li:hover li:hover li:hover a.fly{background:#6a812c url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} #nav li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li a.fly,#nav li:hover li:hover li:hover li:hover li a.fly{background:#bbd37e url(images/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

Link to comment
Share on other sites
Guest FirefoxRocks

Guest FirefoxRocks

Posted
Posted

1. PLEASE UPGRADE TO Internet Explorer 8. If you are using Windows 98/Me/2000/anything older than XP, consider using Opera or Firefox 2 or something.2. If this is still slow in IE7/8, or in another browser, I'm sure someone will address the problem soon.3. Wrap HTML in 

 tags, CSS and JavaScript in [code] tags please, for readability.
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I don't really want to copy all that and create the files just to test it here (and I'm missing the images), so it would be a good idea to use Firebug and set some breakpoints in the Javascript to figure out what's taking so long.I'm not sure why you're using Javascript for this though. You're looping through all of the rules in all of the stylesheets in order to check for a single rule (li:hover). Why don't you just add a new iehover rule to the stylesheet instead of using Javascript to loop through everything and dynamically change it? You can leave the second loop where you're adding the mouse events, but it seems sort of pointless to loop through the entire stylesheet looking for a single rule to change when you could just add the rule and forget trying to change the stylesheet with Javascript.

Link to comment
Share on other sites
packrat Newbie

packrat

Posted
Posted

Looks like you're attempting a technique like the one employed here:PeterNed 'Whatever:hover'I at one point checked out this (.htc) solution for dealing with IE6's lack luster performance when it comes to supporting the :hover pseudo-class on non a[href] elements.However I ran into the same problem, the .htc solution works brilliantly on tiny little pages without a lot of styles or markup, but it gets to be very slow as the pile of markup and number of css statements increase.I'd recommend that you return to the drawing board, attach a mouse over/move listener to the menu container (and only for IE6) and write some very narrow purpose code to handle the problem.Kinda following on justsomeguy's comment, what I usually end up with in my css files where I need to make adjustments is something like:.menu li-hover .someClass, .menu li:hover .someClass{visibility:visible;}I make a hyphenated duplicate style where necessary to make IE6 happy. IE6 only supports :hover on anchors with href's and then I'm not so sure about it's support for descendant selectors below the pseudo element; anyone feel free to correct me on that.Not sure if you're using IE Conditional Commentsbut they can make dealing with older IE versions less painful.Anywho, that's my 2c worth; if I can find some suitable code laying around I'll post a demo.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...