// JavaScript Document
// *** (2) MENU DATA ***
//
// Read this section VERY CAREFULLY, it explains how to arrange and tweak the menus themselves.
// To use this script you must create one or more PopupMenu() objects, that will contain all
// the menu data and settings used. This demo contains one, named 'pMenu', although you can
// have as many totally separate menus as you want on one page.
// Next we add menus and items to the object, using its startMenu() and addItem()
// commands. Each menu object MUST contain one menu named 'root', which is the first, always
// visible menu. The syntax of the startMenu() command is:
//
// startMenu('menu name', Vertical menu (true/false)?, left, top, width, default ItemStyle
// for items in this menu, optional parent frame/window or layer in which this menu resides);
//
// In order, the parameters are a name for the menu like 'root' or 'mFile', which you can use to
// refer to this menu from other menus, to pop it out.
// Next, pass 'true' if you want this to be a vertical stacked menu or 'false' if you want this
// to be a horizontal menu bar. You can orientate each menu differently this way.
// The Left and Top positions allow you to locate this menu either absolutely from the page or
// relative to menu item that pops it out. If you want to offset this menu from the item that pops
// it out, set the positions as NUMBERS, e.g. 130, 10 would put the upper-left corner of this menu
// 130px across and 10px down from the upper-left corner of the item that popped it out.
// If you put '130', '10' as positions in QUOTES, you can position the menu from the upper-left
// corner of the whole page. These strings can also include formulae to centre or scroll the menu,
// examples are included later on. Note: the 'root' menu is always positioned from the page corner.
// The 'width' depends on the orientation of the menu -- for vertical menus it's the width,
// for horizontal menus it is the height. Basically, it's the constant dimension for all the items.
// The parent window or layer parameter is optional, if not specified the current window is
// used -- this example does not use frames. See the frameset example file if you're using them,
// they are strings that when evaluated return a reference, like 'window.top'.
//
// Once you have created a menu, you add items to that menu using the addItem() command.
// You must give it THREE compulsory parameters: 1) The HTML/text to display in the item. 2) The
// menuname/filename/URL the item activates. 3) The action type or target frame of that item.
// All other parameters are optional -- you can override the menu's default ItemStyle with the
// item's own, and optionally override that was well by specifying a list of parameters in the
// same order as an ItemStyle, to give each item its own dimensions / colours etc.
// See the example menu below for an example of these extras...
//
// addItem('Text', 'URL or menuname', 'action type', optional ItemStyle, length, spacing,
// 'popout indicator', popout indicator position, etc... in the same order as ItemStyles);
//
// The third parameter, 'action type', tells the script what to do with the second parameter.
// You can tell the script to load a file in the current window or a particular frame, tell it
// to pop out a menu, or tell it to run a JavaScript command. You do these like this:
//
// addItem('Text', 'file.html', ''); //blank means opens up 'file.html' in the current window.
// addItem('Text', 'file.html', 'parent.content'); //opens 'file.html' in a frame named 'content'.
// addItem('Text', 'menuName', 'sm:'); //pops out another submenu called 'menuName'.
// addItem('Text', 'alert("Hello")', 'js:'); //runs a JavaScript command when clicked.
//
// Frame names should be valid JavaScript syntax, e.g. 'top.frameName' or 'parent.popupWin',
// evaluated from the the window containing the main script (this one). Also, this system means
// 'sm:' items aren't normally clickable. If you do want to add click or mouseover actions to
// items, see the "Optional Code" section of the script below.
//
// parameters 5 and 6 are colors I think
//
// See the example below if this seems complicated, it's quite easy once you get the hang of it.
// Thanks to Martin J. Cole for originally suggesting the syntax!
// If you want more information, there's a FAQ (Frequently Asked Questions) section on my
// site: http://www.twinhelix.com, on the 'Popup Menus' page, or try the 'Site Forums" perhaps.
// A PopupMenu() object must be passed its own name so it can reference itself when the menu
// is active. We also use a 'with' block to work with its properties and functions below.
var pMenu = new PopupMenu('pMenu');
with (pMenu)
{
// *** MOVE OR CENTRE THE MENU HERE ***
// To centre it, or scroll with the window etc, just include a global variable or formula as one
// of the positions. This script includes my page object, which has several useful methods, namely
// 'page.winW()', 'page.winH()', 'page.scrollY()' and 'page.scrollX()'. These return the current
// dimensions of the visible window area and the scroll position of the window, which can be
// used to position menus however you want. Try replacing the first startMenu() below with one of
// these commented lines, and scroll/resize the window to see how they work.
//startMenu('root', false, 'page.winW()/2 - pMenu.menu.root[0].menuW/2', 0, 17, hBar); // Centres.
//startMenu('root', false, 10, 'page.scrollY()', 17, hBar); // Floats with window as you scroll.
//startMenu('root', false, 10, 0, 17, hBar, 'frameName'); // To create in subframe.
// The 'root' menu is horizontal, positioned at (x = 10, y = something) and is 17px high, and items
// by default use the colours and dimensions in the 'hBar' ItemStyle defined above.
// This menu is also positioned over a similarly-coloured table in the HTML document above.
//startMenu('root', false, 10, 200, 17, hBar);
// Yes this should be an else if but there is something wrong then with isOp
if( isIE )
startMenu('root', false, '20', '206', 17, hBar);
else
startMenu('root', false, '20', '195', 17, hBar);
if( isOp )
startMenu('root', false, '20', '195', 17, hBar);
addItem(' Home & Info', 'mInfo', 'sm:', hBar, 110);
addItem(' Purchase', 'mPurchase', 'sm:', hBar, 110);
addItem(' Galleries', 'mGalleries', 'sm:', hBar, 110);
//addItem(' App Notes & Tutorials', 'mAppNote', 'sm:', hBar, 140);
//addItem(' Shop', 'mShop', 'sm:', hBar, 40);
startMenu('mInfo', true, 0, 22, 130, subM);
//addItem(' New Stuff', '#', '', notYet, 22);
addItem(' Front page', 'http://www.systronix.com/photo/index.html', '');
addItem(' Home page', 'http://www.systronix.com/photo/index2.html', '');
//addItem(' Conferences &
Appearances', 'http://www.systronix.com/appearances.html', '', '', 38);
//addItem(' Using this site', 'Help_Window("http://www.systronix.com/Templates/UsingSite.html", 300)', 'js:');
//addItem(' Stock Status', 'Help_Window("http://www.systronix.com/Templates/StockStatus.html", 600)', 'js:');
//addItem(' Educational
Purchase', 'Help_Window("http://www.systronix.com/Templates/EducationalSales.html", 600)', 'js:', '', 38);
//addItem(' Partners', 'mPart', 'sm:');
addItem(' Tiltive (blog)', 'http://tiltive.blogspot.com', '');
//addItem(' Press', 'mPress', 'sm:');
//addItem(' Privacy Policy', 'Help_Window("http://www.systronix.com/Templates/Privacy.html", 300)', 'js:');
addItem(' Contacting me', 'http://www.systronix.com/photo/contact.html', '');
addItem(' Systronix Home
(my main job)', 'http://www.systronix.com', '', '', 38);
startMenu('mPurchase', true, 0, 22, 180, subM);
//addItem(' Overview', '#', '', notYet, 22);
addItem(' Firebirds Soccer', 'http://bruceboyes.smugmug.com/', '');
addItem(' SYAC Swimming', 'http://bruceboyes.smugmug.com/sports/swimming', '');
addItem(' How to Buy My Photographs', 'http://www.bruceboyes.com/buyphoto.html', '');
addItem(' Complete Price List', 'http://www.bruceboyes.com/pricelist.html', '');
addItem(' Image Quality and
Color Management', 'http://www.bruceboyes.com/imagequality.html', '', '', 38);
startMenu('mGalleries', true, 0, 22, 180, subM);
//addItem(' Overview', '#', '', notYet, 22);
addItem(' Past index pages', 'mIndexArchive', 'sm:');
//addItem(' SYAC Swim Meet
2008 May 30', 'http://bruceboyes.smugmug.com/gallery/5077339_VP963#305872464_e3bAg', '', '', 38);
addItem(' Salt Lake Arts Academy
(view and purchase)', 'http://bruceboyes.smugmug.com/Salt%20Lake%20Arts%20Academy', '', '', 38);
addItem(' No Strings Attached
8th Puppetry Festival', 'http://bruceboyes.smugmug.com/gallery/7539297_Vqfda', '', '', 38);
addItem(' TUNA kids at Mountain Dell
March 2009', 'http://bruceboyes.smugmug.com/Sports/717878', '', '', 38);
addItem(' Bryce Canyon
Winter Festival 2009 Feb', 'http://bruceboyes.smugmug.com/Sports/717878', '', '', 38);
addItem(' SYAC Swim Meet
2008 May 30', 'http://www.bruceboyes.com/galleries/080530_SyacSwimMeet/', '', '', 38);
addItem(' SYAC Swim Meet
2008 May 31', 'http://www.bruceboyes.com/galleries/080531_SyacSwimMeet/', '', '', 38);
addItem(' OC Latin Dance Night', 'http://www.bruceboyes.com/galleries/080229_OcLatinDance', '');
addItem(' Open Classroom', 'http://www.ocslc.org', '');
addItem(' UMNH Summer Camp 07', 'http://www.umnh.utah.edu/pageview.aspx?id=20176', '');
//addItem(' Rusty Collar Tie', 'http://www.bruceboyes.com/galleries/20070828_BrickBolt', '');
addItem(' Another Language', 'http://www.anotherlanguage.org/projects/Elements/images.html', '');
addItem(' 326 D Street', 'http://www.bruceboyes.com/326dstreet', '');
addItem(' K Street 20060805', 'http://www.bruceboyes.com/20060805_d65_kst', '');
//addItem(' Aiden Swim 13', 'http://www.bruceboyes.com/aidenswim13', '');
addItem(' Silhouettes 20060808', 'http://www.bruceboyes.com/silhouettes', '');
addItem(' Silhouettes 20060828', 'http://www.bruceboyes.com/silhouettes_20060828', '');
addItem(' SmugMug Gallery
photos for sale', 'http://www.bruceboyes.smugmug.com', '', '', 38);
addItem(' pBase Gallery
(Mostly Skeleton Racing)', 'http://www.pbase.com/bruceboyes', '', '', 38);
addItem(' Aviation', 'http://www.systronix.com/photo/aviation.html', '');
addItem(' Mr. Lego™ Guy', 'http://www.systronix.com/photo/legoguy.html', '');
addItem(' 754 Roosevelt Ave', 'http://www.systronix.com/754roosevelt/', '');
//addItem(' gear For Sale', 'http://www.systronix.com/photo/forsale.html', '');
startMenu('mIndexArchive', true, 185, 0, 180, subM);
//addItem(' Overview', '#', '', notYet, 22);
addItem(' TUNA Juniors', 'http://www.bruceboyes.com/indexarchive/index_mtndell.html', '');
addItem(' Mysterious Woman', 'http://www.bruceboyes.com/indexarchive/MysteriousWoman.html', '');
addItem(' Skeleton Racing', 'http://www.bruceboyes.com/indexarchive/SkeletonBradley2007.html', '');
addItem(' Day of the Dead 20061021', 'http://www.bruceboyes.com/indexarchive/index20061021.html', '');
addItem(' Main Library 20061106', 'http://www.bruceboyes.com/indexarchive/index20061106.html', '');
addItem(' Unexpected Angel 20061112', 'http://www.bruceboyes.com/indexarchive/index20061112.html', '');
startMenu('mAppNote', true, 0, 22, 140, subM);
addItem(' New to Embedded
Java? Start Here:', 'mGetStart', 'sm:', '', 38);
addItem(' Tutorials', 'mTutor', 'sm:');
addItem(' App Notes', 'mApp', 'sm:');
addItem(' Educational Uses', 'mEduExam', 'sm:');
addItem(' White Papers', 'mPapers', 'sm:');
addItem(' Free Training', 'mFreeTrain', 'sm:');
addItem(' Paid Training', '', '', notYet, 22);
addItem(' Resource Links', '', '', notYet, 22);
// You can assign 'oncreate' events to specific menus. By default, the script has only one for
// the root menu that shows it when it is created. You may wish to change it to something like the
// following, which uses the animation function to show the menu, or delay its show altogether.
//menu.root[0].oncreate = function()
// { this.visNow=true; pMenu.position('root'); pMenu.showMenu('root') }
// Uncomment these lines to make specific menus show popouts on click rather than on mouseover.
//menu.root[0].subsOnClick = true;
//menu.mFile[0].subsOnClick = true;
// You can also customise hide or show delays (in milliseconds) to the menus. Defaults are:
//showDelay = 0;
//hideDelay = 500;
// Specify hideDelay as zero if you want to disable autohiding, and showDelay as a couple of
// hundred if you don't want the menus showing instantaneously when moused over.
// End of 'with (pMenu)' block. That's one menu object created, now we have to activate it...
}
// *** (3) MENU EFFECTS AND ANIMATION ***
// Now you've created a basic menu object, you can add optional effects like borders and
// shadows to specific menus. These functions are found in the "Optional Code" section
// below, you can edit them or delete them entirely if you don't want to use them, with
// no harm to the rest of the script itself.
// Add a border to an all menus using a specified ItemStyle. The syntax is:
// addMenuBorder(menuObject, ItemStyle,
// opacity of border, 'border colour', border width, 'padding colour', padding width);
// Opacity is a number from 0 to 100, or null for no filter, like the ItemStyles.
addMenuBorder(pMenu, window.subBlank,
null, '#666666', 1, '#CCCCDD', 2);
// Apply a dropshadow to specific menus again. The syntax is similar, but later on you
// pass arrays [...] for each layer of the shadow you want. I've used two grey layers
// here, but you can use as many or as few as you want. The syntax for the layers is:
// [opacity, 'layer colour', X offset, Y offset, Width Difference, Height difference]
// Opacity is from 0 to 100 (or null for no filter), and the X/Y offsets are the
// distance in pixels from the menu's top left corner to that shadow layer's corner.
// The width/height differences are added or subtracted to the current menu size, for
// instance the first layer of this shadow is 4px narrower and shorter than the menu
// it is shadowing.
addDropShadow(pMenu, window.subM,
[40,"#333333",6,6,-4,-4], [40,"#666666",4,4,0,0]);
addDropShadow(pMenu, window.subBlank,
[40,"#333333",6,6,-4,-4], [40,"#666666",4,4,0,0]);
// Add animation to the 'pMenu' menu object for supported browsers.
// Opera doesn't support clipping so we turn it off, and Mozilla versions prior to
// 1.x (such as Netscape 6) are too slow to support it, so disable there too.
// If you don't want animation, delete this entirely, and the menus will act normally.
// Change the speed if you want... it's the last number, between -100 and 100, and is
// defined as the percentage the animation moves each frame.
// The 'menuAnim' function is in the "Optional Code" section below, edit if you want to,
// I've put in a few extra tweaks in there like fading transitions if you're interested.
if (!isOp && navigator.userAgent.indexOf('rv:0.')==-1)
{
pMenu.showMenu = new Function('mN','menuAnim(this, mN, 100)');
pMenu.hideMenu = new Function('mN','menuAnim(this, mN, -100)');
// Alternatively: try the IE5.5+/Windows filters. Comment above two lines out and uncomment:
//pMenu.showMenu = function(mN)
// { menuFilterShow(this, mN, 'progid:DXImageTransform.Microsoft.fade(duration=1)') }
// There's a good list of transitions available from http://msdn.microsoft.com
// Add animation to other menu objects like this...
//anotherMenu.showMenu = new Function('mN','menuAnim(this, mN, 10)');
//anotherMenu.hideMenu = new Function('mN','menuAnim(this, mN, -10)');
}
// Advanced (or just plain determined to tweak everything) users: Custom item arrangement!
// Here you can extend a menu's overall dimensions, and then reposition or resize its items.
// You can arrange the items however you want within a menu, in a curve or similar,
// or even change the overall arrangement of the menu (put items in rows etc).
// Individual items have .iX and .iY which are positions and .iW and .iH which are dimensions.
// I recommend doing this *before* calling the border or shadow commands too :).
//with (pMenu.menu)
//{
// mFile[0].menuW += 20;
// mFile[0].menuH += 20;
// mFile[1].iX += 5;
// mFile[2].iX += 2;
// mFile[2].iW -= 2;
// mFile[3].iX += 5;
// mFile[4].iX += 10;
// mFile[4].iW += 10;
// mFile[4].iY += 3;
//}
// *** (4) EVENTS ***
//
// In JavaScript, there are document 'events' you need to set so any scripts you are using
// are notified of things like page loading/clicking/scrolling. If you've got several menus
// or another JavaScript entirely in your page, you'll need to add all their functions in here.
// For another menu object, call its functions like update() and position() next to pMenu's,
// I've put examples in to show where these need to go.
// The reason for these is that every time you set them, they override a previous setting.
// So make sure you collate all the functions that need to be called in here! Syntax:
//object.onevent = function()
//{
// function1();
// function2();
// ...
//}
// That's similar to:
// The most important event is one used to display the menu by calling one of several methods of
// any menu object(s) you have created. This is where you select the menu creation mode. 'Dynamic'
// mode inserts the menus into the document once it has finished loading and supports features
// like modifying the menu after creation. You update a menu in 'Dynamic' mode by just calling the
// .update() method of a menu object like 'pMenu'.
// 'Fast' creation mode writes the menus to the document here and now, which is faster and
// more reliable in many browsers but only when the document's loading -- you do this by passing
// 'true' without quotes to the update function to signal that we're inline.
// Opera only supports Fast mode and Netscape 4 only supports in Dynamic mode, so we use
// browser-detect code here. If you find some browser has troubles with one mode or another, try
// the other menu creation method -- see the "Cross-Browser" code at the very top of the SCRIPT
// tag for the variables used.
// Hardcore tweakers -- there's some extra code commented in the popOver() function at the top
// which lets you create the root menu on page load and other menus only as needed, which might
// be useful for very very large menus in a single frame. Look it up if you want.
if (!isNS4)
{
// Write menus now in non-NS4 browsers, by calling the "Fast" mode .update(true) method.
pMenu.update(true);
//anotherMenu.update(true);
}
else
{
// For Netscape 4, back up the old onload function and make a new one to update our menus.
// This is the regular "Dynamic" mode menu update, it works in IE and NS6 too if required.
var popOldOL = window.onload;
window.onload = function()
{
if (popOldOL) popOldOL();
pMenu.update();
//anotherMenu.update();
}
}
// Other events must be assigned, these are less complicated, just add or remove menu objects.
var nsWinW = window.innerWidth, nsWinH = window.innerHeight, popOldOR = window.onresize;
window.onresize = function()
{
if (popOldOR) popOldOR();
if (isNS4 && (nsWinW!=innerWidth || nsWinH!=innerHeight)) history.go(0);
pMenu.position();
//anotherMenu.position();
}
window.onscroll = function()
{
pMenu.position();
//anotherMenu.position();
}
// NS4 can't reliably capture clicks on layers, so here's a workaround.
if (isNS4)
{
document.captureEvents(Event.CLICK);
document.onclick = function(evt)
{
with (pMenu) if (overI) click(overM, overI);
//with (anotherMenu) if (overI) click(overM, overI);
return document.routeEvent(evt);
}
}
// Activate the window.onscroll() event in non-Microsoft browsers.
if (!isIE || isOp)
{
var nsPX=pageXOffset, nsPY=pageYOffset;
setInterval('if (nsPX!=pageXOffset || nsPY!=pageYOffset) ' +
'{ nsPX=pageXOffset; nsPY=pageYOffset; window.onscroll() }', 50);
}
// *** (5) OPTIONAL CODE *** DELETE IF YOU'RE NOT USING THESE!
// MOUSE EVENTS:
//
// If you want, you can assign functions to handle mouse events like mouse over/out/click.
// You'll want to use these for assigning click actions to 'sm:' items or status messages etc.
// 'with (this)' means use the properties of the menu object, and it's passed the current
// menu name (mN) and item number (iN) you can use to calculate the active item.
// To uncomment and activate, delete the /* and */ at the start and end.
/*
pMenu.onclick = function(mN, iN) { with (this)
{
// Do actions depending on the item that the mouse was over at the time of the click.
// You may with to use nested IFs or 'switch' statements etc. if you're familiar with JS.
if (mN == 'root')
{
if (iN == 1) status = 'Congratulations, you\'ve mastered clicking!';
// Click on second item in root menu will navigate to 'edit.html'. Copy and paste this for
// each menu item to add click actions to 'sm:' items...
if (iN == 2) location.href = 'edit.html';
if (iN == 3) location.href = 'help.html';
}
}}
// Set the status message to the URL if the 'action type' is nothing, and clear on mouseout.
pMenu.onmouseover = function(mN, iN) { with (this)
{
// By now, you either have my JS Object Browser script from my site or you need it... try
// embedding in an IFrame and typing 'pMenu' into its Go To field to see the menu internals.
with (menu[mN][iN]) if (!type) status = href;
}}
pMenu.onmouseout = function() { status = '' }
*/