jQuery - execute scripts based on screen size while resizing the window without refrehing?

Question

If someone can help me please?

I have coded a responsive layout, in big screen is one type of menu, in small another. here is the jquery code:

if($(window).width() < 480){
        $('.menu_items').fadeOut(0);
        $('.menu-bar').click(function(){ 
            $('menu_items').fadeToggle(500 , "swing");
            });
        $('.menu_item').click(function() {
            $('menu-bar');
            });

    } else {

    $('.menu_items').fadeOut(0);
        $('.menu-bar').hover(function(){
            $(this).children().fadeIn(100, "swing");
            },function(){
                $(this).children().fadeOut(400, "swing");
                }).triger('mouseleave');
            };

this work fine! In screen size 480x320 resolution and below is active the first one function, resolution bigger then 480px is active the second one.

Here is the problem: when I resize the window beyond the braking point (480px) there is still active the first function when I've load the html.

I must reload the page to make the the right function active.

check the size inside the click handlers and react accordingly — charlietfl, Jan 17 '15 at 18:05
charlietfl, same problem The browser won't refresh the script, $( window).resize(function() { ... this one won't do anything before I resize by one pixel the window also I must manually refresh the browser. — Diego Martincic, Jan 18 '15 at 22:16

score 0 · Answer 1 · answered Jan 17 '15 at 17:52

0

have you tried wrapping it in the jQuery resize function?

https://api.jquery.com/resize/

answered Jan 17 '15 at 17:52

pensan

420
8
11

score 0 · Answer 2 · edited May 23 '17 at 12:20

Use window.resize:

window.onresize = function(event) {
    if($(window).width() < 480){
    $('.menu_items').fadeOut(0);
    $('.menu-bar').click(function(){ 
        $('menu_items').fadeToggle(500 , "swing");
        });
    $('.menu_item').click(function() {
        $('menu-bar');
        });

} else {

$('.menu_items').fadeOut(0);
    $('.menu-bar').hover(function(){
        $(this).children().fadeIn(100, "swing");
        },function(){
            $(this).children().fadeOut(400, "swing");
            }).triger('mouseleave');
        };
};

JavaScript window resize event

score 0 · Answer 3 · answered Jan 17 '15 at 17:54

JQuery has a function .resize that is called whenever element is rezised. You should be able to use it as follows:

$( window).resize(function() {
    if(this.width() < 480){
      $('.menu_items').fadeOut(0);
    $('.menu-bar').click(function(){ 
        $('menu_items').fadeToggle(500 , "swing");
        });
    $('.menu_item').click(function() {
        $('menu-bar');
        });

  } else {

    $('.menu_items').fadeOut(0);
       $('.menu-bar').hover(function(){
         $(this).children().fadeIn(100, "swing");
         },function(){
            $(this).children().fadeOut(400, "swing");
            }).triger('mouseleave');
         };"
    });

jQuery - execute scripts based on screen size while resizing the window without refrehing?

3 Answers3