$(window).on('resize', function() {
if ( $( window ).width() > 768 ) {
$('#menu-main-navigation').show();
}
});
$('#nav-toggle').on('click', function() { // start of the nav toggle
$('#menu-main-navigation').slideToggle('slow');
});
i currently have the above code, works fine on page load but if you open the toggle and close it, when you resize the window above 768px it defaults to open no matter what state the menu was left in below the cut off point.
how can i get it to be always what the toggle menu is? and obviously show the menu every time above 768px?
Try adding $('#menu-main-navigation').slideToggle('slow'); after the .show event in your first conditional statement.
Related
What I want to have working: When screen size is under 992px, and a sidebar menu link is clicked, for the new page to open with no sidebar menu
Right now it works like this: When it's above 992px, it stays open and can be toggled open and closes. I have this code which works by closing the sidebar nav automatically when the screen size is under 992px and then you can toggle it open to view. Although, when you click a menu item it reopens on the new page open even when the screen is under 992px.
$(function(){
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).resize(function(e) {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
});
});
When I click a menu item, it reopens the menu sidebar.
How can I have the code so where and when the menu item/link is click to open a new page, and then screen is 992px or less, it opens the new page with the menu toggled closed ?
As far as I can see, you should listen load event to.
For example:
function checkWidthAndToggle() {
if($(window).width()<=992){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
}
$(window).on('resize load', checkWidthAndToggle);
If you want to save space, you can write as follows. But I would not recommend)
$(window).on('resize load', ({ target: w }) => {
$("#wrapper")[`${$(w).width() < 993 ? "remove" : "add"}Class`]("toggled")
});
I have a toggle button which basically shows/hides a list of filters on a Product Index page. Desktop is simple, when clicking the button the panel is shown or hidden with the following script:
$(".filter-toggle").click(function(){
$(".grid").toggleClass("hide-filters");
});
When the browser is below 1024px I use the mmenu plugin to duplicate the filters content and move it into an off-canvas panel. The code for that looks like this:
$(document).ready(function() {
$(".filters").mmenu({
// Options
navbar: {
title: "Filters"
}
}, {
// Configuration
clone: true,
offCanvas: {
pageSelector: ".page"
},
classNames: {
selected: "active"
}
});
var API = $(".filters").data("mmenu");
var $icon = $(".filter-toggle");
$icon.on("click", function() {
API.open();
});
});
Obviously (at the minute) when the toggle button is clicked it will show/hide the content on the page but also trigger the slide-out menu at the same time.
My question is how can I only run the relevant script when it's needed. Is it also possible to do this on resize on not just on pageLoad/refresh?
I tried using matchMedia. Here's a quick CodePen showing where I'm at...
https://codepen.io/moy/pen/wymvjN
It looked like it worked to begin with. Above 1024px the toggle worked. Shrinking the browser down meant the button triggered the slide-out panel - great! But when scaling back up to desktop the slide-out menu is triggered whenever the toggle is clicked. On refresh it works again ...until you shrink the browser down and back up again.
Any ideas?
You can listen for window resize events, and fire functions accordingly. For example, in jQuery:
$(window).on('resize', function(e) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
// initialize small viewport functionality
} else {
// initialized large viewport functionality
}
});
But, you'll need a way to disable that mmenu plugin when switching back to desktop, and include it in whatever script you run during that condition.
Alternatively, the mmenu "Responsive Layout" documentation provides an example for using CSS media queries to hide the cloned menu at certain breakpoints.
I have an off canvas menu that slides in from the right and sits on top of the page. To prevent a scroll bar I am setting the content section's position to fixed while the menu is open. Problem is, when I close the menu the scroll position on the page is lost, the user is returned to the top of the page.
I am trying to store the scroll position of the page and then set the scroll when the window is closed, but its not working. If I debug the code I can see the scrollTop() functioning as expected, but then it goes into the jQuery.js script and after several function calls it resets the scroll to the top of the page.
What am I doing wrong?
var scrollPos;
function openMenu() {
$('body').addClass('open');
}
function closeMenu(compat) {
$('body').removeClass('open');
}
/*** Event Handlers ***/
$('#js-menu-toggle').on('click', function() {
scrollPos = $(window).scrollTop();
openMenu();
});
$('#js-menu-close').on('click', function() {
closeMenu();
$(window).scrollTop(scrollPos);
});
My apologies for not providing enough of an MCVE.
It turns out the problem was the events were bound to an <a> link with a "#" href, so adding in
return false;
as the last line of the .on events solved my problem.
I am using Bootstrap v3.3.5. Every time a modal box is triggered, the scroller hides thereby jerking the webpage. Could you please suggest me a fix.
URL: http://goo.gl/kwn7YH The modal is triggered by the Enquiry button on the right. I tried adding cutsom JS to remove margin / padding but didn't work:
$(document).on( 'hidden.bs.modal', '.modal', function() {
$(document.body).removeClass( 'modal-scrollbar' );
}).on( 'show.bs.modal', '.modal', function() {
// Bootstrap's .modal-open class hides any scrollbar on the body,
// so if there IS a scrollbar on the body at modal open time, then
// add a right margin to take its place.
if ( $(window).height() < $(document).height() ) {
$(document.body).addClass( 'modal-scrollbar' );
}
});
})(window.jQuery);
});
Try and use
$('#myModal').hasClass('in');
and then apply 17px padding to the right of your button when its active.
I'm using the code below to add some classes to a WordPress menu in order for it to work on mobile. The only problem is the preventDefault, which disables the default click action for menu items with submenus and instead go to the next level, runs and when you're viewing the desktop site, top level menu items aren't clickable. How can I alter the code so on window resize, the javascript runs for mobile but on a larger window (e.g. larger than 768px), the code doesn't run and the preventDefault is ignored?
$(document).ready(function() {
// Adding 'has-submenu' class to first level for mobile
$('.menu > ul > li > ul.sub-menu').closest('li').addClass('has-submenu');
// JS media query for disabling and enabling top level click
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-submenu > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
});
Here is a jsfiddle. Notice how on responsive, clicking a parent menu item expands the menu. This functions the way I'd like. However, when you blow it out to the larger desktop version, notice that the preventDefault is disallowing you to click a parent menu item. I'd like these to be clickable on the larger desktop version.
http://jsfiddle.net/2U8Md/