problem with window.onresize ()

Question

problem with window.onresize ()

Navigation

#1 by (0 votes)

0

I'm creating a responsive dropdown menu using the same html structure (without creating a structure larger than 1024 and one less than 1024), by clicking on the dropdown menu icon ul ul appears, but if I leave the open menu smaller than 1024 and increase the screen, the menu disappears (because of the jquery that uses display none to hide), I did the following routine in jquery:

window.onresize = function () {
    if ($(window).width() > 1008) {
        $(".nav ul").css("display", "block");
        $(".nav").removeClass("menu_responsive");
        $(".ico_menu_dropdown").removeClass("ico_menu_aberto");
    }
    else {
        $(".nav ul").css("display", "none");
    }
}

But when I enter the cell phone and give a scrol down (with the menu open) the menu hides. From what I understand jquery is understanding onresize as a scroll. Has anyone had the same problem?

html jquery css3

asked by anonymous 14.03.2016 / 19:25

1 answer

video without sound on iOS Delphi android optimize image upload

score 0 · Answer 1

function verificar_tamanho(){
  var tamanho_largura = $(window).width();
    if (tamanho_largura > 1008) {
    executa o codigo;
    }else{
    executa codigo;
    }
}
$(window).resize(function () {
    verificar_tamanho();
});
$(document).ready(function () {
    verificar_tamanho();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Youcanusethefunctionabovetocheck,itwillperformthefunctionwhenloadingthedocumentandwhentochangethewidthofthescreen.Youcanalsousemediascreen.

@media screen and (max-width: 1024){
  .div_display{
    display: none;
  }
}
@media screen and (min-width: 1024){
  .div_display{
    display: block;
  }
}