The JavaScript Source: CSS : Fixed Layer Manager

General

Emulate CSS "fixed" positioning, which Internet Explorer lacks. Managed layers will disappear while the user is scrolling and reappear only after scrolling stops -- thereby preventing the shearing effect common with other solutions. Heavily commented.

Tweedledee

Tweedledum

Notes

Created by: Tim Tran
Web Site:
Posted: March 23, 2006

While I use terminology common to OOP (e.g. classes, static members, class constants; public, private, and protected methods) in my documentation, these are meant to be interpreted by the programmer on a conceptual level. JavaScript does not have true classes but objects, no protection mechanism for members, and lacks many constructs found in true OOP languages... Please keep this in mind.

Also, I use the term "layer" to mean any HTML document object that has "absolute" positioning (e.g. created by <DIV>, <SPAN>, and most other tags with CSS attibute {postion: absolute;}.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: fixedLayerManager.js

/* LICENSE : Released under the GNU LESSER GENERAL PUBLIC LICENSE v2.1
	             which can be found at "www.gnu.org/copyleft/lesser.html".
	HISTORY    : 2006/03/12 v1.0 */

// C O N S T R U C T O R S ***************************************************

/*
	SUMMARY: Constructor for class FixedLayerManager.
	ARG id : This value should be the same as the instance name.
	EXAMPLE: var flm = new FixedLayerManager("flm");
*/
function FixedLayerManager(id)
{
	this.id = id; // This should be the same as the instance name.
	this.timeout = null; // The timeout resource used by the onScrollHandler.
	this.layers = new Array(); // The layers this instance manages.
}

// P U B L I C   M E T H O D S ***********************************************

/*
	SUMMARY: Shows, makes visible, all layers managed by this instance.
	RETURNS: None.
*/
FixedLayerManager.prototype.showLayers = function()
{
	for (i = 0; i < this.layers.length; i++)
		this.layers[i].domLayer.style.visibility = 'visible';
}

/*
	SUMMARY: Hides, makes hidden, all layers managed by this instance.
	RETURNS: None.
*/
FixedLayerManager.prototype.hideLayers = function()
{
	// Prevent any waiting timeouts from showing the layers.
	if (this.timeout != null)
	{
		clearTimeout(this.timeout);
		this.timeout = null;
	}

	for (i = 0; i < this.layers.length; i++)
		this.layers[i].domLayer.style.visibility = 'hidden';
}

/*
	SUMMARY: Repositions all layers managed by this instance so that they
	         behave like a true fixed layer.
	RETURNS: None.
*/
FixedLayerManager.prototype.repositionLayers = function()
{
	for (i = 0; i < this.layers.length; i++)
	{
		this.layers[i].domLayer.style.top = this.layers[i].originalTop
			+ document.body.scrollTop;

		this.layers[i].domLayer.style.left = this.layers[i].originalLeft
			+ document.body.scrollLeft;
	}
}

/*
	SUMMARY: Add layer(s) for this instance to manage.
	ARG    : This method accepts a variable number or arguments. It can accept
	         either a single array of layers (as objects or id strings) or a
	         variable number of layer arguments (as objects or id strings).
	RETURNS: None.
	THROWS : Will throw a general exception (creating an exception class in
	         this case would be overkill) if any of the layers don't exists.
	EXAMPLE: flm.addLayers(new Array(layer1, "layer2", layer3)); // Method 1.
	         flm.addLayers(layer1, "layer2", layer3); // Method 2.
	NOTES  : Be careful if you call this function before the document.onload
	         event occurs as your layer may not yet be constructed and
	         therefore your layer does not yet exists.
*/
FixedLayerManager.prototype.addLayers = function()
{
	if (arguments.length == 0)
		return;

	// Assign args depending on if we're passed an array or a set of arguments.
	var args = (arguments[0] instanceof Array) ? arguments[0] : arguments;
	for (var i = 0; i < args.length; i++)
	{
		var domLayer = (typeof(args[i]) == 'object') ? args[i]
			: document.getElementById(args[i]); // Is the argument a layer or id.

		if (domLayer == null)
		{
			throw ('ERROR: Argument #' + i + ' (' + args[i] + ') in call to '
				+ this.id + '.addLayers(' + args.join(', ')
				+ ') is not an object or valid element ID.');
		}

		// Save the layer's info: Dom node, and original top & left position.
		var layer = new Array();
		layer['domLayer'] = domLayer;
		layer['originalTop'] = domLayer.offsetTop;
		layer['originalLeft'] = domLayer.offsetLeft;
		this.layers.push(layer); // Add it to the list of layers to manage.
	}
}

/*
	SUMMARY: Initializes this instance to handle the onscroll event. Also, adds
	         any passed layer arguments to the list of managed layers.
	ARG    : See the addLayers() method.
	RETURNS: true on success, false otherwise.
	THROWS : See the addLayers() method.
	NOTES  : This method replaces any window.onscroll handlers with it's own.
*/
FixedLayerManager.prototype.init = function()
{
	if (navigator.userAgent.match(/msie/i) == null)
		return false;

	window.onscroll = new Function(this.id + '.onScrollHandler();');
	this.addLayers.apply(this, arguments);

	return true;
}

// P R O T E C T E D   M E T H O D S *****************************************

/*
	SUMMARY: Handles window.onscroll events.
	RETURNS: None.
	NOTES  : Edit or overide this method to get the desired visual effect.
*/
FixedLayerManager.prototype.onScrollHandler = function()
{
	if (this.timeout == null)
		this.hideLayers();
	else
	{
		// Reset timeout if onscroll occurs before previous handler executed.
		clearTimeout(this.timeout);
		this.timeout = null;
	}

	this.repositionLayers();
	this.timeout = setTimeout(this.id + '.showLayers();' + this.id
		+ '.timeout = null;', this.ONSCROLL_HANDLER_DELAY);
}

// C L A S S   C O N S T A N T S *********************************************

// Milliseconds, after scrolling stops, until layers reappear.
FixedLayerManager.prototype.ONSCROLL_HANDLER_DELAY = 200;

/* ================== */
flm = new FixedLayerManager('flm');

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  flm.init('TweedledeeDiv', 'TweedledumDiv');
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#tweedledeeDiv {
  position: absolute; top: 150px; left: 50px; background: #FFD0D0;
}
#tweedledumDiv {
  position: absolute; top: 300px; left: 80px; background: #D0FFD0;
}

/* Styles for CSS standards-complient browsers
(e.g. Netscape 6.0+, Mozilla 1.0+, Firefox 1.0+, Opera). Ignored by IE. */

HTML>BODY #tweedledeeDiv {
  position: fixed;
}

HTML>BODY #tweedledumDiv {
  position: fixed;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="fixedLayerManager.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="tweedledeeDiv">Tweedledee</div>
<div id="tweedledumDiv">Tweedledum</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos