HTML and CSS Reference
In-Depth Information
Controlling the Layout and Handling Resizes
Sometimes, you might find a circumstance where using CSS alone can't
produce the layout that you want. For instance, you might have three elements
on a page that have unpredictable heights. Using JavaScript to handle this
should really be seen as a last resort, as there may be a delay between when
your page loads and when the layout utility adjusts the dimensions of the
elements.
The code for this utility looks slightly different than the other objects. It uses a
self-executing function so that as soon as the script finishes loading, it
automatically executes. Create a new file within
js/app/utility/
called
layout.js
that contains the following code.
var app = app || {};
app.utility = app.utility || {};
app.utility.layout = (function(){
/**
* This method will adjust the height of all decks
* so that there is space at the top for the taskbar,
* which has an unpredictable height
*/
var fixdeckheight = function(){
/**
* First loop through each deck
*/
[].forEach.call(document.getElementsByClassName('deck'), function(el){
/**
* And set the height of the deck by subtracting the height of
* the taskbar from the height of the document body
*/
el.style.height = (document.body.offsetHeight -
document.getElementById('taskbar').offsetHeight) + 'px';
});
};
/**
* Create a timeout variable, as it may take a while
* for the new sizes to update in some browsers
*/
var timeout;
