I usually put on small bit of js in the head:
<script type="text/javascript">
document.documentElement.className = "js";
</script>
Then hide elements you like in your CSS:
<style type="text/css">
.js element_to_hide {display: none;}
</style>
That way elements are only hidden if the user has JavaScript enabled.
On Mar 16, 6:47 pm, James <james.gp....@gmail.com> wrote:
> Try giving this a
> read:http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-...
>
> On Mar 16, 3:33 pm, jhm <jmay...@gmail.com> wrote:
>
> > I get an annoying flash in IE when I go to a page. I'm wondering if
> > there is a good way around it.
>
> > It's my 2nd & 3rd level navigation. I have a collapsing menu that is
> > intended to only show the 3rd level nav once its corresponding 2nd
> > level is selected. In case javascript is turned off, I have them all
> > visible in my markup, and then hide them on page load. In IE, it shows
> > the expanded menu first then hides them, thus the annoying flash.
>
> > Here's the code:
>
> > $(document).ready( function() {
> > $('.nav3').hide();
> > $('.nav2 li a').removeClass('selected');
> > $('.nav2 li a:first').addClass('selected');
> > });
>
> > Here's the markup:
>
> > <div class="nav2">
> > <ul>
> > <li>
> > <a href="#">Menu One</a>
> > </li>
> > <li>
> > <a href="#">Menu Two</a>
> > <ul class="nav3">
> > <li><a href="#">One</a></li>
> > <li><a class="last" href="#">Two</a></li>
> > </ul>
> > </li>
> > <li>
> > <a href="#">Menu Three</a>
> > </li>
> > <li>
> > <a href="#">Menu Four</a>
> > <ul class="nav3">
> > <li><a href="#">One</a></li>
> > <li><a class="last" href="#">Two</a></li>
> > </ul>
> > </li>
> > <li>
> > <a href="#">Menu Five</a>
> > </li>
> > </ul>
> > </div>
>
> > Anyone see how I could do this better and eliminate the flash?
>
> > Thanks!
