resize_page_elements.js

resizes elements in specific places of your website based on their tagname of stylesheet class

Added: 2008-08-25 22:10:12

download

/******
* You may use and/or modify this script as long as you:
* 1. Keep my name & webpage mentioned
* 2. Don't use it for commercial purposes
*
* If you want to use this script without complying to the rules above, please contact me first at: marty@excudo.net
* 
* Author: Martijn Korse
* Website: http://devshed.excudo.net
*
* Date:  2008-08-25 22:10:12
***/

var resizePageElements = function (containerId, tagNames, classNames, minWidth)
{
	this.resizeElements = [];
	this.containerId = containerId;
	this.tagNames = tagNames;
	this.classNames = classNames;
	this.additionalReduction = 0;
	if (typeof(minWidth) != 'undefined')
	{
		this.minWidth = minWidth;
	}
	else
	{
		this.minWidth = false;
	}
}
resizePageElements.prototype.setAdditionalReduction = function (amount)
{
	this.additionalReduction = parseInt(amount);
}
resizePageElements.prototype.storeElements =  function ()
{
	this.container = document.getElementById(this.containerId);
	for (var t in this.tagNames)
	{
		var tagElements = this.container.getElementsByTagName(this.tagNames[t]);
		for (var te=0; te<tagElements.length; te++)
		{
			this.addElement(tagElements[te]);
		}
	}
	for (var c in this.classNames)
	{
		var classElements = this.getElementsByClassName(this.classNames[c]);
		for (var ce=0; ce<classElements.length; ce++)
		{
			this.addElement(classElements[ce]);
		}	
	}
};
resizePageElements.prototype.addElement = function(el)
{
	this.resizeElements.push([el, el.clientWidth]);
}
resizePageElements.prototype.getMaxWidth = function ()
{
	// reducing all elements that could stretch to a width of 0
	for (var e=0; e<this.resizeElements.length; e++)
	{
		this.resizeElements[e][0].style.width = '0px';
	}

	// determining max width of container
	if (this.minWidth !== false)
	{
		var availableWidth = document.body.clientWidth;
		var maxWidth = (availableWidth - this.minWidth);
	}
	else
	{
		var maxWidth = this.container.clientWidth;
		if (maxWidth == 0)
		{
			var maxWidth = parseInt(this.container.style.width);
			if (maxWidth == 0 || isNaN(maxWidth))
			{
				var borderWidth = parseInt(this.container.style.borderWidth);
				maxWidth = this.container.offsetWidth - (isNaN(borderWidth) ? 0 : (borderWidth * 2));
			}
		}
	}
	maxWidth -= this.additionalReduction;
	// toggling width of elements back to their original size
	for (var e=0; e<this.resizeElements.length; e++)
	{
		this.resizeElements[e][0].style.width = this.resizeElements[e][1]+'px';
	}
	return maxWidth;
}
resizePageElements.prototype.scaleElements = function ()
{
	if (this.resizeElements.length == 0)
	{
		this.storeElements();
	}
	var maxWidth = this.getMaxWidth();

	for (var e=0; e<this.resizeElements.length; e++)
	{
		var elArr = this.resizeElements[e];

		if (elArr[1] >= maxWidth)
			elArr[0].style.width = maxWidth+'px';
		else
			elArr[0].style.width = elArr[1]+'px';
	}
};

resizePageElements.prototype.initScaleElements = function()
{
	this.scaleElements();
}

/**
 * function based on the original by crisp
 * website: http://crisp.tweakblogs.net/
 */
resizePageElements.prototype.getElementsByClassName = function (needle)
{
    var s = [], r = [], c, undefined;
    var e = document.getElementById(this.containerId);

    needle = ' ' + needle + ' ';

    while (e !== undefined)
    {
        while (e)
        {
            if (e.nodeType == 1)
            {
                if (e.className)
                {
                    c = ' ' + e.className + ' ';
                    if (c.indexOf(needle) != -1) r.push(e);
                }

                s.push(e.firstChild);
            }

            e = e.nextSibling;
        }

        e = s.pop();
    }

    return r;
}

download