Develop Reference

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

Trigger jQuery function at specific different browser widths

So I have this jQuery function that adds margin-top to an element based on the height of another element.
I'm trying to have this function trigger again on window resizes. (Preferably 1200px, 991px, 768px, 500px breakpoints)
If there is a good solution that allows the function to trigger with any browser resize, even better. I just need to make sure this wont cause "lag" or "slowness" due to the function triggering 100 times during a resize event for example.
Here is a codepenn with my current function:
http://codepen.io/bruno-gomes/pen/vgRbBB
Code:
jQuery(document).ready(function($) {
(function() {
var navBarHeight = $('.header').height();
$('.content').css('margin-top', navBarHeight);
})();
});
The idea is that I want the fixed header to not cover the content, and the size of the header will vary depending on the width of the browser. This becomes an issue when user resizes browser because the function is only triggering once on load.
I have the IIFE setup like that because it's a Joomla site and they don't work properly otherwise by the way.

You can use .resize() for that

Ok seems like this approach solved all my problems ^.^
jQuery(document).ready(function($) {
var height = $('.header').height();
resizeHeader(height);
$(window).resize(function() {
var height = $('.header').height();
resizeHeader(height);
});
function resizeHeader(height) {
$('.content').css('margin-top', height);
}
});

Dynamic height() with window resize() with variable margin

So if have this function in order to dynamically set a div's height based on the browser height:
$(window).resize(function() {
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
This works like a charm. As you can see, there's a 110px margin (that belongs to my header height).
This code is not optimal since, a header height might vary based on the current viewport.
Is there a way to set this up dynamically as well? Or at least set some conditions like:
If browser width is more than 768px then set a 110px margin. If less than 767, then the margin should be 80px.
This is my edited code so far, but I'm not sure if I'm on the right path:
$(window).resize(function() {
var set_width = $(window).width();
if(set_width <= 767)
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
Thanks a lot!
EDIT:
Now that I think of it better, this 110px are not a margin, it's a subtraction I'm doing in order for my header and the slideshow to fill the entire window. If I don't do this subtraction then I end up with my header height + slideshow height (which takes take browser height) making it scroll.
So I don't think I can do this with CSS. That's why I was thinking on a Javascript solution.

So, you'd need something like the following. I hope the code is straightforward.
$(window).on("resize", function() {
var winHeight = $(window).height();
var headerHeight = $("header").height();
$('#slideshow').height(winHeight - headerHeight);
});
$(window).trigger('resize');
The sample HTML I'd used as a model is:
<body>
<header>my header</header>
<div id="slideshow"></div>
</body>

You can do something like this:
$(window).resize(function() {
var buffer = ($(window).width()<768)?80:110;
$('#slideshow').height($(window).height() - buffer );
});
$(window).trigger('resize');
As Halcyon suggested in comments, use css. That is the neatest way to do it.

How to give navigation 100% width in pixels upon resize?

So basically, I am attempting to use jQuery to give my navigation bar (Bootstrap navbar) a 100% width, but in pixels.
Of course, this has to be determined every time the browser/window is resized.
I came up with this, although it is extremely buggy. It uses the starting width of 'nav' as 'navsize', and upon resize of the window, navsize still stays the same.
$(document).on('ready', function () {
$(window).on('resize', function () {
var navsize = $('nav').width();
$('nav').css('width', navsize);
}).trigger('resize');
});
I have also tried var navsize = $('nav').innerWidth(); which was also no good.
The function is definitely being called upon resize since I have tested with console.log()
For all those who are wondering why I am doing this, I am using StickyJS to make my navigation scroll with the page. Although, since it is using 100% width, upon scrolling it becomes much smaller since the nav leaves its container.

This should work
$(document).on('ready', function () {
$(window).on('resize', function () {
$('nav').css('width', 'calc(100% + 1px - 1px)' );
console.log( $('nav').width() );
/// Use following ONLY if you specifically want to set the width in pixel
$('nav').width($('nav').width());
}).trigger('resize');
});
the console.log will have your width in pixel. Means whenever in future you will read the width , it will be in pixel.
calc(100% + 1px - 1px) converts the width and sets in px units, which we can read later on.

Are you sure that $('nav') exists?
I've done some testing using a basic bootstrap page and a slightly change of your code works.
Navigate to this page and open the console inspector.
http://getbootstrap.com/examples/starter-template/
paste the following code and you will see that the .navbar width will be logged on window resize.
$(window).on('resize', function () {
var navsize = $('.navbar').width();
console.log(navsize)
});
Cheers.

It'd be easier with the supporting HTML and CSS, but I will venture a guess based on the behavior alone.
Best Guess
It sounds like one of these options is likely.
you meant to use #nav, .nav, div.nav, etc and don't actually mean to select a "nav" element
your "nav" element is not display inline-block|block, which occurs in some browsers
you are using the "nav" tag in a browser that doesn't support it (IE 8)
your JS library doesn't support the "nav" tag
Alternative
Use JS to relocate your nav into the body (at the appropriate scroll depth) and give your html , body, and nav tags width 100%
Hope that helps.

Getting window height with jquery

So basically, I want a div called #content to have a css top value of 200px if the browser height is less than 440px. However, this seems to not be working. What am I doing wrong?
var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
$("#content").css("top","200px");
} else {
//this part works, so it's hidden
}

I think you need to handle $(window).resize() event or that logic is only going to be run once.
<script type="text/javascript">
$(window).resize(function(){
var bohi = $(window).height();
if(bohi < 440) {
$("#content").css("top","200px");
} else {
//this part works, so it's hidden
}
});
</script>
Here is a jsfiddle that seems to be working:
http://jsfiddle.net/kNbuy/
Note that $(window).height() doesn't need the parseInt() its already treated as a number.

You need to place this code in your document ready handler like so:
<script>
$(document).ready(function(){
var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
$("#content").css("top","200px");
} else {
//this part works, so it's hidden
}
});
</script>

OK. I think I see what your problem could be.
You haven't specified what the 'position' attribute of your #content element is. If you're not getting the behavior you want, I suggest that you try adding position:absolute to the style for #content.
I recommend that you carefully study how the 'position' attribute works. You may be surprised by the results you get by changing the position css attribute of #content and it's parent element.
Also, you may want to consider having the page automatically execute some code to adjust itself whenever the user resizes the browser window. This can be handled with $.resize().

As of 2015, I recommend using CSS media queries for this instead of JavaScript.
#media (max-height: 440px) {
#content {
top: 200px;
}
}