Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Duane Fouche
Duane Fouche
8,934 Points

$(window).resize causing 'lingering' code (duplicating function every time it is run).

Got a bit of a weird scenario here, I'm trying to create a Jquery statement for a dropdown menu that should only run when a certain condition is met (in this case, when the window is bigger than a certain size, which I am checking by using the flex direction of my menu).

Here is the code I am using:

function dropdown() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.dropdown-content').slideDown(300);
            console.log("Dropdown SlideDOWN");
        },
        function(){
            $(this).children('.dropdown-content').slideUp(300);
            console.log("Dropdown SlideUP");
        })
};

function checkSize(){
    if ($("#top-menu").css("flex-direction") == "row" ){
       dropdown();
    }
}

$(function() {
    checkSize(); //Check size on page load
    $(window).resize(checkSize); //Check size on resize
})

The problem I am encountering with this code is that once the condition has been true once, it is true forever - IE: If I resize the window until it is big enough to trigger the dropdown code, when I then lower the size the code still runs. In fact, the $(window).resize function seems to duplicate the dropdown code every time it is successful (I can see multiple "SlideUP" and "SlideDOWN" events logged for each hover).

Is there any way I can get this so that it disables again once the condition is false?

2 Answers

Jake Lundberg
Jake Lundberg
13,965 Points

This is occurring because you are not disabling the drop-down when the window becomes too small. As soon as your dropdown function is called, the hover declaration remains permanently. To fix this, I would add the following: 

function dropdown() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.dropdown-content').slideDown(300);
            console.log("Dropdown SlideDOWN");
        },
        function(){
            $(this).children('.dropdown-content').slideUp(300);
            console.log("Dropdown SlideUP");
        })
};

function removeDropDown() {                  
    $('.dropdown').hover(                           
        function(){                                           
            //do something else here...            
        },                                                       
        function() {                                      
            //do something else here....        
        }                                                        
    )                                                          
}                                                                   

function checkSize(){
    if ($("#top-menu").css("flex-direction") == "row" ){
       dropdown();
    } else {                                                       
       removeDropDown();                             
    }                                                                
}

$(function() {
    checkSize(); //Check size on page load
    $(window).resize(checkSize); //Check size on resize
})

this is just what I would do...but whatever you do, you have to find a way to remove the dropdown effect on resize once the window becomes too small.

Hope this helps!

Duane Fouche
Duane Fouche
8,934 Points
Duane Fouche
Duane Fouche
8,934 Points

Thanks, that got me on the right track!

I couldn't figure out a way to remove the dropdown function, but I have managed to solve the problem by changing my syntax slightly so that the IF statement is inside the hover event. If I can't disable the hover event, then just make the check inside the hover event instead! Here's my current (working as intended) code:

($(function dropdown() {
    $( '.dropdown' ).hover(
        function(){
            if ($("#top-menu").css("flex-direction") == "row" ){
                $(this).children('.dropdown-content').slideDown(300);
                console.log("Dropdown SlideDOWN");
            }
        },
        function(){
            if ($("#top-menu").css("flex-direction") == "row" ){
                $(this).children('.dropdown-content').slideUp(300);
                console.log("Dropdown SlideUP");
            }
        }
    )
}));

I would have liked to have only a single if statement, but that doesn't seem possible with a hover event (at least in my limited experience and failed attempts thus far).

PS: Where did you figure out how to markdown on this forum correctly? The markdown cheatsheet is broken, so I haven't even managed to find out how to separate my paragraphs correctly (among other things).

Jake Lundberg
Jake Lundberg
13,965 Points

Oh man, clearly I need more coffee...I should have suggested that to begin with! haha Glad you got it fixed though!

In order to get your markdown to be displayed like I did, you follow your first 3 back ticks with the name of the name of the language you are using (with no space in between the back ticks and the name)

so if you want to display javascript, for example, do this:

//```javascript
//     [your code goes here]
//```