Adding content "on the fly" for designs "
pinned to the left
" |
We always design web sites whose maximum horizontal contents are the requisite 776 pixels wide in order to fit into the 800 x 600 monitor resolutions that 34% of users still use.
Many of these web sites "float" in the center of the page so as to minimize the "blank" space on either side of them when viewed at larger monitor resolutions, as in the example on the right. >>>
Many sites are "liquid" designs and flow to the edge of the browser window as in this tutorial.(link opens a new window)
But when the design requires the site to be "pinned" to the left-hand side of the screen the resulting blanks space on the right can be somewhat overwhelming as seen in the example of the TexasWebdevelopers.com web site, below. |
|
|
We wanted to take advantage of this space by adding content "on the fly" to users who have larger monitor resolutions without causing the dreaded horizontal scroll bar for those users with 800 x 600 monitor resolutions. The usual solution of "sniffing" for screen width and then redirecting the user to an alternate page does not allow for the best possible search engine optimization. Sites like www.msnbc.msn.com/ may often use ASP.NET controls to solve the problem but most of us are not hosted on .NET servers. |
| This page is a working example of the code, below. Using a monitor resolution of 1024 x 768 (the most commonly used today) grab the lower right-hand corner of the browser window and slowly drag the corner to the left. You will see the added content, in this case some Google Ads, disappear at smaller screen sizes and re-appear as the screen size reaches 1024 x 768. There is no horizontal scroll bar until the 800 x 600 content is reached. |
| Below is the table set up where your page content would sit. The table labeled "content1" holds your page content. the other two tables named T1 and T2 are required to properly display the "on the fly" content which will appear in between the span tags named S1. The width of the table containers D1 and D2 are determined by the javascript sniffer. We have set the tables with a border in the code so that you can see exactly what is happening when you view this example on your own computer. This code goes in between the <body> and </body> tags. |
|
| Below is the javascript that powers the sniffer and sets the content you want to display. This code MUST go after the last </html> tag on the page. |
|
|
|
|
|
|
|
