: | Javascript Index | : | PHP | : | MySQL | : |
: | Source | : | : | Explanation | : | : | Example | : | : | Todo | : | : | Feedback | : |
resizes elements in specific places of your website based on their tagname of stylesheet class
Added: 2008-08-25 22:10:12
/****** * 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; }