SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Wellington, NZ
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fade in content on page load

    Hi,

    I've created a function to fade in content (a particular div) when the page loads, but I have an issue with it. If javascript is disabled, I want the div to be visible, therefore in the css the div is not hidden and opacity is set to 1 (ie no transparency). My script changes the opacity to 0 when the page loads, and then fades it in to a specified value.

    This works fine, but the problem is that when the page loads, the content is visible for a fraction of a second, then it disappears and fades in as intended.

    How can I get the content to fade in without it being visible for that fraction of a second first.

    Here's my code, I'm using the core library from the book Simply Javascript, and the jQuery library.


    Code JavaScript:
    var FadeIn = 
    {
     
     init: function()
     {
     
      var content = Core.getElementsByClass("fade");
      FadeIn.makeTransparent(content);
     
      $(".fade").fadeTo(3000, 0.9);
     
     },
     
     makeTransparent: function(content)
     {
     
      $(".fade").css("opacity", 0);
      $(".fade").css("filter", "alpha(opacity=0)");
     
     }
     
    };
     
    Core.start(FadeIn);


    Thanks

    Richard.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Core.start waits until the page has finished loading.

    What you want is for the code to run sooner than that. At the end of the body, just before the </body> you should run the script, which will get it going as soon as possible.

    So if the Core.start was done as a separate line from the library itself, here is how the change would look.

    Code html4strict:
    <html>
    <head>
        <script src="fadein.js"></script>
        <script>
            // Core.start(FadeIn);
        </script>
    </head>
    <body>
        <script>
            FadeIn.init();
        </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Wellington, NZ
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, that works a treat!

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Wellington, NZ
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having thought about this a bit more in my sleep (that always works), i realised that I could use $(document).ready() from the jQuery library to do the same thing as Core.start. The advantage is that $(document).ready() waits until the document is ready to be manipulated, whereas Core.start waits until the document has finished loading.

    This means I can modify my code to keep all the javascript within the external .js file, instead of having to put <script> tags before the </body> tag.

    Here's my modified code, hope it helps someone out there


    Code JavaScript:
    var FadeIn = 
    {
     
     init: function()
     {
     
      var content = Core.getElementsByClass("fade");
      FadeIn.makeTransparent(content);
     
      $(".fade").fadeTo(3000, 0.9);
     
     },
     
     makeTransparent: function(content)
     {
     
      $(".fade").css("opacity", 0);
      $(".fade").css("filter", "alpha(opacity=0)");
     
     }
     
    };
     
    $(document).ready(function()
    {
     FadeIn.init();
    });

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You are supposed to place as much of your javascript at the end of the body for performance reasons anyway, but you've found another method that works for youi so rock on.
    Last edited by paul_wilkins; Apr 18, 2008 at 17:29.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •