Is there a way to reverse a click function when the browser is resized? As of now my menu toggle is working as expected. The problem is when the browser resizes the menu is staying open and the overlay is still active.
I attempted to call functions on a window resize event but had no luck. I would like the functions reversed at 768px
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toleft');
$menuLeft.toggleClass('pushmenu-open');
$('.menu-open-overlay').toggleClass('open');
});
Related
Is there a relatively simple method for making the Bootstrap (v3) mobile menu to appear full height on screen (100%)?
It appears as though the menu will only overlay as much as the menu content that is within it (default behaviour in bootstrap.js). I just want to prevent users from scrolling/seeing the underlying page when they are viewing the mobile menu.
You could try this instead. I think it looks better than having a menu that takes the entire page and achieves the desired result.
https://jsfiddle.net/rjx3460f/4/
var mywindow = $('#window');
$('#navbar').on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});;
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
$('#navbar').on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
The general idea is that you disable scroll on the page, and hide the content when the menu is open. Although you could just as easily just disable scroll. Or set the height of the menu to 100% when things open up.
Here is the menu taking up the entire thing. Very similar setup, but has a jumpy transition... I think you may need to create your own open transition to make it non jumpy, which is not impossible, but then no longer really bootstrap.
https://jsfiddle.net/rjx3460f/7/
#aduss's answer worked for me too but instead of assigning id's I used the bootstrap classes to target the menu,
var mywindow = $('body'), navbarCollap = $('.navbar-collapse');
navbarCollap.on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
navbarCollap.on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
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;
});
I'm using jQuery UI to create a tooltip for a search input field. I then want to position the tooltip according to the size of the browser window (top if less than 768px, left if more).
I initialise the tooltip with:
$('#search').tooltip({'placement':'top'});
Then I have this function to change the placement depending on the window size:
$(window).on('resize', function() {
if ($(window).width < 768) {
$("#damSearch").tooltip({'placement':'top'});
} else {
$("#damSearch").tooltip({'placement':'left'});
}
}).trigger('resize');
For some reason it's not working. The tooltip initialises fine but when I resize the browser above 768px it still appears positioned to the top.
[EDIT]
I've been away for a few days and have just come back to try and resolve this problem.
I've installed Modernizr because I intend using it elsewhere on the site and so I thought I'd use Modernizr.mq to detect the window resizing. I also read elsewhere that the code to reposition the tooltip should be in its own self contained function, so this is the function:
function positionTooltip() {
if (Modernizr.mq('(min-width: 768px)')) {
$("#damSearch").tooltip({'placement':'left'});
} else {
$("#damSearch").tooltip({'placement':'bottom'});
}
}
This is then followed in my Javascript file with:
$(document).ready(function() {
positionTooltip();
// Fire the function on page load
$(window).resize(positionTooltip);
// Fire function on window resize event
Unfortunately it's still not working correctly.
The tooltip appears correctly positioned when the page is first loaded, but if I then resize the browser the position is not updated. If I reload the page however the tooltip's position is changed accordingly.
It's as if the resize event is not triggering the function.
[/EDIT]
As ever all help and advice is greatly appreciated.
Tony.
you need to call the width function
if ($(window).width() < 768) {
notice the parentheses ()
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
});
I'm using the SimpleModal Jquery plugin and it works great!
However, there are times that the width and height of the modal div need to be changed, so I need the modal to automatically re-position itself in the center of the page. I found out that SimpleModal uses its setPosition() function to do this. It is automatically called when the modal is launched.
So I tried to call the said function when the modal div's dimensions change, but it doesn't work:
$('#mybutton').click(function() {
//code here to resize the modal
$.modal.impl.setPosition(); //doesn't work. note that at this point, the modal is still active (displayed)
});
Do you have any ideas?
In the current version (1.3.5), you can re-position the dialog in the callback. For example:
$('#foo').modal({
onShow: function (dialog) {
var modal = this; // you now have access to the SimpleModal object
// do stuff here
// re-position
modal.setPosition();
}
});
I'm working on version 1.3.6 which will provide some convenience methods for these "utility" functions.
When you make an element (let's call it theElement) into a modal, it will be wrapped by a div#simplemodal-container. div#simplemodal-container will get the same dimentions as theElement (in fact, it will be 2px higher/wider than theElement)
You don't say what element you are actually resizing, but I guess it's theElement. If that's the case, #simplemodal-container's dimentions aren't updated, and positioning it again will have no effect. You have to resize the container explicitly.
Therefore, after resizing and before positioning again, do this:
$("#simplemodal-container").css({height: newHeight, width: newWidth});
Here i assume newHeight and newWidth is theElement's new dimentions (+2 if you want to follow simplemodal's policy)
This works for me:
var modal = $.modal("<div>...</div>");
$('#mybutton').click(function() {
//code here to resize the modal
modal.setPosition();
});