About The Web Programming On This Site

Summary: Using Javascript to conditionally (based on screen width)
  1. add a menu to a web page;
  2. control the width of the page;
  3. add printer friendly formating.

 
Details: If you look to the left edge of this page, you'll see an "icon menu." It's very easy to see that most of the menu is not part of the main page. The main page has a background color of BGCOLOR="#EEEEEE", while most of the menu - which is in an IFRAME tag - has a background color of BGCOLOR="#FFFFFF".

You might have also noticed that the text you are reading is only 600 pixels wide. That's because the the whole page is wrapped in a TABLE tag with one row and three columns:

  1. contains the "Display this page in a Printer Friendly Format" icon
    and contains an IFRAME which includes the menu.htm page;
  2. is blank but has a background color of BGCOLOR="#AAAAAA" which generates the vertical gray line;
  3. is fixed at 600 pixels wide and hold the actual web page.

However the TABLE with its IFRAME menu is not part of this page. It's included via Javascript. And the Javascript writes the TABLE and IFRAME only if it detects that the screen width is greater-than-or-equal to 720 pixels. That way this page is formated for easy reading on wide screens, but wraps nicely on a smartphone or other narrow screen.

The Javascript also handles writing the "Display this page in a Printer Friendly Format" icon. Clicking it appends "?p" to this page's URL and that's also processed by the Javascript to not include the menu and limited width when the trailing "?p" is detected.

If you save only the HTML file for this, or any other page on this site that has a menu, the menu will not be saved - which is probably what you want since it won't work. But the 600 pixel wide formating also will not happen - since you won't have saved the Javascript file that write both the menu and the formating. In other words, the saved page will look like the page generated when the "Display this page in a Printer Friendly Format" icon is clicked, unless you also save the Javascript and menu files.

The Javascript that does all this is the following:

Back to Leigh's Home Page Site Map                   Site Search 

Permalink http://leighb.com/aboutsite.htm [] Hosted by
Leigh Brasington / / Revised 13 Aug 12