CODEWITHSUNDEEP
javascript
c0d3n4m3
c0d3n4m3

Reputation: 75

window.resize - Won't fire until I've manually changed the browser width

I have a little code snippet here:

$(window).resize(function() {
    if ($(window).width() <= 768) {
            $('.menu-item-810').click(function () {
                $('.squares').slideDown(2000);
            });
        }
    });

That says when the browsers window width is less than or equal to 768px, when you click on the element that has a class of .menu-item-810, slideDown the .squares element.

That is what I want, and it does work.. but only 99.8% correctly.

When the screen width is larger than 768px, the .squares element has a different jQuery effect, it fades in and out, instead of sliding. I needed it to slideDown instead, when in tablet/mobile view, so I wrote the above snippet.

Like I said, it all works, but say I've opened any browser, resized it to 768px or less width, browsed to the site and then click on .menu-item-810. Nothing happens. It's only when I then manually resize the browser again, by any amount, that the jQuery fires. So if I've just resized the browser again, and then click .menu-item-810, the .squares element slides down like expected, but only if I manually resize the browser. I thought that the jQuery would be listening from the start if I wrapped that snippet in $(document).ready() but that doesn't work either, it just has the same behavior as without.

Anyhoo, any help is as always massively appreciated. Hopefully I'm just missing something simple.

Thanks guys!

Upvotes: 0

Views: 464

Answers (3)

Scimonster
Scimonster

Reputation: 33409

In the order of your code, it is first checking the window size, and only then, if it is small, adds your event handler.

It sounds like what you want is to always call the event handler, and then change the action depending on the side.

$(window).resize(function() {
    $('.menu-item-810').click(function () {
        if ($(window).width() <= 768) {
            $('.squares').slideDown(2000);
        }
    });
});

Actually, now that i think some more, you don't even need to set the handler upon resize. Just set it on document load, and check the size when it gets clicked.

$(document).ready(function() {
    $('.menu-item-810').click(function () {
        if ($(window).width() <= 768) {
            $('.squares').slideDown(2000);
        }
    });
});

Upvotes: 0

Starscream1984
Starscream1984

Reputation: 3062

Once your javascript has loaded, it needs a resize event to fire in order to trigger your code. - it doesn't know if the window has been resized prior to the handler being initialised.

Put the same snippet in your document.ready() function to do an initial check for window size:

$(document).ready(function() {
    if ($(window).width() < 768) {
        $('.menu-item-810').click(function () {
            $('.squares').slideDown(2000);
        });
    }
});

Upvotes: 0

adeneo
adeneo

Reputation: 318202

Actually, this makes no sense? The resize event handler fires thousands of times when the window is resized, and binding a click event handler inside the resize handler will get you thousands of click handlers.

Attach one single click handler, and check the windows width inside it

$('.menu-item-810').click(function () {
    if ($(window).width() < 768) {
        $('.squares').slideDown(2000);
    }
});

Upvotes: 1

Related Questions