deformed-offering

Free Weather Website Templates

They're free, but use at your own risk

The scripts referenced here are used in the operation of this weather station, and may be freely copied and used to support your station. Please note that you use these scripts at your own risk. No warranty is expressed or implied. I accept no liability for any damages that may ensue from their use.
You will need to configure them for your own particular weather station website.
RSS feed for Scripts Updates A RSS Feed is available to help keep you informed on updates to the scripts.

If you find one or more of the scripts useful to you, please consider making a donation to help offset the routine expenses of operation of this website.
Thanks for your kind support!

A Version History is available -- check back from time to time to see if there are updates to scripts you have downloaded earlier. Announcements of version updates and new scripts are made on WXForum.net and Weather-Watch forums and saratogaWXPHP Twitter account as they become available.

This page was updated Saturday, 24-Jul-2010 8:55 AM

Weather Display/PHP/AJAX Website Template Set - menubar.php config

Common Settings in Settings.php | USA specific | Canada specific | Canada-ML specific | World specific | World-ML specific | menubar.php configuration

New with Version 1.14 is a choice of menu systems to use determined by a Setting.php variable:

$SITE['flyoutmenu'] = true;
The new flyout-menu system is used and the menu is controlled by the XML menu definition in
flyout-menu.xml. The menu definition inside menubar.php is not used.
$SITE['flyoutmenu'] =false;
The menubar.php menu system is used and should be configured as described below.

The menubar.php has a simple structure to allow you to add/change/remove a link to a page in this one file and have it reflected on all pages in your site when the changed menubar.php is uploaded. Another feature of this code is to have the navigation bar highlight the menu entry for the current page the user is browsing.

Here is the (excerpted) menubar.php section for configuration:


<?php 
// NOTE: when adding new links to the site, put them in as <li></li> entries in
//   the <ul></ul> shown below.  The order of the links is the order they appear
//   in the left navigation menu.  
// Be careful to only use html as shown below, otherwise the program that
//   automatically shows which page you're on won't work quite right.
// Don't use single-quotes in the following area unless you prefix it with a 
//   backslash.
//   Correct:  "Steve\'s page"
//   Wrong:    "Steve's page"    <=== this will cause a PHP error in menubar.php
//
// Be sure to include a title="..." tag so folks can see more info via a tooltip
//   as they mouse over the link in the menu.
//Don't change the next line in any way
$html '
        <ul>
          <li><a href="wxindex.php" title="Home">Home</a></li>
          <li><a href="wxforecast.php" title="5-day Forecast">Forecast</a></li>
          <li><a href="wxsimforecast.php" title="WXSIM Forecast">WXSIM Forecast</a></li>
          <li><a href="wxradar.php" title="Radar">WU Radar &amp; Maps</a></li>
          <li><a href="wxgr3radar.php" title="GRLevel3 Radar">GRLevel3 Radar</a></li>
          <li><a href="wxadvisory.php" title="Watches, Warnings, Advisories">Advisories</a></li>
          <li><a href="wxtrends.php" title="Daily weather statistics">Daily Stats</a></li>
          <li><a href="wxgraphs.php" title="24, 72, &amp; Monthly Graphs">Graphs</a></li>
          <li><a href="wxastronomy.php" title="Sun and Moon Data">Astronomy</a></li>
          <li><a href="wxlinks.php" title="Useful Links">Links</a></li>
          <li><a href="wxabout.php" title="About This Site">About Us</a></li>
        </ul>
'
// end of links set for site. Don't change this line in any way
    
gen_navlinks($html); // generate the links set with highlight for the current page
?>

Each link inside the $html quoted string above has the structure:

<li><a href="wx___.php" title="something">LinkName</a></li>

To add a new link, just copy an existing link entry to a new line in the list and change the contents of the href=, title= and LinkName. The order of the list is the same as the order displayed in the Navigation area in the left-sidebar of the page.

You can add other HTML to your page in the left-sidebar area by inserting it just above the first <div> at

 </div>
</div> 
<!-- end of menubar -->

Be aware that the default 800px template has a Navigation area that has a width of about 114px, so don't insert any images wider than 110px in this area.

Configuring your Flyout menu

The flyout-menu is controlled by an XML file (flyout-menu.xml) in the same directory as your wx...php pages reside.

XML Menu definition file

The menu definition XML file looks like this:

    <?xml version="1.0" encoding="iso-8859-1" ?>
<!-- menu control file for flyout-menu.php program -->
<!-- Ken True - available at http://saratoga-weather.org/scripts-CSSmenu.php -->
<!-- NOTE: this file must be correct XML with all tag items properly closed  -->
<!-- Structure of file is

  <menu>
     <item caption="Main 1" link="main1.php" title="topmost menu item"/>
	 <item caption="Main 2" title="Main menu number 2">
	    <item caption="Drop down 1" link="dropdown1.php"/>
	    <item caption="Drop down 2" link="dropdown2.php">
		   <item caption="Flyout 1" link="flyout1.php"/>
		   <item caption="Flyout 2" link="flyout2.php"/>
		   <item caption="Flyout 3" link="flyout3.php">
		     <item caption"Fourth Level Flyout 1" link"level4a.php"/>
		     <item caption"Fourth Level Flyout 2" link"level4b.php"/>
		     <item caption"Fourth Level Flyout 3" link"level4c.php"/>
		   </item>
		</item>
	    <item caption="Drop down 3" link="dropdown3.php"/>
	 </item>
   </menu>
   
 Failure to follow this structure or nest more than 4 sublevels
 may result in unexpected (and incorrect) results .. the top/sub1/sub2/sub3 four
 level menu should allow for highly complex websites.
 
 test your menu XML at http://validator.w3.org/ if you're having a problem.  The proper
 syntax will be checked and (hopefully) erata spotted for you.
-->
<menu>
	<item caption="Home" link="wxindex.php" title="Home Page"/>
	<item caption="Live" title="Realtime display of weather conditions">
		<item caption="Weather-Display Live" 
		title="Realtime display of conditions using WDL" link="wxlive.php"/>
	</item>
	<item caption="Radar">
	    <item caption="Local Radar" link="wxradar.php" title="Radar"/>
<!--
		<item caption="GRLevel3 Radar" link="wxgr3radar.php" title="NEXRAD Radar using GRLevel3" />
-->
	</item>
	<item caption="Mesomap" title="Mesomaps, Marine Buoys">
		<item caption="MesoMap Live" link="wxmesomap.php"
		title="Realtime display of nearby conditions using MML"/>
<!--
		<item caption="Nearby Buoys" link="wxbuoys.php"/>
-->
	</item>
	<item caption="Forecast &amp; Advisories" title="Weather outlook">
		<item caption="Forecast details" link="wxforecast.php"/>
		<item caption="Advisories" link="wxadvisory.php" />
		<item caption="WXSIM Forecast details" link="wxsimforecast.php"/>
	</item>
	<item caption="Almanac" title="Trends, Sun/Moon, Earthquakes">
		<item caption="Weather Trends" link="wxtrends.php"/>
		<item caption="Station Graphs" link="wxgraphs.php"/>
		<item caption="Station Monthly Reports" link="wxhistory.php"
		  title="Daily condition reports by Month" />
		<item caption="Sun/Moon Almanac" link="wxastronomy.php"/>
		<item caption="Earthquake activity" link="wxquake.php"/>
<!--
        <item caption="UK Earthquakes" link="wxquakeUK.php"/>
-->
	</item>
    <item caption="Links" link="wxlinks.php"/>
    <item caption="About" link="wxabout.php"/>
<!--  remove this and the finishing HTML comment line to enable the wxcontact.php form (if installed)
	<item caption="Contact" link="wxcontact.php"/>
 -->
    <item caption="Website Map" link="wxsitemap.php"/>
</menu>

Getting correct XML syntax is very important-- the XML parser will complain (and not generate the desired code) if the XML statements aren't terminated correctly. The XML file MUST start with the line:
<?xml version="1.0" encoding="iso-8859-1" ?> and be followed by <menu> as the first non-comment statement, and the last line in the file must be </menu>

There are only two XML tags necessary:
The <menu></menu> pair must surround the <item></item> tag set.
The <item> tags generate the menu links and there are three attributes available for each item tag:

caption="[link text to display]" (required)
The caption="" attribute is required and specifies the text to display in the menu item. I recommend you keep it to one word for top level menus. Submenus may contain more words and will text-wrap if needed.
Note: for multilingual templates, the text in this tag can be translated by adding langlookup entries to your language-[LL]-local.txt file. It is recommended you use English in this attribute and use the language translation to change for other languages. See multilanguage page for more information.
link="[page url address]" (optional)
The link="" attribute is optional for top level and submenu group items, but should specify the page to link to if the menu item is selected by the mouse. The (relative) URL of the page to link to should be used with this tag. Relative (./page.php) or absolute (/subdir/page.php) addresses may be used. If you have multi-level sites (with pages in subdirectories, using absolute addresses here is recommended. Any specification acceptable to the src="..." attribute of an <a> tag is ok inside the link="" attribute.. so you could have a link="http://some.website.com/apage.html" as your link.
title="[mouseover tooltip text]" (optional)
The title="" attribute is optional. If used, the text will be displayed as a tooltip when the cursor is placed over the caption item. This may be useful to present additional information to the visitor, particularly for one-word top level menu items. It may be optionally used with any menu item, but should be used sparingly as the tooltip will appear and may temporarily mask lower menu items.
Note: for multilingual templates, the text in this tag can be translated by adding langlookup entries to your language-[LL]-local.txt file. It is recommended you use English in this attribute and use the language translation to change for other languages. See multilanguage page for more information.
target="_blank" (optional)
The target="" attribute is optional and works the same way as target="" attribute does in the HTML <a target="..."> tag does. If target="_blank" is used, then the link will open in a new browser window or tab.
This attribute is ignored if a link="..." attribute is not present.
img="./imagedir/image.gif" (optional)
This attribute acts the same as the src="..." attribute in an <img src="..."/> HTML statement.
Use it to include a small image (10x10 or 14x14px) in the menu. Placement in the text (from the caption='...') defaults to the left of the caption. Change it to the right side (end) of the caption by using align="right" attribute.
align="right|left" (optional)
This attribute specifies where the image (from the img="..." attribute) is placed in the generated link.
align="left" places the image in front of the caption="..." text.
align="right" is the default and places the image after the caption="..." text.

Note: the target=, img=, and align= attributes are available in flyout-menu.php V1.02 (Canada, USA, World) and flyout-menu.php (ML) V1.04 (Canada-ML, World-ML) released 23-Jul-2010.

The order of the attributes in the <item> statement is not important. By convention, I used caption, link, title just for my readibility of the XML file. What is important is that the <item> needs to be closed, either by:
<item caption="..." link="..." title="..."/> [the trailing '/>' is a self close to the item tag] or by
<item caption="..." link="..." title="..."> ... </item> [the </item> closes a <item> tag]

The <item> tags can be nested up to 4 levels deep. The topmost <item> (the ones not enclosed by other <item> tags) are the basic selectors for the menu. The second, third and fourth level <item> are in dropdown and fly-out menus.

To create a submenu, simply enclose one or more <item .../> tags within a <item ...> </item> pair and a submenu will be created. See the example XML for more information. It is recommended that you use indent to help you visually inspect <item> nesting .. it is not required by the XML parser, but it sure makes it easier to find errors. Whitespace (including new-lines) is ignored in all areas EXCEPT within quoted strings.
XML rules require you to use &amp; for &, &lt; for < , &gt; for > and &quot; for " within the double-quoted strings.

How to test your flyout-menu changes

Since XML syntax for the flyout-menu must be strictly accurate, it's a good idea to test your changes before you implement them 'in production' on your website, since a single XML error will make your entire website not operational.

Until you feel fully comfortable with adding/changing/deleting menu items/groups from your flyout-menu.xml, I suggest you use the following procedure to make changes to your flyout-menu:

  1. Copy (on your PC) flyout-menu.xml to flyout-menu-test.xml
  2. Edit flyout-menu-test.xml on your PC and when finished, upload to your website
  3. Check function of menu by adding ?menu=test to the URL of any of the wx...php pages in your browser (like http://saratoga-weather.org/template/WD-USA/wxindex.php?menu=test )
  4. If the menu displays correctly, then proceed to step 5., otherwise start again at step 2
  5. Copy flyout-menu-test.xml over flyout-menu.xml on your PC and upload to your website.

Using this procedure will ensure that your weather website will be viewable while you make changes to your flyout menu.

Note: you can also copy your flyout-menu.xml to a different filename like flyout-menu-alt.xml then test it on any page by using ?menu=alt in the URL in your browser. This will allow you to have multiple menu files for testing as you develop your site.

deformed-offering