Dynamically assign a height value to a div based on window height

[Joel]

Hello all,

I am fairly new to the world of javascript. I essentially know how to alter scripts that have already been written, as opposed to having the ability to write it from scratch.

That being said…What I am trying to accomplish is to achieve almost exactly what this website below achieves with its image-slider…

Essen International.

Their slider is positioned relative to its surroundings, however before scrolling down, it dynamically scales based on the window height.

Then, upon scrolling, it is essentially “released” and you are able to scroll down to the rest of the page.

All the research I have done only shows how to make a div (in a fixed or absolute state) the full window height and width (which is pretty much only good for creating background images, as opposed to regular content).

I hope the description of my problem makes sense….PLEASE let me know if ANY of you have any suggestions or solves to my problem!

Thanks so much!

[dyr]

Good question. On Essen International the header (logo, menu) is of a fixed height that’s hard-coded into the CSS. At wide desktop sizes this height is 90px. Knowing this it’s simple to calculate how tall the carousel should be: subtract 90 from the height of the viewport.

With jQuery:

var updateCarouselSize = function() {
    // the first selector here would be whatever class / id you've given to the carousel.
    // note: in modern browsers, the CSS height property does not include padding, border, or margin unless the 'box-sizing' property is set to 'border-box'.
    // calling jQuery's .height(value) function simply changes the CSS 'height' property to the value
    $( '.carousel' ).height( $(window).height() - 90 );
}

You might want to attach this function to the window.resize event so that when the browser size changes, the carousel is re-fitted to the new size. This event can fire many times per second so it’s generally a good idea to throttle it to prevent excessive calls to the handler. Here’s a simple way of doing so.

// declare timer variable
var resizeEndTimer;

$(window).on('resize', function(){
    // when this event fires, clear the timeout
    clearTimeout( resizeEndTimer );
    // after 100ms execute the updateCarouselSize function.
    // this will only happen 100ms after the last window.resize event
    resizeEndTimer = setTimeout( updateCarouselSize, 100);  
});

I hope this gets you started in the right direction.

Cheers

[Author]

Posts