Divante Posted October 14, 2011 Share Posted October 14, 2011 I am having an issue with internet explorer on when loading or refreshing the page. i have an element i am immediately trying to hide as soon as the DOM is loaded i.e on document.ready. It works well in firefox as the element does not show at all, but in internet explorer there is a brief delay before it is hidden. I will appreciate any insight as to how to solve this issue with internet explorer. Basically i am trying to hide the drop down lists as soon as the page loads. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.submenu').hide(); /*$('#imagepanel').slideshow({ timeout: 8000, type: 'sequence' }); */ /*$('#imagepanel2').slideshow({ timeout: 8000, type: 'sequence', transition:'fade' });*/ /*$("#stats").easySlider({ speed: 800, auto: false, pause: 5000, continuous: false, numeric: true });*/ $('li.mainmenu').hover( function() { $this = $(this); $this.addClass('tab') var activate = "#sub"+$this.attr("rel"); $(activate).fadeIn("fast"); }, function() { $this = $(this); $this.removeClass('tab'); $('.submenu').hide(); } ); $('li.mainmenu').mouseup( function() { $this = $(this); $this.removeClass('tab'); $('.submenu').hide(); } ); /*$("#showslider").slideUp("slow"); <?PHP if($_SESSION['alert']!=1){ $_SESSION['alert']=1; ?> $("#showslider").slideDown(3000); <?PHP } ?> */ }); </script> <div id="header"> <a href="/index.php"><img src="/graphics/logo_ABC.gif" alt="ABC body products" /></a> <h6>Taking new aim at skin </h6> <ul id="menutext"><li><a href="/index.php">Home</a></li><li><a href="locations.php"> Locator</a></li><li><a href="support.php">Support</a></li><li class="last"><a href="about-contact.php">Contact Us</a></li></ul> <div id="containermenu"> <ul id="menumain"> <li class="first mainmenu" rel="products"><a href="/solutions.php">Solutions</a> <ul class="submenu" id="subproducts"> <li><a href="/solutions.php">Solutions & Products</a></li> <li><a href="/products.php">ABC </a></li> <li><a href="/products-skin-solutions.php">ABC Skin Solutions</a></li> <!-- <li class="last"><a href="/astrum.php">Astrum™ EHR</a></li>--> </ul> </li> <li class="mainmenu" rel="services"><a href="/services.php">Services</a> <ul class="submenu" id="subservices"> <li><a href="/shared_services.php">Shared Services </a></li> <li><a href="/biomedical.php">Biomedical Engineer & Training Program</a></li> <li><a href="/training.php">Clinical Applications Training </a></li> <li><a href="/warranty.php">Warranty & Maintenance Programs </a></li> <li><a href="/marketing.php">Marketing & Co-Branding </a></li> <li><a href="/commissioning.php">Site Preparation & Commissioning</a></li> </ul> </li> <li class="mainmenu" rel="patients"><a href="/for-the-patient.php">For the Patient</a> <ul class="submenu" id="subpatients"> <li><a href="/patient-health.php">Patient Health </a></li> <li><a href="/prevention.php">Prevention </a></li> <li><a href="/uv-index.php">UV Index </a></li> <li><a href="/testimonial.php">Patient Testimonials </a></li> <li><a href="/resources.php">Clinical Resources</a></li> <li><a href="/articles_posters/posters.php">Articles & Posters </a></li> <li><a href="/clinical_papers_abstract/posters.php">Clinical Papers & Abstracts </a></li> </ul> </li> <li class="mainmenu" rel="doctors"><a href="/for-the-doctor.php">For the Doctor </a> <ul class="submenu" id="subdoctors"> <li><a href="/dermatologists.php">Dermatologists </a></li> <li><a href="/radiation_oncologists.php">Radiation Oncologists </a></li> <li><a href="/shared_services.php">Shared Services </a></li> <li><a href="/therapy-modalities-comparison.php">Therapy Modalities Comparison </a></li> <li><a href="/resources.php">Clinical Resources</a></li> <li><a href="/case-studies.php">Case Studies </a></li> <li><a href="/marketing.php">Marketing & Co-Branding </a></li> <li><a href="/articles_posters/posters.php">Articles & Posters </a></li> <li><a href="/clinical_papers_abstract/posters.php">Clinical Papers & Abstracts </a></li> </ul> </li> <li class="mainmenu" rel="media"><a href="/media-room.php">Media Room</a> <ul class="submenu" id="submedia"> <li><a href="/media-room.php">Media Room</a></li> <li><a href="/multimedia.php">Multimedia</a></li> <li><a href="/news/news.php">News</a></li> <li><a href="/case-studies.php">Case Studies</a></li> <li class="last"><a href="/events.php">Events</a></li> </ul> </li> <li class="last mainmenu" rel="about"><a href="/about.php">About Us</a> <ul class="submenu" id="subabout"> <li><a href="/about.php">About ABC body products</a></li> <li><a href="/about-mission.php">Our Mission</a></li> <li><a href="/about-leadership.php">Leadership Team</a></li> <li><a href="/about-medical.php">Medical Advisory Board</a></li> <li><a href="/about-directors.php">Board of Directors</a></li> <li><a href="/about-partners.php">Partners</a></li> <li><a href="/about-directions.php">Map/Directions</a></li> <li class="last"><a href="/about-contact.php">Contact Us</a></li> </ul> </li> </li> <!-- end header --><script type="text/javascript"> $('#s3').cycle({ fx: 'fade', speed: 4500 }); </script> Quote Link to comment Share on other sites More sharing options...
nogray Posted October 14, 2011 Share Posted October 14, 2011 On the head of your page, add the following <script>document.write('<style>._js_hide{display:none;}</style>');</script> Use the class _js_hide in all the elements you want to hide Quote Link to comment Share on other sites More sharing options...
Divante Posted October 14, 2011 Author Share Posted October 14, 2011 You are a life saver. Thanks a ot problem fixed. :Dl Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.