| : | Javascript Index | : | PHP | : | MySQL | : |
| : | Source | : | : | Explanation | : | : | Example | : | : | Todo | : | : | Feedback | : |
Below some example pages that will pop up in a small browser window. So, if nothing happens when you click the links, your popup-blocker is probably blocking them
| Testpage | Description |
| fixed width in pixels, no javascript |
A test page in which the container has a fixed with of a certain amount of pixels. When the page has finished loading, it will adjust all the configured elements to the maximum-width of that container |
| fixed width in pixels, with javascript fix | |
| width in percentage, no javascript |
Same as above, except that the width has been defined in percentages. This requires that we recalculate the maximum-width when the page gets resized. So, try resizing the window and see what happens |
| width in percentage, with javascript fix | |
| width relative to available space, no javascript |
This one is similar to the second one in that the width is relative to the window size.
But, the width is not really defined in a width attribute, but is derived from the available width (the width of the window minus a margin). This requires a slightly different approach which is demonstrated here |
| width relative to available space, with javascript fix |
The no javascript links demonstrate the situation if we wouldn't fix it. This results in ugly scrollbars.
The with javascript fix show how this script can fix these situations elegantly
In all the examples width fix, the first blue element (div) will not be fixed.
This is done to show that you can target specific elements with this script.
Most of the elements receive an addition deduction of 20px because of the padding used in the container. This is something you can customize yourself.
The last element with class resizeMeFull doesn't receive this additional deduction. That's why it's neatly stretched to the full width and the one aboven not
There is a rather big difference between a HTML 4.01 Transition and HTML 4.01 Strict DOCTYPE in Internet Explorer, where it concerns the purpose of this script
In Transitional mode (or Quirksmode) it will stretch the container element to the width of the largest element in that container. In Strict mode, it will let the container have it's intended width and simply go out of bounds with anything that is bigger then that width.
The examples shown here all use the Strict DOCTYPE.
I've recreated the secdond example without DOCTYPE, so you can see the difference in Internet Explorer. The window won't get smaller then the first blue div-element, because it keeps the container stretched to its own width.
This can be solved by including that element in the list of elements that should be resized or, of course, switching to a strict doctype