Remove class when responsive style no longer applies - javascript

so I've made a responsive menu that looks like the smartphone's menu (the one that slides from the side, Im not sure how it is called), and its toggler(which is an Anchor) is shown only when the screen is smaller than 960px using #media screen and (max-width: 960px).
now to toggle the menu i use a JQ's .toggleClass to add a class to the body as shown here:
$(document).ready(function(){
$('.btn-mobile-nav').click(function(e){
e.preventDefault();
$('body').toggleClass('mobile-slide-nav');
});
});
Now the problem is that when i stretch the window back to a bigger size than 960px after I open the menu the toggler disappears and the class that it added('.mobile-slide-nav') remains in the body element....
So... How do i fix it? any ideas?
And sorry about the bad english :)

$(window).resize(function(){
console.log('resize called');
var width = $(window).width();
if(width > 960){
$('body').removeClass('mobile-slide-nav');
}
})
.resize();//trigger the resize event on page load.
src:- https://stackoverflow.com/a/8943979/1632286

Related

How to Dynamically Update outerHeight of An Element When Another Element Changes in Height on Window Resize?

Bit of a jquery / javascript noob question here. I have a subnav element that I am sticking to the bottom of my primary nav once someone hits a certain scroll point. To do that, I'm offsetting the subnav element by the height of the main nav element, as shown below.
$(function() {
$('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
});
});
The problem that I'm running into is '.navbar-fixed-top' has a different height at mobile / tablet and desktop sizes (the height changes at 992px) and the offset gets messed up if someone resizes the screen (i.e., if they start at desktop, and then resize to mobile / tablet, there's too much space above the subnav because the main nav was taller in desktop).
My question is, how can I update the code above to dynamically update the outerHeight when the height of the .navbar-fixed-top element changes?
I tried the code below, inspired by the answer to this question: Resize element width on window resize jquery, but it's not working
$(function() {
var topNavHeight = $('.navbar-fixed-top').outerHeight();
$(window).on('resize', function(event) {
var topNavHeight = $('.navbar-fixed-top').outerHeight();
});
$('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: topNavHeight,
});
});
Thanks!
I think this will work:
$(function() {
let stickything;
function set_sticky() {
if (stickything) {
stickything.cleanup();
}
stickything = $('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
});
}
$(window).on('resize', set_sticky);
set_sticky();
});
Just changing a variable isn't enough, you have to tell stickbits to update. There doesn't seem be a way to update the offset so this just reinitializes it.

Stop window resizing below 768px

I want the entire page(window) to stop resizing below 768px and there should not be any horizontal scroll below 768px. Is there any way to do that?
The browser / window is in the user's control and is dependent on the device also.
Using CSS you can set a minimum width of your page using:
min-width:768px;
However when the user resizes the browser to below this stage, you will see scrollbars appear. You site will no longer resize and get smaller, but the user will need to scroll left and right to see the full content of your page.
As mentioned below, you can hide the scrollbars with
overflow:hidden;
Or to target a specific scrollbar:
overflow-x:hidden;
overflow-y:hidden;
However, the user will still need to scroll sideways to see your full content...
You can't control the size of the window. You can use CSS to set min-width and min-height properties to ensure your page layout stays sane.
If you want to get the size of the window you can do it like this:
var wid = $(window).width();
if(wid> 768){
// something
}
Bind window resize events using resize event
$(window).on('resize', function(event){
//here goes the magic
});
Using Jquery
$(document).ready(function(){
if($(window).width() < 768){
//do something
}
});
Using CSS
#media only screen and (max-width:768px)
{
/*do something*/
}

How to fix Bootstrap navbar fixed top padding on browser resize

I have a .navbar.navbar-inverse.navbar-fixed-top navigation bar that always stays on top of the page. I have given the body a padding of 70 px and this works well with it.
The problem is if I resize the browser, then the nav-bar is no longer nice and neat with a fixed height. Instead it wraps all the items in it, the height of the nav bar becomes more than 70 px and covers parts of the page.
To fix this, I tried using JQuery to check the height of the nav bar and give body more padding, I put this in document.ready()
if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
$("html, body").css("padding-top", "150px");
}
However, this solution does not work because the browser is not reloaded when its size shrinks so therefore this check does not happen dynamically. So how do I fix this?
You can use the window resize event listener here. Something like this:
$( window ).resize(function() {
if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
$("html, body").css("padding-top", "150px");
}
});
Additionally you could also go the Bootstrap way and collapse and expand the Navbar into a button, depending on screen resolution. The above approach is slightly less than ideal IMO

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

Animated Sidebar breaks on resize

I am trying to build an animated sidebar that slides in and out when you click the button. This was quite easy to achieve however I ran in to a problem when making the sidebar 'more' responsive. Basically, I wanted the sidebar to be 200px wide when the width is less than 500 and 300px wide otherwise. This was done in a media query. The problem I've run into is that when you resize the window the sidebar goes out of position if you have already run the function before resizing.
This problem can occur for example if a user rotates their mobile screen whilst using the sidebar and so I feel it's best to try and fix it.
Here is the jQuery:
function sidebar(){
var menuWidth = $('#menu').width();
if($('#menu-link').hasClass('hidden')){
$('#menu-link').removeClass('hidden');
$('.push').animate({right: "-=" + menuWidth});
}else{
$('#menu-link').addClass('hidden');
$('.push').animate({right: "+=" + menuWidth});
}
};
$('body').on('click', '#menu-link', sidebar);
The sidebar changes to 200px <500 and is otherwise 300px. What is the best way to code this or is it better to keep it simple by just always making the sidebar 200px even though it's not as aesthetically pleasing at larger resolutions.
Here is a link to a JSFiddle of my code
https://jsfiddle.net/fqcydqu7/
Edit: Sorry, to explain the actual problem clearly - Before you resize, this code runs fine and is perfect. However, if you run this code (ie. open and close the sidebar) and then resize the window so the media query is active you will see that the sidebar is out of position by 100px. The opposite will happen if you reverse the order.
Okay guys I came up with a solution for my problem.
Basically, I remove the media query from CSS and set the div to always be 300px.
The jquery uses a variable that is updated whenever the window is resized to judge how much to slide the menu. (200px or 300px).
here is the code:
// variable is set to 0 by default
var menuWidth = 0;
//call to function that will set this variable
setWidth();
function setWidth(){
if(windowSize <= 800){ //if its less than 800px wide, set the variable to 200px (the menu is still 300px)
menuWidth = "200px";
}else{
menuWidth = "300px"; //otherwise set the variable to 300px
}
}
$(window).resize(function(){ //when a user resizes the window, run the setWidth function to readjust the variable
setWidth(); //this re-runs setWidth
//the following closes the menu if it's already open to avoid glitches
if($('#menu-link').hasClass('hidden')){
$('#menu-link').removeClass('hidden');
$('.push').animate({right: "-=" + menuWidth});
}
});
//nav slide
function sidebar(){
if($('#menu-link').hasClass('showing')){ //checks to see if the nav is showing or not
$('#menu-link').removeClass('showing'); //remove the showing tag
$('.push').animate({right: "-=" + menuWidth}); //closes the nav
}else{ //if the nav doesnt have showing tag it must be hidden
$('#menu-link').addClass('showing'); //add the showing tag
$('.push').animate({right: "+=" + menuWidth}); //open the nav
}
};
With this code, the menu will only slide out by 200px when the window is less than 800px wide and 300px if it's wider. The div will always be in the correct position even if the user rotates the mobile or changes the window width.

Categories

Resources