:

Javascript Index

:

PHP

:

MySQL

:

:

Source

:

:

Explanation

:

:

Example

:

:

Todo

:

:

Feedback

:

why this script

When you allow other people to add content to you website its difficult to fully control this content. And sometimes this leads to situations where the content messes up your design. Examples are images that are too large, or tables that get pasted in a wysiwyg editor with a fixed with that is too large for its container
This script forms a solution to that problem

What this script can do

This script can search those containers (specific elements (often DIVs) that contain a part of the website) for specific tagnames and/or tags with a specific classname and resize these elements (images, tables, etc) to a size that doesn't exceed the width of the container.
This script can be triggered after the page has finished loading and then resizes all the elements according to your configuration. It also re-resizes all those elements when the browser-window is resized, thereby keeping in mind what the original size was.
It also compensates for DOCTYPE differences, especially in IE.
The script is optimized in such a way that it will only parses the DOM tree ones and saves the elements it (may) needs to resize in the object, so the adjustment is done efficiently when a visitor is resizing the browser-window

Usage

This script is class-based, so you'll to instantiate an object of this class like this:

var rpe = new resizePageElements('containername', ['IMG','TABLE'], ['myStyle','resizeMe']);

The arguments:

1. 'containername': this is the name of the id of the element in which the script should search for elements to resize.
2. ['IMG','TABLE']: an array of tagnames. If you only want to resize based on classnames (see 3rd argument), put [].
3. ['myStyle','resizeMe']: an array of classnames. If you only want to resize based on tagnames (see 2nd argument), put []

There is an optional fourth argument with which you can influence the width if this is not set explicitly in the stylesheet but depends on the available width in the window. Suppose your container-element has a margin of 100px relative to the body tag, you would pass 200 here (100 left & 100 right). The script will probably always function without the use of this argument, but if you can pass it, it will speed up the calculation.

When the object is created you may use this function to set an additional reduction:

rpe.setAdditionalReduction(20);

which can be usefull if you use padding in the container element

The proper way to then set a trigger that when the page has finished loading and activate the script is as follows:

 if (window.addEventListener)
 {
	window.addEventListener('load', function() { rpe.scaleElements();}, false);
	window.addEventListener('resize', function() { rpe.scaleElements();}, false);
 }
 else
 {
	window.attachEvent('onload', function() { rpe.scaleElements();});
	window.attachEvent('onresize', function() { rpe.scaleElements();});
 }

note: When the container element has a fixed width in pixels, you don't need to set the resize event handler

View the source of the test-cases on the example page for addition code examples!