Dynamic Page Layout - A Javascript Solution
The object of this page is to demonstrate that it is possible to create page layout using CSS and provided the client's browser has JavaScript enabled, the page will maintain its orginal proportions in all aspects of layout including the resizing of images, irrespective of the host browser's screen resolution. If JavaScript is disabled, the page will display at its design screen width resolution of 1024 pixels.
About this Page
The initial dimensions are set by the German Flag which has been given a width of 100%. Then by detecting the width of the open window of the browser and comparing it with a nominal design width of 1000px and a design flag height of 600px (an aspect ratio of 1.67 : 1), it is possible to scale the flag so that it will display with the correct aspect ratio in any screen resolution. This sets the width of the remainder of the page and provided the appropriate scaling is calculated, Javascript will implement the necessary changes by writing the new values to the CSS. All objects on the page will now resize as required.
This depiction of the German flag using the "Federal Coat of Arms" [Bundeswappen] as a variant of the normal "Federal Shield" [Bundesschild] for the shield, is an example of how dimensioned objects can be resized and their absolute positions retained irrespective of the browser's screen resolution. The limiting factor in the flag is the size of the 'shield'. The graphic's dimensions at the design width resolution of 1000 pixels are 240px by 300px, but if the page is to be viewed on a monitor with a screen resolution of 1600 pixels, the graphic needs to be 384px by 480px. To future proof this project (increasing screen resolutions), the graphic being used is 480px by 600px and will still provide maximum resolution when the screen width is 2000 pixels. An example screen shot taken at 1600 pixels resolution when rendered by the Shiretoko 3.1 browser (the development version of Firefox 3.1) using the Mozilla/Gecko 1.9.1 engine and running on the Linux O/S can be found here. If you have arrived directly at this page from a Search Engine, then take a look at the previous page.
The vertical pixel heights of the black, red and gold bars are also determined and written to the page along with the vertical positioning of the arrows. The arrow fonts are to be found in the HTML extended character codes, though the actual placement of the arrows is browser dependant. The default placements are for the Opera 9.51 browser, and a JavaScript 'browser sniffer' is used to detect the browser in which the page is being rendered, then adjusts the arrow's placement as required. If the clientside JavaScript is switched off, the arrows and the associated data including the screen, window and aspect ratio dimensions are not displayed.
Things to Note
The important thing to remember when creating a page that can easily be scaled to any width is that all dimensional measurements that can be, should be expressed as percentages. So, start by determining the page width, and then determine the width of containers etc. in percentages. Also give margins and paddings as percentages. This means that any measurements that need to be in pixel, point, or em can be kept to a minimum, such as those applying to images. This results in less work to be performed by JavaScript in writing values for images and any necessary heights. Having said that, I have used 'em' for dimensioning divs/tables in this page as I found that sticking to a common measurement gave a better result.
If you need to write some text, e.g. the values showing screen dimensions, then the syntax for doing so should be easily ascertained by refering to 'flag.js'. Don't be put off by what appears to be a whole lot of 'garbage' in the script. It is all relevant and 'comments' alongside it should help you identify what it does.
Quick window resize links are located in the top right of the flag and may not work in all browsers, depending on how the actual browser JavaScript and security options are configured. To test resize links in Opera 9.51, 'right click' on the open tab and select 'Restore'. This causes a new window to open and the resize links will work, though clicking the 'Restore' icon of the original window will allow you to manually resize the window, but not by using the links. Also, try turning your Javascript "off", then refresh the page and note the changes.
IE Problems
As usual, Internet Explorer 6 and 7 don't behave as the Standards Compliant browsers do, e.g. FireFox 3, Opera 9.51, and Safari 3 etc.. The IE browsers render the page correctly, but don't respond correctly to the JavaScript 'onResize' event handler. This means that to avoid the problems it creates, the JavaScript 'onResize' script has been told to ignore Internet Explorer browsers, and you need to 'refresh' (F5) the page after resizing it. This doesn't apply if the page is initially loaded into a browser of 'x' width, as it then loads and writes the correct dimensions at the same time.
Internet Explorer browser versions prior to IE8 handle spacing around <h> and <p> tags, along with 'line-height' differently to the other browsers, which has resulted in some IE only CSS to stop those issues becoming more pronounced with scaling.
The IE6 browser doesn't recognise the percentage height style given to the <div>'s that display the height values of the black, red and gold bars. It is possible to overcome this problem by placing in the style sheet 'height:0px;' and follow it with 'min-height:33.33%;' - IE6 responds to the height attribute, whereas the other browsers read it but apply the min-height attribute. However, as the heights in question are only used when JavaScript is enabled, the Document Object Method (DOM) has been used to write the correct height to the CSS for the benefit of all browsers and the 'min-height:33.33%;' is not used. If both the height styles had been included, the DOM would have been used to write the height for the benefit of IE6 only, and as there was little point in doubling up on the styles, that arrangement was dropped.
The IE5.5 browser behaves relatively well for its age with only a few minor issues, e.g. not displaying the arrow characters, and requiring changes to the CSS to overcome some inheritance problems. Otherwise it displays the page as intended, though graphics have been used instead of the arrow characters.
When checking IE5.01, I was suprised to find that it rendered the page much the same as its successors, and the only 'fix' required was reminding it that a vertical scrollbar is needed.
Scaling Limitations
Many browsers have a minimum default font size - about 9px, and if you decrease the page size below the browser's capability to render a font smaller than its default minimum, then layout will suffer. Opera 9.51 and SeaMonkey 1.1.11 are a couple of browsers which can render to a postage stamp size, whereas Safari 3 has a minimum font size of 9px. This means that below a window width of near 620px (equivalent to a screen resolution of 640 pixels) the layout will start to be lost, and it should also be noted that with reducing widths, the effective scaling of fonts gets slightly erratic.
Overall, all the Standards Compliant browsers including IE8 beta perform well in maintaining layout when down scaling, particularly when a scalable image is inserted in the text flow. Upward scaling seemed not to be a problem in any browser.
NOTE: The Window Height shown in the bottom left box and in the Status Bar is the total height of the page in the open window. When you resize the page, i.e. move the bottom of the window up or down to touch the bottom of the flag, the Window Height will be the same as the flag height, and the Aspect Ratio will show 1.67 : 1.
Final Comments
When designing this page, I took the plunge and resurrected a 15 year old Compaq Computer complete with its 12 inch x 9 inch CRT monitor. The advantage of doing so was that I could easily change the monitor resolution between 640 x 480, 800 x 600 and 1024 x 768 pixels, and as the monitor allowed overscan I was also able to check even larger resolutions, even though I couldn't see the whole page. Windows 95 and IE5.00 were both up to it!
Hopefully, the foregoing has not been "too technical", and should further help been needed with either the HTML, CSS or JavaScript syntax in setting up a similar scalable page, then feel free to contact me by
Barry Carlson - 11 August 2008
Page Updated - Tue 21 April 2009 17:47:16 ESTThis site is hosted by Free Web Hosting