Develop Reference

Run jQuery script on load and on resize for responsive

I have a script for my dropdown menu. I would like the responsive (1024px) it turns off. And when I enlarge my window, he reactivates.
I managed to do more or less something that worked:
$(window).resize(function () {
if ($(this).width() > 1024 ){
w.accessibleMenuConfig.init();
}
});
Unfortunately, with this solution, when I load my page in desktop mode (> 1024px), I have to resize my window (one pixel is enough) to activate the script.
And if I shrink my window (I switch from desktop mode to mobile mode), the script is activated on mobile.
I tried this, but it does not work at all :
$(window).on('load resize', function (e) {
if ($(window).width() > 1024 ){
w.accessibleMenuConfig.init();
}
})
Thank you for your help !

You need to handle both page load and resize events for this to work.
I would start with creating a function that does that logic:
function changeAccessibility() {
if ($(window).width() > 1024 ){
w.accessibleMenuConfig.init();
}
}
Then, call the function on each of these events (window resize and window load - the latter happens only once).
$(document).ready(function() {
changeAccessibility();
});
$(window).resize(function () {
changeAccessibility();
});

The resize event is sent to the window element when the size of the browser window changes.
$( window ).resize(function() {
enter code here
});
Check this: https://api.jquery.com/resize/

If condition inside function called on resize not working properly

I have the following code:
var hoverList = function(){
var width = $(window).width();
console.log(width);
if(width > 992) {
$( ".dropdown" ).mouseover(function() {
$(this).addClass('open');
});
$( ".dropdown" ).mouseleave(function() {
$(this).removeClass('open');
});
}
}
//call function on load and page resize
$(window).on('load', hoverList);
$(window).on('resize', hoverList);
this code will add an open class to the dropdown class` only when the window width is less than 992px, since I want users to hover the menu on desktop but to click the mobile version of the navigation on mobile. And this kid of works, if I refresh the page on a size less than 992 and hover an li element the navigation does not toggle, then if I resize the window to be larger than 992px and hover an li element the navigation does toggle, but then if I go back to less than 992 and hover the li, this time the navigation toggles, I have no idea what might be causing this behavior, I''ve seen some questions similar to this one on SO but they did not help.
I would appreciate any help, thanks.
these are the questions that I foud but were not helpfull
if condition always work inside $(window).resize function
Problem with function within $(window).resize - using jQuery

I think you may be better of doing it this way:
$( ".dropdown" ).mouseover(function() {
if($(window).width() > 992) {
$(this).addClass('open');
}
});
$( ".dropdown" ).mouseleave(function() {
if($(window).width() > 992) {
$(this).removeClass('open');
}
});
Just for completeness, your code did not behave the way you expected it because you never removed the event listener. So when you make the window big enough to add the event listener and then small enough to not want it you have to remove it. Here is an example using nampespaced events so when removing events I won't blast away all events (other code may still need the listeners)
var hoverList = function(){
var width = $(window).width();
console.log(width);
if(width > 992) {
$( ".dropdown" ).on("mouseover.autoopen",function() {
$(this).addClass('open');
});
$( ".dropdown" ).on("mouseleave.autoopen",function() {
$(this).removeClass('open');
});
}else{
$(".dropdown").off("mouseleave.autoopen").off("mouseover.autoopen);
}
}
//call function on load and page resize
$(window).on('load', hoverList);
$(window).on('resize', hoverList);

try writing the else condition too. whats happening is the if condition is only working when the width is greater than 992.

Window resize menu bug

desktop view
desktop view when menu item has been clicked on mobile and then resized to desktop
I have an inline menu on top of the page, which transforms to "hamburger" icon with a drop-down menu when on mobile.
Here is the Jade
i.fa.fa-bars.fa-2x.header__icon.js-nav-toggle
nav.header__nav.js-nav(role="navigation")
ul
li.header__nav__item
a.js-track(href="#about", data-item="about") About
li.header__nav__item
a.js-track(href="#features", data-item="features") Benefits
li.header__nav__item
a.js-track(href="#howitworks", data-item="howitworks") How it works
li.header__nav__item
a.js-track(href="#options", data-item="options") Lease options
li.header__nav__item
a.js-track(href="#savings", data-item="savings") Savings
li.header__nav__item
a.js-track(href="#enquire", data-item="enquire") Enquire
li.header__nav__item.faq-menu
a.js-track(href="/faq") FAQs
In css I'm doing this transformation using media queries, so the icon appears.
+ I have some jquery to make it work (to make dropdown toggle when clicked on the menu icon on mobile view, toggle back when menu item is clicked, and condition to prevent toggling when menu item is clicked on desktop view).
So, here is the code:
$(document).ready(function() {
$('.js-nav-toggle').on('click', function(e) {
$('.js-nav').slideToggle(300);
e.preventDefault();
});
if ($(window).width() < 768) {
$('.header__nav__item').on('click', function(e) {
$('.js-nav').slideToggle(300);
});
}
});
The problem is that all that works perfectly only when page is loaded and not resized (laptop or mobile). But when you loaded the page on a wide window and then resized it to mobile it becomes bad. In this case it's not toggling back when I click any of the menu items (that's obvious as my jquery is only for "document ready".
And visa versa (when you resize from mobile to laptop view) incorrect behavior (if you clicked some menu on mobile the whole ul disappears (toggled) into nothing).
I tried to put the same jquery code to "on window resize" jquery handler, however it does not help.
$window.on('resize', function() {
if ($(window).width() < 768) {
$('.header__nav__item').on('click', function(e) {
$('.js-nav').slideToggle(300);
});
}
}, 150);
My assumption was that it should help at least when I resize from big screen to small. But...fail...
One more comment: every menu item just scrolls the page down to some section (one-page web-site), so the page is not reloaded.
Any thoughts and help are appreciated.
Thank you.
UPDATE
Added screenshots
Thanks to the answer below, the following code fixed the problem with desktop --> mobile resize.
$('.header__nav__item').on('click', function(e) {
if ($(window).width() < 768) {
$('.js-nav').slideToggle(300);
}
});
Tried to fix mobile --> desktop with the following code
$window.on('resize', function() {
if ($(window).width() >= 768 && ($('.js-nav').is(':hidden'))) {
$('.js-nav').html('Show all');
}
}, 150);
Does not work, even with $('.js-nav').show()
However, I've found another question, which is similar, and will try to restructure the code the same way soon (that will answer my question completely)
Display or hide elements on window resize using jQuery

I'm not sure if I fully understood your requirements, but at least to deal with the window resize problem that you stated here is a possible solution. You don't need to bind an event handler to resize event on window, just put your if statement that checks for current window width inside of your on click handler function:
$('.header__nav__item').on('click', function(e) {
if ($(window).width() < 768) {
$('.js-nav').slideToggle(300);
}
});
This way every time you click the window width will be checked dynamically.

2 Liner in Vanilla JS:
navbar.addEventListener('click', function() {
return (window.innerWidth <= 992) ? mob_navbar.classList.toggle('show') : null;
});

Window resize function

I have created a hamburger menu, which drops down fine, but if I maximize the window again, the ul lists remain hidden as they maintain the "display none" status.
I know I should add a window resize function, but I am not sure how.
How can I fix this?
This is the coding:
$(document).ready(function (){
$('.nav-btn').on("click", function() {
$('.hamburger').slideToggle("slow");
});
});
Thank you.

On resize if window width is bigger than 992 will remove styles added.
$(window).resize(function() {
if($(window).width() > 992) {
$(".hamburger").removeAttr("style");
}
});

Call or Uncall function after resize or orientation changee

I'm working on a mobile web project that goes between a two column or single column view based on screen size. For some device sizes, changing from portrait to landscape switches you between the single and double column. Across the bottom of the page there are three feature images that are side by side for two column view, but we want to turn into a content slider in single column.
My issue:
The javascript conditional I have calls the function when the width of the screen is below a certain width. However if you change the orientation/size of the screen, it doesn't recall the function or re-evaluate the screen width.
What I have:
if( $(window).width() < 570) {
$(window).load(function() {
$('.flexslider').flexslider();
});
}
What is the best way to watch for resize and call/recall the function after the resize event?

Use jQuery resize event on window. jsfiddle
$(window).resize(function(){
//your code
});

To follow on from what Shusl said, you need to create the functions within $(window).resize();
What I would do is create the function and be sure to trigger it too. So it would be something like -
$(window)resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if (winWidth < 570) {
$(window).load(function() { $('.flexslider').flexslider(); });
}
else {
// do something else
}
}).trigger("resize");