SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,631
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    How to jQuery show img 5 secs after page load?

    How to jQuery show img 5 secs after page load? Using some code I found at stackoverflow I'm trying to use the following but its not working. What am I missing? Thanks!

    $(document).ready(function () {
    $('#paint').show(10000); // 10 seconds
    });

    <a href="#" id="paint"></a>

    #paint {
    position:absolute;
    top:0;left:0;
    height:30px;width:30px;
    background:url(paint.png);
    opacity:0;
    }

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    How to jQuery show img 5 secs after page load? Using some code I found at stackoverflow I'm trying to use the following but its not working. What am I missing? Thanks!

    Hey there EricWatson,

    Your element has an opacity of 0, but it's display property isn't set, which is what the .show() method changes by default, when a time is passed in it affects the width/height/opacity/display properties.

    If you'd want to show something 5 seconds after page load try doing something like this:

    Code javascript:
    $(document).ready(function () {
        setTimeout(function(){
            $('#paint').fadeIn(500);
        }, 5000);
    });

    And change your CSS slightly to not use opacity but rather the display property

    Code css:
    #paint {
        position:absolute;
        top:0;
        left:0;
        height:30px;
        width:30px;
        background:#000;
        display: none;
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,631
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. You wouldn't happen to know how it should look would you if I wanted jquery to hide the image first then show it 5 seconds after page load? That way I can get rid of the CSS display none and degrade well. Thanks!

    And will jquery hide before the image loads? So no flash of unstyled content.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thank you so much. You wouldn't happen to know how it should look would you if I wanted jquery to hide the image first then show it 5 seconds after page load? That way I can get rid of the CSS display none and degrade well. Thanks!
    The way I often take care of that is by placing a class on the <html> element called "no-js", then in the <head> you can add some JS that adds a "js" class. This way you can target JS dependant things in your CSS.

    e.g. something like this:
    HTML Code:
    <html class="no-js">
    <head>
        ...
        ...
        <script src="jquery.js"></script>
    
        <script>
            $("html.no-js").attr("class", "js");
        </script>
    
    </head>
    ...
    Then in your CSS:
    Code css:
    #paint {
      /* normal CSS styles */
    }
     
    .js #paint { /* JS dependant styles */
      display:none;
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,631
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    cool cool. getting somewhere! Ok whats better? And whats the dif between setTimeout and .delay?

    1)

    #paint {
    display:none;
    }

    then the html.no-js bit

    $(document).ready(function () {
    setTimeout(function(){
    $('#paint').fadeIn(200);
    }, 3000);
    });

    or

    2)

    $(document).ready(function() {

    // Hide the div
    $("#paint").hide();

    // Show the div in 5s
    $("#paint").delay(3000).fadeIn(100);

    });

    or

    3)

    $(document).ready(function(){
    var hiddenDiv = $("#hideMe");
    var show = function() {
    hiddenDiv.fadeIn();
    };

    hiddenDiv.hide();
    setTimeout(show, 5000);

    });

    all three work.

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    all three work.
    Yup, they all more or less do the same thing

    Quote Originally Posted by EricWatson View Post
    cool cool. getting somewhere! Ok whats better? And whats the dif between setTimeout and .delay?
    In this case, it doesn't matter too much which you use, as you already found out, there are multiple ways to accomplish this.

    The main difference between setTimeout() and .delay() is that setTimeout is a build in JavaScript function and .delay() is a jQuery method that delays a queue.

    Reading the jQuery.delay() documentation might help clear it up a little too. As a general rule, you should probably only use .delay() with jQuery animations and other queue-able things.

    setTimeout is JavaScript's built in method to execute a piece of code after a specific time, which offers more versatility and importantly, you can cancel a setTimeout (which you can not do with jQuery.delay()).
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,631
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    So your saying you prefer the settimeout here?

  8. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    So your saying you prefer the settimeout here?
    I'd probably prefer the setTimeout in this use case as it clearly indicates what the code is going to do. So when someone else reads this code is it very clear that it says "execute this code here after a delay of xxx milliseconds".
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,631
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the assistance. I went with the adding a class to the html for display none. I found the all in one way showed the image for a split second first. Not good. And I use this html methos. Unless I'm misssing something its the same but without the premeditated added the class js-off in the html.

    // Add .js to html tag if js ON
    $('html').addClass('js');


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
  •