Window resize function - javascript

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");
}
});

Related

Bootstrap 3.0 Second level dropdown in mobile

I have a customized bootstrap 3.36 menu. for desktop I changed onclick functionality to onhover. Now the problem is with mobile menu.
Below I have a short bit of my jquery code which I found and I have changed the code to meet my needs. However when I resize the window greater than 992px then I resize the window smaller than 992px the script stops running. I know I need an else statement to offset this behavior but I'm not sure what to put in the else statement. Any help will be greatly appreciated! Thanks!
$(document).ready(function () {
function checkWidth() {
var windowWidth = $(window).width();
if (windowWidth <= 992) {
$('ul.nav li > a.nav-dropdown').click(function () {
$(this).parent().toggleClass("open");
$(this).removeAttr("href");
});
}
else {
}
}
checkWidth();
$(window).resize(checkWidth);
});

window.resize not on scrolling

i have a jQuery code that slide/toggles the navigation. After that I reset the style-attribute in the HTML, with window.resize, so that the Navigation will appear, if the browser-window is resized. The code for that is here:
$(window).resize(function(){
$("nav").removeAttr('style');
$(".level_2").removeAttr('style');
$(".menu-expander").removeClass('close');
});
Now I have the problem, that the navigation is displayed off, when I scroll down on the smartphone or change from the portrait-view to landscape, e.g. when I have a long navigation.
Is there a possibilty to check, if there was just changed the view or was scrolled on the page, so that the window.resize could just appear when the browserwindow is resized?
PS: Here is the code on Codepen: http://codepen.io/Sukrams/pen/NxQoYr
I found a solution: I set a variable for the width and put it into an if:
$(window).resize(function(){
var width = $(window).width();
if(width > 700) {
$("nav").removeAttr('style');
$(".level_2").removeAttr('style');
$(".menu-expander").removeClass('close');
}
});

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;
});

Prevent bourbon/refill sliding menu from operating at a specific breakpoint with js/jQuery

I am using bourbon refill's sliding menu for a project and simply want it to operate until a particular break point. I figured this method below would work.
CSS:
#media only screen and (max-width: 959px) {
//sliding menu code
}
Strangely, this works as the browser expands outwards. However when collapsing, there is a flash and the menu becomes visible for a second or two right before the breakpoint is reached. Should I be setting js-menu and the sliding-menu-content classes in the nav to display:none ?
UPDATE:
I added a conditional in the js to explicitly hide the classes which are showing...
but this removed the nav from my page when it was above 960px.
Also is this the correct way to control viewports with js/jQuery?
var slidingElements = $('nav.js-menu.sliding-menu-content.is-visible, .sliding-menu-content');
$(window).resize(function() {
if ($(this).width() >= 959) {
$(slidingElements).hide();
} else {
$(slidingElements).show();
}
});
Does anyone know
JS:
<script>
$(document).ready(function() {
$('.js-menu-trigger').on('click touchstart', function(e) {
$('.js-menu').toggleClass('is-visible');
$('.js-menu-screen').toggleClass('is-visible');
e.preventDefault();
});
$('.js-menu-screen').on('click touchstart', function(e) {
$('.js-menu').toggleClass('is-visible');
$('.js-menu-screen').toggleClass('is-visible');
e.preventDefault();
});
});
</script>
I am aware of breakpoints and other controllers (respond.js etc.). Is this the right way to tackle this?

Responsive JavaScript: "Refresh" page depending on screen width?

i've made a responsive website with a horizontal menu. I wanted to make the menu a toggle drop down when a lower screen resolution is reached. The JQuery-Toggle works fine and i tried this to "make it responsive":
if (document.documentElement.clientWidth < 768) {
$(document).ready(function(e){
$('#menubutton').on('click',function(){
$('#main-nav').slideToggle();
});
})
}
This works also fine but not by changing the windowsize directly in the browser – i have to resfresh the page manually to load the Script!
Is there a way to "refresh" the page when the needed screen width is reached (768 px)? …and vise versa!
thanx,
Jochen
maybe instead of refreshing the page on every resize, you can do:
var mainNavActivated = false;
$(document).ready(function(e){
$('#menubutton').on('click',function(){
if(mainNavActivated || document.documentElement.clientWidth < 768){
window.mainNavActivated=true;
$('#main-nav').slideToggle();
}
});
})
which is binding click anyway and making it work when the window is "narrow"
You can use $(window).resize(). It will call your function every time the window is resized by the user.
You can use the resize event.
$(window).resize(function() {
// here your code
});

Categories

Resources