SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to do that can click the show content part with jquery?

    http://phplist.xxmn.com/menu.html

    When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can't click the link in it. is there a way to get it.i know it will be using setTimeout. but i don't know how to do. thank you.

    when i change the top value small.but under IE7 and IE6.i still can't click the link in the showing content.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by runeveryday View Post
    http://phplist.xxmn.com/menu.html

    When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can't click the link in it. is there a way to get it.i know it will be using setTimeout.
    That technique is where a timer called this.timer is assigned to the menu. That is where you assign the setTimeout function.

    Code javascript:
    this.timer = setTimeout(function () {
        ...
    }, 100);

    The function that you give to setTimeout contains the hide part. The only trouble is that setTimeout forgets what the this value is, so you can deal with that by assigning that=this beforehand, and then using the that variable from within the setTimeout function.

    Code javascript:
    var that = this;
    this.timer = setTimeout(function () {

    Finally, when you hover you want to use clearTimeout on the this.timer value, which ends up canceling the setTimeout that may have earlier been set.

    Code javascript:
    $("#nav ul li").hover(function() {
        clearTimeout(this.timer);
        ...

    Put all that together and you have a good and working solution.
    Last edited by paul_wilkins; May 13, 2012 at 20:45.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i am sorry, i am a newbie of javascript. i still don't know how to do.. i put the following code in. but it doesn't work
    Code:
            var timer;
            $(document).ready(function(){
     $("#nav ul li").hover(function() {
            $(this).find(".sub-menu").show();
            clearTimeout(timer);
        }, function() {
    
            var timer = setTimeout(function(){
                $(this).find(".sub-menu").hide();
            },300);
        });
    
         $("#nav li .sub-menu").hover(function(){
          
             clearTimeout(timer);},
                 function(){
             var timer = setTimeout(function(){
                $(this).hide();
            },300);
         });
    
    
    
    
            });

  4. #4
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That technique is where a timer called this.timer is assigned to the menu. That is where you assign the setTimeout function.

    Code javascript:
    this.timer = setTimeout(function () {
        ...
    }, 100);

    The function that you give to setTimeout contains the hide part. The only trouble is that setTimeout forgets what the this value is, so you can deal with that by assigning that=this beforehand, and then using the that variable from within the setTimeout function.

    Code javascript:
    var that = this;
    this.timer = setTimeout(function () {

    Finally, when you hover you want to use clearTimeout on the this.timer value, which ends up canceling the setTimeout that may have earlier been set.

    Code javascript:
    $("#nav ul li").hover(function() {
        clearTimeout(this.timer);
        ...

    Put all that together and you have a good and working solution.
    [/highlight]

    i am sorry, i am a newbie of javascript. i still don't know how to do.. i put the following code in. but it doesn't work
    Code:
            var timer;
            $(document).ready(function(){
     $("#nav ul li").hover(function() {
            $(this).find(".sub-menu").show();
            clearTimeout(timer);
        }, function() {
    
            var timer = setTimeout(function(){
                $(this).find(".sub-menu").hide();
            },300);
        });
    
         $("#nav li .sub-menu").hover(function(){
          
             clearTimeout(timer);},
                 function(){
             var timer = setTimeout(function(){
                $(this).hide();
            },300);
         });
    
    
    
    
            });

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by runeveryday View Post
    i am sorry, i am a newbie of javascript. i still don't know how to do.. i put the following code in. but it doesn't work
    Here are some notes that might help out:

    Code:
    var timer; // Not needed as it's too global. Better is to place the timer variable as a property on the li element instead
    $(document).ready(function(){
        $("#nav ul li").hover(function() {
            $(this).find(".sub-menu").show();
            clearTimeout(timer); // Needs to refer to this.timer instead of just timer. Also, this maintenance piece of code should be first in the function
        }, function() {
            // you need to add some code here, see below
            ...
            var timer = setTimeout(function () { // Remove the var and use this.timer instead
                $(this).find(".sub-menu").hide(); // major problem here.
                // The timeout function has window scope, so the this keyword refers to the window instead
                // You can fix that problem just before you use setTimeout, by assigning the this keyword to a local variable. That then allows the setTimeout function to access the needed scope
                // which is most easily done by using var that = this
            },300);
        });
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Here are some notes that might help out:


    [/CODE]
    from your tips. i change the code to the following. but when i mouser out the show content, it isn't hidden.

    Code:
    $(document).ready(function(){
        $("#nav ul li").hover(function() {
              clearTimeout(this.timer);
            $(this).find(".sub-menu").show();
    
        }, function() {
            var that = this;
            this.timer = setTimeout(function () {
                $(this).find(".sub-menu").hide();
            },300);
        });
        });

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by runeveryday View Post
    from your tips. i change the code to the following. but when i mouser out the show content, it isn't hidden.
    There's one of the changes that you haven't yet made, and that relates to the setTimeout function.

    SetTimeout executes the function from a global scope, which means that the this keyword refers to the window object. That's why we assign the this keyword to a variable, which we called that, which means that inside of the setTimeout function we should use that variable instead of this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    There's one of the changes that you haven't yet made, and that relates to the setTimeout function.
    i am sorry. i don't know how to do. thank you

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by runeveryday View Post
    i am sorry. i don't know how to do. thank you
    Let's simplify the explanation then.

    Inside of the setTimeout function, the this keyword cannot work properly.
    That this variable needs to be removed, and replaced with the that variable instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Better is to place the timer variable as a property on the li element instead?

    how to define the timer as a property on the li element ?

    $("#nav ul li").hover(function() {
    timer:'';
    am i right?

  11. #11
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    it ok. many thanks.

    but there are something i can't understand well.

    clearTimeout(timer); // Needs to refer to this.timer instead of just timer. Also, this maintenance piece of code should be first in the function


    why using this.timer not timer. and should put it first in the function.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by runeveryday View Post
    why using this.timer not timer
    Because stinky ugly horrible (getting the picture?) global variables are a bad thing.

    It is far better for variables to restrict their scope. In this case, since the this keyword refers to the li element, and the timer is directly in regard to that li element, setting a property on that li element (with this.timer) allows it to easily be accessed by both functions, while at the same time causing less negative impacts than would global variables.

    Quote Originally Posted by runeveryday View Post
    and should put it first in the function
    Yes, you set the property in the second, and make used of it in the first.
    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
  •