Search jQuery

jQuery Forum

if screen size

in Using jQuery • 4 years ago

I have the following code:

$('ul.nav li ul').hide();
        $('ul.nav > li').hover(function () {
        if ($(this).find('ul').length > 0) {
            $(this).find('ul').stop().slideDown('fast');
        }
        },function () {
            if ($(this).find('ul').length > 0) {
                $(this).find('ul').stop().slideUp('fast');
            }
        });

But i dont want it to execute if my screen size is below 560px, is there a way I can do this? I tried wrapping
      if ($(window).width() > 560) {

}

around it but it doesn't make a different, not sure if it's because I've got an if within an if..

Can anyone help??

Kelly

Replies(4)

kbwood.au

Re: if screen size

4 years ago

Did you wrap the entire hover or the internals of its functions? Did you resize the page dynamically or reload the page at the new size?

You should wrap the internals to check with the current window size, rather than just at load time.

function slideIfWide(elem, slideDir) {
if ($(window).width() > 560) {
var ul = elem.find('ul');
if (ul.length > 0) {
ul.stop()[slideDir]('fast');
}
}
}
$('ul.nav > li').hover(function () {
slideIfWide($(this), 'slideDown');
}, function () {
slideIfWide($(this), 'slideUp');
});

macpheek

Re: Re: if screen size

4 years ago

Ah yes that worked thanks so much!

Basically what I want is if the screen size is below 560px, the parent li must be clicked instead of hovered over to display the sub menu, can this be done?

Also how can I add an arrow icon if the li contains a child sub menu?

I appreciate your help :-)

kbwood.au

Re: if screen size

4 years ago

When generating your page add a class to those li that have a child ul. Then style that class to include the icon using a media query.

@media (min-width: 560px) {
.hasSubMenu::after {
content: '>';
}
}

<ul>
<li class="hasSubMenu">
More options
<ul>
<li>Sub option</li>
</ul>
</li>
</ul>

gautamx07

Re: if screen size

4 years ago

You might want to consider using , since its native Javascript code and also has good browser support:

window.matchMedia("(min-width: 560px)").matches

Also what if the device is a Touch/Mobile device , what if its a larger ipad , you're hover will no longer work , or when the user clicks , the anchor tag the page will reload , you might want to consider userAgent detection , to see if the device is really a mobile...

Mobile detection

UserAgent detection is generelly fragile code but it fits the use case since feature detection(usually the better alternative) ... throws false positives.

Top Reply

Response title

Attachments

jQuery Forum

if screen size

Replies(4)

Re: if screen size

Re: Re: if screen size

Re: if screen size

Re: if screen size

Statistics

Tags

Actions