Thread: only allow script to function depending on screen size, check on resize

Hi all,

I'm currently working on re-designing our sites navigation to work better with mobiles. We are using the bootstrap framework and at present when a user hovers over the menu it shows the dropdown. They can also click the section and it will toggle the dropdown. This is great but on mobiles we want to disable this functionality so that it must be clicked to toggle rather than hover.

The hover code that we use is below:

Code:

<script type="text/javascript">
$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});
</script>

Can anyone advise how we go about disabling this code if on a mobile device i.e bootstraps "xs" size and possibly "sm".

We would ideally also like it to check whether it should be enabled or disabled if the browser is resized.

Any help would be greatly appreciated.


Tim