Thanks for the explanation, Kevin!
Rick
On Wed, Apr 29, 2009 at 12:58 PM, Kevin Dalman <kevin.dal...@gmail.com>wrote:
>
> Hi Rick,
>
> Karl's suggestion seems the most elegant (assuming it works OK).
>
> Here is some sample code for what he is suggesting....
>
> -- in HEAD or a stylesheet...
> body.js #media-gallery ul li img {
> /* opacity *may* work better than display:none */
> opacity: 0.01;
> filter: alpha(opacity=1);
> }
>
> And in your JS...
> $(function() {
> $("#media-gallery ul img").fadeIn(2000);
> });
>
> Then add this JS to your HTML - immediately after the BODY tag...
>
> <body>
> <script type="text/javascript">
> document.documentElement.className = "js";
> -OR-
> $('body').addClass("js");
> </script>
>
> In theory, the images will only be hidden (1% opacity) if Javascript
> is enabled, because otherwise BODY will not have the 'js' class,
> therefore your CSS rule will not have any effect. Since you are adding
> the class *before* the images are added to the DOM, they should load
> transparent. And because they are not 'hidden' (display:none), the
> images will still take up their normal space when loading, instead of
> making the page 'jump' they they are made visible.
>
> /Kevin
>
>
> On Apr 28, 4:26 am, Rick Faircloth <r...@whitestonemedia.com> wrote:
> > >> In the <head> you can do this:
> > >> <script type="text/javascript"> document.documentElement.className =
> > 'js';</script>
> > >> Then you can set styles for elements as descendants of .js.
> >
> > Karl...will you explain a little more about what this means and perhaps
> give
> > an
> > example of its implementation? Or is there a blog or tutorial somewhere?
> >
> > Thanks,
> >
> > Rick
>
>
--
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
"It has been my experience that most bad government is the result of too
much government." - Thomas Jefferson
