Dropdown Hover work just above 1200px

Question

If anyone can help me, I need Hover Javascript to work only at resolution above 1200px, I made the code but it’s not working.

$(function() {
    if($(window).width() > 1200) {
        $('ul.nav li.dropdown').hover(function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(400);
            },
            function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(400);
            });
    }

});

Answer 1

$(document).ready(function(){
    if($(window).width() > 1200) {
        $('ul.nav li.dropdown').hover(function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(400);
            },
            function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(400);
            });
    }

});

If you want to use while vc resizes the window, then va iter que usar o jquery resize

Answer 2

You can check inside the Hover function, and if it is true it does nothing, see the code:

var $meuLink = $('#meuLink');
var $divMostrarOcultar = $('#divMostrarOcultar');

$meuLink
  .on('mouseover', function() {
    var tamanhoJanela = $(window).width();
    if (tamanhoJanela > 1200)
      return;

    console.log('A janela tem ' + tamanhoJanela + 'px');
  })
  .on('mouseout', function() {
    var tamanhoJanela = $(window).width();
    if (tamanhoJanela > 1200)
      return;

    console.log('A janela tem ' + tamanhoJanela + 'px');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="meuLink">Passe o mouse</a>
<div id="divMostrarOcultar">Conteudo a mostrar/ocultar</div>

In this case, if the window is larger than 1200 it will do nothing, but if it is smaller or equal it will print in the browser console the size of the window.

Just a note to your code, prefer to use .on('event' instead of using the event directly. See in that answer the reason.

Now how could it get in your code:

$('ul.nav li.dropdown')
  .on('mouseover', function() {
    if (janelaMaiorQue(1200))
      return;

    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(400);
  })
  .on('mouseout', function() {
    if (janelaMaiorQue(1200))
      return;

    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(400);
  });

function janelaMaiorQue(tamanho) {
  var tamanhoJanela = $(window).width();

  return tamanhoJanela > tamanho;
}