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 Tuesday, 01-Feb-2011 2:26 PM

PHP/AJAX Website Template Set - Menu configuration

Your choice of menu systems to use is 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.

I do recommend you use the flyout-menu system as it provides easy navigation for your viewers and allows you to add a large number of new pages to your site without cluttering up the left sidebar area with separate links. As distributed, the flyout-menu is enabled in all the Base distribution files.

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.
 
 Note: some items have a wxonly="..." tag.  Those menu items are specific to a particular 
 weather software package, and if you aren't running that package, that item will not
 be displayed in the menu, but will appear in the HTML source as an HTML comment.
-->
<menu>
	<item caption="Home" link="wxindex.php" title="Home Page"/>
	<item wxonly="VWS" caption="Mesonet" title="Local Weather Exchange Stations" link="wxmesonet.php"/>
	<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="Nearby Buoys" link="wxbuoys.php"/>
-->
	<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 caption="UV Index Forecast" link="wxuvforecast.php"/>
	</item>
	<item caption="Almanac" title="Trends, Sun/Moon, Earthquakes">
	    <item wxonly="WD" caption="Weather Trends" link="wxtrends.php"/>
		<item caption="Station Graphs" link="wxgraphs.php"/>
		<item wxonly="WD" caption="Station Monthly Reports" link="wxhistory.php"/>
		<item wxonly="VWS,WL" caption="NOAA reports" link="wxnoaaclimatereports.php"/>
		<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"/>
	<item caption="Status" link="wxstatus.php" title="Status of weather software" />
<!--  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.
wxonly="VWS[,CU][,WD][,WL]" (optional)
This attribute specifies the specific weather software package(s) required to display this <item> in the flyout menu. If the running weather software is not in this list, the menu item will be inactive and displayed on the page as an HTML comment string..

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.

Configuring the non-flyout menu system

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="wxadvisory.php" title="Watches, Warnings, Advisories">Advisories</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.

How to add graphics and other links to the left-sidebar area

You can add other HTML to your pages in the left-sidebar area by editing the menubar.php script and inserting your new graphics/links just above the following code:

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

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

deformed-offering