#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45

    Hide div on click, and then show again after set interval


    Good Afternoon. Wanted to see if any of you had any "best practice" suggestions for me.

    I have two divs of content.

    1. The first div is visible when the page loads, and will remain visible until the user clicks on the div itself.
    2. Once they do that, that div hides and another div appears in it's place, and remains there for a set period of time.
    3. Once that time period has expired, the second div should be hidden, and the original div should return.


    We're using jQuery 1.8.2 on our site. Ideally, the transition between the divs would be a quick fadeIn()/fadeOut(), but I'd be happy with just a simple show()/hide() at this point if it's easier.

    Seems simple enough, but it's the timout/interval thing that is messing me up right now.

    Here's a little snippet of what I've tried so far, without success.

    Code:
    <script type='text/javascript'>
    function switchDiv() {
    	$("#div2").hide();
    	$("#div1").show();	
    }
    
        $("#div1").click(function() {
              $("#div1").hide();
    	  $("#div2").show();
    	  setInterval( "switchDiv()", 5000 );
        });
    </script>
    Last edited by BlackAce; January 2nd, 2013 at 04:17 PM.
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Something like:

    Code:
        $('#firstdivid').click(function () {
            $(this).hide();
            $('#otherdivid').fadeIn('slow', function () {
                $(this).delay(300).hide('fast', function () {
                    $('#firstdivid').fadeIn('slow');
                });
            });
        });
    delay() is used to delay chained-effects on the same element(s). If it doesn't achieve what you require that you may need to use JS setTimeout.
    Last edited by AndrewSW; January 2nd, 2013 at 04:24 PM.
    "The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Originally Posted by AndrewSW
    Something like:

    Code:
        $('#firstdivid').click(function () {
            $(this).hide();
            $('#otherdivid').fadeIn('slow', function () {
                $(this).delay(300).hide('fast', function () {
                    $('#firstdivid').fadeIn('slow');
                });
            });
        });
    delay() is used to delay chained-effects on the same element(s). If it doesn't achieve what you require that you may need to use JS setTimeout.
    Yup, that seems to be working. I know the hide() is shrinking the div down to the top left due to the fact that we had to nest another function inside. Any way to prevent this, and still do the counter? If not, I'm willing to cut my losses, but thought I would ask.

    Thank you for your help!
  6. #4
  7. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    is shrinking the div down to the top left due to the fact that we had to nest another function inside
    I don't quite follow; are you saying you don't want the div to completely disappear from the page?

    If so, you can cheat and put it in another div of fixed width and height; or, better, use animate() to animate the opacity to 0, so that it fades away but is still present on the page.

    If you don't want to use hide() then use css() to, again, set its opacity to 0 or visibility to hidden.
    Last edited by AndrewSW; January 2nd, 2013 at 05:03 PM.
    "The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Originally Posted by AndrewSW
    I don't quite follow; are you saying you don't want the div to completely disappear from the page?

    If so, you can cheat and put it in another div of fixed width and height; or, better, use animate() to animate the opacity to 0, so that it fades away but is still present on the page.

    If you don't want to use hide() then use css() to, again, set its opacity to 0 or visibility to hidden.
    Yes, sorry. Let me clarify. If you simply use hide(), that div disappears from the page instantaneously. If you place any parameters within hide(), such as hide('fast'), instead of disappearing immediately, it animates (i.e. shrinks) down towards the top left corner of the div until it's gone.

    My preference would be that it simply disappear, as the shrinking effect is pretty obvious. But knowing what I know about hide(), i'm not sure there is a way around this.
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    .css('visibility', 'hidden') or display, none..?
    "The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Originally Posted by AndrewSW
    .css('visibility', 'hidden') or display, none..?
    Like this?

    Code:
    $(this).delay(5000).css('display', 'none', function () {
    	$('#firstdivid').fadeIn('slow');
    });
    Not sure if that function will still work based on what I'm reading about the .css().
  14. #8
  15. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    css() doesn't have a callback, so you may have to queue it like this:

    Code:
    $(this).delay(5000).queue(function () {
        $(this).css({"display": "none"});
        $(this).dequeue();
        $('#firstdivid').fadeIn('slow');
    });
    "The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Boy, you know your stuff! I just don't use it enough to remember all the little nuances. I really appreciate it.

    I read up on .delay(), so now I'll look into queue().

    Thanks again!
  18. #10
  19. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Originally Posted by BlackAce
    Boy, you know your stuff! I just don't use it enough to remember all the little nuances. I really appreciate it.

    I read up on .delay(), so now I'll look into queue().

    Thanks again!
    He, he! I don't use jQuery that often but (the secret is..) I know JavaScript. Most of the time I just search the jQuery docs in order to answer questions .

    Good luck!
    "The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs

IMN logo majestic logo threadwatch logo seochat tools logo