Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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">
    <div id="pageFooterTop"></div>
    <!-- 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>
    var timeoutId;
    $('#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
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    I am trying to animate (increase) the height of the pageFooterContent div on mouseenter, and decrease it on mouseleave.
    you can do that in css:
    Code:
    #pageFooter #pageFooterContent {
    	     -o-transition-property:"height" ;
    		   -moz-transition-property:"height" ;
    		-webkit-transition-property:"height" ;
    		        transition-property:"height" ;
    	     -o-transition-duration:800ms ;
    		   -moz-transition-duration:800ms ;
    		-webkit-transition-duration:800ms ;
    		        transition-duration:800ms ;
    	     -o-transition-delay:500ms ;
    		   -moz-transition-delay:500ms ;
    		-webkit-transition-delay:500ms ;
    		        transition-delay:500ms ;
    	height		 : 0px ; 
    }
    
    
    #pageFooter:hover #pageFooterContent {
    	     -o-transition-property:"height" ;
    		   -moz-transition-property:"height" ;
    		-webkit-transition-property:"height" ;
    		        transition-property:"height" ;
    	     -o-transition-duration:800ms ;
    		   -moz-transition-duration:800ms ;
    		-webkit-transition-duration:800ms ;
    		        transition-duration:800ms ;
    	     -o-transition-delay:500ms ;
    		   -moz-transition-delay:500ms ;
    		-webkit-transition-delay:500ms ;
    		        transition-delay:500ms ;
    	height		 : 250px ; 
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    gilmeragency (10-14-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I appreciate the reply.

    In general, though, what do I gain or lose by doing things like this with CSS vs. JavaScript? Is this a CSS3 thing? If so (and browser prefixes notwithstanding), need I be concerned with any lack of support for this approach?

    Thanks, again!!!
    Last edited by gilmeragency; 10-14-2012 at 08:06 AM.

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    behavior in IE is far different than in Firefox. Seems to me that JS may be the best way to go because of the easing, among other things. what do you think?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    You can use jQuery’s delay() function. And also, it might be desirable to stop() the animation on runtime if necessary.

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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. The nightmare was when I was debugging and quickly passed my mouse back and forth over the pageFooter div like 8 times and then scrolled to the top of the page. The pageFooterContent was bouncing up and down as many times because the function was doing what I told it to do.

    But I found the answer below:

    Code:
    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);
    });
    Regarding the use of the stop() method, now that this is solved, is there any use for it? More clearly, whether it's the stop function or any other approach, do I need to to enhance what I have now? I mean, it does the job, but since I am kind of new to javaScript/jQuery, I want to consider as much as I have to in order to make things the best they can be.

    Thanks everybody!


  •  

    Posting Permissions

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