Develop Reference

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*/
}

Prevent window height change when mobile address bar appears / disapears

I use Jquery to get the height of the devices displaying a website, to make sure that my homepage has a height of 100%, and when scrolled thru, header menu will go fixed to top.
For that, I measure Window InnerHeight with a functiun, which is called on document ready, and window resize events (to keep the design clean when user changes portrait / landscpae mode on mobile, or resizes his window on desktop).
Problem on mobile : the adress bar on android is displayed on page load, and hides on scroll down, then reappears on scroll up. This makes some page elements change sizes on evey opportunity and moves contents in the page. Not pleasant for the user.
function setHeight() {
windowHeight = $(window).innerHeight();
$('.home-intro').css('min-height', windowHeight);
}
$( window ).resize(function() {
setHeight();
});
Is there a way to get the window size, not affected by the adress bar being displayed or not ?

I know this answer is a year late, but I've struggled with this issue as well. I've found that using "window.document.documentElement.clientHeight" instead of "$(window).innerHeight();" makes it so the when the address bar disappears your min-height targeted elements won't resize again to fill the extra 50px or so.
Here's what I'm using on my project:
function adjustBackgrounds() {
windowHeight = window.document.documentElement.clientHeight;
$('#section-01-home').css('min-height', windowHeight);
}
// Triggers Sizing on Load (783 = 800px accounting for 17px of scrollbar)
if ($(window).width() <= 783) {
adjustBackgrounds();
} else {
}
// Triggers Sizing on Browser Resize (783 = 800px accounting for 17px of scrollbar)
$(window).resize(function() {
if ($(window).width() <= 783) {
adjustBackgrounds();
} else {
}
});

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.

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