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
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
[]'deck'), function(el){
* And set the height of the deck by subtracting the height of
* the taskbar from the height of the document body
*/ = (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;
Search WWH ::

Custom Search