Remove class using jquery on a certain condition for propery alignment of submenus

Question

I need to remove a certain css class from .nav, so that it comes up properly. Right now its behaviour is unexpected based on different screen sizes.

Fiddle example

Demo View

You will notice that the drop-down sub-menus don't show up properly. I want the dropdown to show on right side of dropdown, when it has enough space on the right, and on the left side of dropdown, when it has less space based on the <div class="main-wrapper"> width, which is 1000px wide.

I tried to fix it with following code but it is not working properly:

$(document).ready(function(){
    $(".nav").on("mouseenter", " > li", function(){

        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
        if($(this).hasClass("has-panel")){
           // $(this).find(".dropdown").removeClass("dropdown-last");
            //alert('has class');
        }
        else
        {
        //alert('has no class');
        }
    });

    /* if dropdnw*/
    $(".dropdown").each(function(){
        var $this = $(this);
        if($this.find(".dd-panel").length > 0){
            $this.addClass('has-panel');

        }


        if($this.find(".dd-panel").length = 1){
           $(".dropdown").css( "min-height", "80px" );
        }
    });
});

On debug, it shows the following as a div class dropdown has-panel dropdown-last if it div with has class has-panel and one which doesnt have mega menu for it show class as dropdown dropdown-last. I was trying to check using jQuery, to see if the element has the class or not. If it has the class has-panel, then do nothing and if it doesn't have the class has-panel, then I need to remove the class dropdown-last from the same element which is not working with following code:

if($(this).hasClass("has-panel")){
   // $(this).find(".dropdown").removeClass("dropdown-last");
    alert('has class');
}
else
{
//alert('has no class');
}

why are you using window.load and document.ready? you need to understand the difference. See: http://stackoverflow.com/questions/8562609/should-i-use-window-load-or-document-ready-jquery using document.ready after window.load will not work as window.load is fired after document.ready — Mike Oram, Oct 02 '13 at 08:53
Why don't you need it? I agree with @MikeOram you DO need it. — CaribouCode, Oct 02 '13 at 09:04

score 0 · Answer 1 · edited Oct 02 '13 at 09:34

0

remove $(window).load(function(){} and it will work

edited Oct 02 '13 at 09:34

Itay

16,601
2
51
72

answered Oct 02 '13 at 09:13

Leonardo Pizzoni

15
6

score 0 · Answer 2 · answered Oct 02 '13 at 10:34

Solved using code

    if( $(this).find(".dropdown").hasClass("has-panel")){
       // $(this).find(".dropdown").removeClass("dropdown-last");
        //alert('has class');
    }
    else
    {
    //alert('has no class');
     $(this).find(".dropdown").removeClass("dropdown-last");
    }

Remove class using jquery on a certain condition for propery alignment of submenus

2 Answers2