About The Web Programming On This Site

Mobile Friendly: In order to have any chance of these pages with the menu looking correct on a mobile phone or other small screen, it was necessary to add the following line:

<meta name="viewport" content="width=device-width, initial-scale=1">

This line goes in the <HEAD> section; I always put it right after the </TITLE> of all the HTML pages on this site, even tho pages with wide tables will never really look great on a small screen.

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 formatting.

Details: If you look to the left edge of this page, you'll see an "icon menu." You also 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 "Home" icon & "Display this page in 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 holds 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 "Home" & "Display this page in a Printer Friendly Format" icons. Clicking the printer icon 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 the compete version of this page, or any other page on this site that has a menu, it should work correctly. Howver, 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. But the 600 pixel wide formatting also will not happen - since you won't have saved the Javascript file that writes both the menu and the formatting. In other words, the saved HTML only page will look like the page generated when the "Display this page in a Printer Friendly Format" icon is clicked.

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 Host
Leigh Brasington / EmailAddr / Revised 22 June 15