SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    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,702
    Mentioned
    101 Post(s)
    Tagged
    4 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
    437
    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
    437
    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,702
    Mentioned
    101 Post(s)
    Tagged
    4 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
    437
    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,702
    Mentioned
    101 Post(s)
    Tagged
    4 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


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
  •