Dropdown hover run only above 1200px

2

If someone can help me, I need the hover JavaScript to work only at resolution above 1200px, I have made the code but it is 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);
            });
    }

});
    
asked by anonymous 19.04.2017 / 21:00

2 answers

0
$(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 it while you resize the window, then it's going to use jquery resize

    
19.04.2017 / 21:05
0

You can do the check inside the hover function, and if true do 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><ahref="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 not do anything, but if it is smaller or equal it will print the window size.

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

Now how could you stay 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;
}
    
19.04.2017 / 21:08