only want my function to take place on larger screens when it is no longer a mobile device

Question

Im having trouble getting this to work, so obviously i'm doing something wrong... I created a fade-in hover state on the submenus of my menu, which works perfectly, but when I scale down to mobile view the effect is still relevant, which I do not want as mobile devices don't have hover state. so I rapped my function in a jquery(window).resize function but then it does not work at all.

jQuery(window).resize(function() {

        var w = jQuery(window).width();

    if (w <= 768 ) {

        jQuery('nav.main-nav li').each(function() {

            var submenu = jQuery(this).find('ul:first');

            jQuery(this).hover(function() {

                submenu.css({opacity: 1});

                submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(300, function() {
                    jQuery(this).css({overflow:'visible', height:'auto', display: 'block'});
                });
            },
            function() {
                submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(300, function() {
                    jQuery(this).css({overflow:'hidden', display:'none'});
                });
            });
        });

    }
});

Just because the width is > 768 means it's not a mobile device? How dare you! I'll have you know I use my Wii on a 480p screen sometimes! — Cole Johnson, Aug 10 '13 at 22:41

score 2 · Accepted Answer · answered Aug 10 '13 at 21:02

2

Instead of using jQuery(window).width();,

try using document.documentElement.clientWidth

answered Aug 10 '13 at 21:02

Alex W

33,401
9
92
97

Thank you very much!!! seems to be doing the trick. I'll have to test it once live. – Gavin Wood Aug 10 '13 at 23:26

only want my function to take place on larger screens when it is no longer a mobile device

1 Answers1