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.

changing height of a div dynamically while resizing

I've been trying to figure out how this website made the following effect and I can't find the answer.
https://www.dezeynne.com/
It seems that while resizing the browser window, the main div resized also with it dynamically by changing the height.
I'm also bad in Math, so please help me to understand the idea behind this awesome effect.
It would be also nice to help me figure out how the parallax is working, I mean how can I change the position of the background in css/javascript while resizing the browser window.
$(document).ready(function() {
var $window = $(window);
var $welcomeElement = $(".welcome");
var defaultHeight = $welcomeElement
console.log($welcomeElement);
$window.resize(function() {
// I'm stuck here at math as you see
$welcomeElement.css("height", ($window.width() - $window.height()) -
$welcomeElement.innerHeight());
console.log("Resized!");
console.log($window.height());
});
});

Have you considered using viewport units?
Set the div to height:50vw;
#main {
background:#daa;
height:50vw;
color:#400;
font-size:10vw;
text-align:center;
line-height:50vw;
}
<div id="main">Hello</div

Background/content bottom half disappears when resizing/maximizing window

So my website http://developed-web.com/ is starting to come together pretty good but I'm having this issue with everything that's not on-screen having to disappear when I take the window out of maximized mode.
This issue occurs in Google Chrome, Firefox and IE 10 too.
I'm not used to this kind of site structure so I don't wanna mess stuff up even more while trying to fix this. What could the issue be?
Thanks for taking a look :)
EDIT:
Go to the page in maximized window, and when you take it out of maximized (not minimize, just make it smaller) som content will disappear: http://gyazo.com/a5744085b32b1cf05acc4e1efa653da9

You should definitely familiarise yourself with the debugging tools in your browser. My preference is developer tools in Chrome (CMD+alt+i on a Mac, F12 on Windows). There's a great guide from Google here to get you started.
If you look at the console tab you'll see that your JavaScript is throwing an error in the resizePanel method when you resize the window on the home page.
If you look at the elements panel and resize the window you will see that something is setting the height of your mask element to the size of the window.
To fix both errors, try updating your code as follows:
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
// These lines are erroneously setting the height of the mask to the
// height of the window so when the user scrolls down, an area of
// unmasked content is visible.
//$('#wrapper, .item').css({width: width, height: height});
//$('#mask').css({width: mask_width, height: height});
// Try updating as follow as kpsuperplane has suggested
$('#wrapper, .item').css({width: width});
$('#mask').css({width: mask_width});
// This was throwing an error because no anchor elements have
// the selected class when the page is first hit
if ($('a.selected').length) {
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
}

Change
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
to
$('#wrapper, .item').css({width: width});
$('#mask').css({width: mask_width});
in your resizePanel() js function (it can be found in the script tag in the head if you look at source)

Somewhere javascript is adding a fixed height to your #wrapper when the window is resized, ill try and find out why this is happening to you.
---- i think this error is causing your problem
Uncaught TypeError: Cannot read property 'left' of undefined on line jquery.scrollTo.js:11
Its not just when you resize the window either it happens to me if i switch tabs

How do I get actual screen height in an iOS web app

I am trying to determine the actual screen height in iOS.
On a short page. If I use the code below I get an incorrect size.
window.innerHeight
This will return 356 on my iPod touch. This is screen height - URL bar. If I add a CSS rule to the container of my page then it returns the correct number 416.
#container { min-height:600px; }
However, the problem with this solution is it adds a chunk of blank space at the bottom of some pages.
I have tried to fix this by doing the following.
$('#container ').css('height', '800px');
window.scrollTo(0, 1);
$('#container ').css({
'height' : window.innerHeight + 'px'
});
This doesn't work. It doesn't influence the page height at all and I am not sure why. Has anyone solved this problem before?

The window.screen object should contain what you're looking for
window.screen.height

how to center a relative div horizontally using jquery on window resize?

i am initially centering div horizontally using jquery but when the window is resized it looks bad so what i want to do is keep it centered using jquery after the window is resized
is there a way to help?
EDIT
guys i have successfully made other elements centered but i am having another issue now :(
please check this
http://hrmanagementbradford.com/gallery/
and resize the window, you will see that the content doesn't get positioned correctly, i am trying to fix this for hours but can't find the solution please help with that
EDIT
solved! it was complex and my code is very specific so posting it here won't help :)
and
although i used jquery to center it but if we use the css thing then FutureKode's answer is best suited for me :)

Why are you using jquery to center horizontally when css can do it one line and it will stay in the center when the browser is resized:
div {
margin:0 auto;
width:800px
}

You can make it dead-centered like this:
$('#elementID').css({
position:'absolute',
top:'50%',
left:'50%',
width:'600px', // adjust width
height:'300px', // adjust height
zIndex:1000,
marginTop:'-150px' // half of height
marginLeft:'-300px' // half of width
});
Note that element will appear at the center but with scrolling it won't move. If you want to make it appear at center, you need to set position to fixed instead. However, this won't work in IE6. So decision is yours :)
You can also create quick simple jQuery plugin:
(function($){
$.fn.centerIt = function(settings){
var opts = $.extend({}, $.fn.centerIt.defaults, settings);
return this.each(function(settings){
var options = $.extend({}, opts, $(this).data());
var $this = $(this);
$this.css({
position:options.position,
top:'50%',
left:'50%',
width:options.width, // adjust width
height:options.height, // adjust height
zIndex:1000,
marginTop:parseInt((options.height / 2), 10) + 'px' // half of height
marginLeft:parseInt((options.width / 2), 10) + 'px' // half of height
});
});
}
// plugin defaults - added as a property on our plugin function
$.fn.centerIt.defaults = {
width: '600px',
height: '600px',
position:'absolute'
}
})(jQuery);
And later use it like:
$('#elementId').centerIt({width:'400px', height:'200px'});
To center it when window is resized, you would use resize event just in case it does not center like this:
$(window).resize(function(){
$('#elementId').centerIt({width:'400px', height:'200px'});
});

You can use
margin: 0 auto;
to centre a block element horizontally in CSS.
Like so:
div
{
width: 400px;
margin: 0 auto;
}

do this:
$(window).resize(function(){
// reposition div again here
})