SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up setTimeout Method

    Hi,

    Relatively new to javaScript.

    I tried to put a timer on the on the code below so the mouseenter event handler doesn't fire for a couple of seconds. I understand the abstract of the setTimeout method, but I cannot figure out how to incorporate it into this code. And I screw it up every time I try.

    I am trying to animate (increase) the height of the pageFooterContent div on mouseenter, and decrease it on mouseleave. Here is the page on which I would like to do this http://galileedetroit.org/index2.php. Pertinent code is below. Any help would be greatly appreciated.

    HTML

    Code:
    <!-- BEGIN PAGE FOOTER -->
    <footer id="pageFooter">
    <!-- BEGIN PAGE FOOTER CONTENT -->
    <div id="pageFooterContent">
    </div>
    <!-- END PAGE FOOTER CONTENT -->
    </footer>
    <!-- END PAGE FOOTER -->
    CSS

    Code:
    #pageFooter {
    	width: 100%;
    	background-color: #666;
        position: fixed;
    	bottom: 0;
        /*height: 60px !important;*/
        z-index:100;
    }
    
    #pageFooterContent {
    	width: 1100px;
    	margin: 40px auto 0;
    	background-color: #FFF;
    }
    JavaScript

    Code:
    <script>
    $('#pageFooter').mouseenter(function() {
      $('#pageFooterContent').animate({
        height: '250'
      }, 1000, function() {
        // Animation complete.
      }); 
    })
    
    $('#pageFooter').mouseleave(function() {
      $('#pageFooterContent').animate({
        height: '0'
      }, 1000, function() {
        // Animation complete.
      });
    })
    </script>
    Thank you.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,
    With jQuery, you can use .delay() to achieve the desired effect.
    This should do what you want (where the delay is in milliseconds):

    Code JavaScript:
      $('#pageFooter').mouseenter(function() {
        $('#pageFooterContent').delay(2000).animate({
          height: '250'
        }, 1000, function() {
          // Animation complete.
        }); 
      })
     
      $('#pageFooter').mouseleave(function() {
        $('#pageFooterContent').delay(2000).animate({
          height: '0'
        }, 1000, function() {
          // Animation complete.
        });
      })

  3. #3
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,
    With jQuery, you can use .delay() to achieve the desired effect.
    This should do what you want (where the delay is in milliseconds):

    Code JavaScript:
      $('#pageFooter').mouseenter(function() {
        $('#pageFooterContent').delay(2000).animate({
          height: '250'
        }, 1000, function() {
          // Animation complete.
        }); 
      })
     
      $('#pageFooter').mouseleave(function() {
        $('#pageFooterContent').delay(2000).animate({
          height: '0'
        }, 1000, function() {
          // Animation complete.
        });
      })
    Hey! I appreciate the suggestion. I did use the delay() method before. That was one of my first ideas. But the problem is that the function "remembers" the mouseenter event no matter how quickly it happens. If I pass my mouse over the pageFooter div, the function just fires after 2000 ms, no matter where I may be on the page thereafter. I have seen a timer used on something like this before. Check out the code below. I tried to modify this code to do what I wanted it to do, but I kept screwing it up. Remember, I am using animate versus hide/show, and versus slideUp/slideDown.

    Code HTML:
    <div id="NewsStrip">NewsStrip</div>
    <div id="SeeAllEvents">SeeAllEvents</div>

    Code CSS:
    #NewsStrip {
        height: 80px;
        background: red;
    }
    #SeeAllEvents {
        height: 80px;
        background: gold;
    }

    Code javaScript:
    $(function() {
        $("#SeeAllEvents").hide();
        var timeoutId;
        $("#NewsStrip").hover(function() {
            if (!timeoutId) {
                timeoutId = window.setTimeout(function() {
                    timeoutId = null;
                    $("#SeeAllEvents").slideDown('slow');
               }, 1000);
            }
        },
        function () {
            if (timeoutId) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
            }
            else {
               $("#SeeAllEvents").slideUp('slow');
            }
        });
    });

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Dude / dudette,

    I iz sorry. It haz been a long day.
    Try the following codes. They should work:

    Code JavaScript:
    var mnuTimeout = null;
    $('#pageFooter').mouseenter(function(){
      clearTimeout(mnuTimeout);
      mnuTimeout = setTimeout(function(){$('#pageFooterContent').animate({height: '250'}, 1000); },2000);
    });
     
    $('#pageFooter').mouseleave(function(){
      clearTimeout(mnuTimeout);
      mnuTimeout = setTimeout(function(){$('#pageFooterContent').animate({height: '0'}, 1000); },2000);
    });

  5. #5
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Lol... it's dude. I really appreciate your help. It works like a charm. Does the site moderator mark these as "solved" or do we have to do that? Thx!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gilmeragency View Post
    Lol... it's dude. I really appreciate your help. It works like a charm. Does the site moderator mark these as "solved" or do we have to do that? Thx!
    Most of the time that's not done - but I'll add a thumbs-up icon to the thread for you
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I'm glad I joined.


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
  •