Seva Software - Sample

Sample Web Page

Download

Click here to download the JavaScript and sample web page.

Sample Web Page using the Popup Menu JavaScript

<HTML>
<HEAD>
<META NAME="author" CONTENT="Michael Davis">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<TITLE>Seva Software - Sample</TITLE>
<META NAME="description" CONTENT="Seva Software - Sample">
<LINK rel="stylesheet" href="stylesheet.css" type="text/css">
<SCRIPT LANGUAGE="JavaScript" SRC="create_menu.js"></SCRIPT>
</HEAD>
<body background="background.jpg" onScroll=on_scroll()>
<SCRIPT LANGUAGE="JavaScript">add_popup_menu();</SCRIPT>

<td valign=top nowrap class="toolbarW">
<SCRIPT LANGUAGE="JavaScript">add_menu("products");</SCRIPT>
<NOSCRIPT>JavaScript is required <BR>to see the menus on the left</NOSCRIPT>
</td>

<td>
<P ALIGN="CENTER"><FONT SIZE=+4>Sample Web Page</FONT></P>

<P ALIGN="CENTER"><IMG SRC="bar.jpg" ALT="----------------"></P>
<A NAME="SampleWebPage"></A>
<P ALIGN="CENTER"><FONT SIZE=+2>Sample Web Page</FONT></P>
<p>Your sample data here</p>

<P ALIGN="CENTER"><IMG SRC="bar.jpg" ALT="----------------"></P>
<A NAME="JavaScript"></A>
<P ALIGN="CENTER"><FONT SIZE=+2>JavaScript</FONT></P>
<p>Your sample data here</p>

<SCRIPT LANGUAGE="JavaScript">add_thank_you("contributing");</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">add_logos();</SCRIPT>
</td>

</table>
</BODY>
</HTML>
</td>

JavaScript for the Popup Menu

//var iens6=document.all||document.getElementById;  // Browser Check
var x=0;             // the x position of the mouse when the event occurred
var y=0;             // the y position of the mouse when the event occurred
var menuY=0;         // the current y or top position of the menu
var moveMenu=null;   // null - not defined yet, 0 - no menu relocation, 1 - menu is relocated
var closeTimer=750; // menus automatically close after 3/4 of a second if another menu is not entered within that 1 second

var theobj;          // a pointer to the pop up menu
var timerID;         // used for closing the pop up menu
var isOpen='';       // the name of the last opened pop up menu
var activeMenu;      // the name of the currently active menu

var theobj2;         // a pointer to the pop up sub-menu
var timerID2;        // used for closing the pop up sub-menu
var isOpen2='';      // the name of the last opened pop up sub-menu

// This takes an item and it's related href (URL) and returns a consistent and nicely formatted HTML string for the menu
function formatI(item, href)
{
   return '<A class="toolbar" HREF="' + href + '">   ' + item + '</A></BR>'
}

// This takes an two items and their related hrefs (URLs) and returns a consistent and nicely formatted HTML string putting each item in a column of a two column table for the menu.
function formatT(item1, href1, item2, href2)    // the T represents a Table format
{
   return '<tr><td align=center>' + formatI(item1, href1) + '</td>' + '<td align=center>' + formatI(item2, href2) + '</td></tr>'
}

// This is exactly like formatI but adds an additional event that opens a sub-menu with the name of item
function formatS(item, href)  // the S indicate that this item will open a sub-menu
{
   return '<div class="toolbar" onMouseOut=close_menu2() onMouseOver=open_menu2("' + item + '")>' + formatI(item, href) + '</div>'
}

// These are the items that appear in the left menu of the every Seva Software web site.
// If the item has a pop up menu, then the name must also appear in the sub_menu array with content of the pop-up menu.
menu_items = ["Home",       "News",          "Products",      "Services",      "Clients",      "Information"]
// These are web pages or references for each items in the left menu of the every Seva Software web site.
menu_hrefs = ["index.html", "whatsnew.html", "products.html", "services.html", "clients.html", "information.html"]

// This array contains the content of each pop up menu.  There is an entry in this array for every pop up menu.
sub_menu = new Array()
size_menu = new Array()

size_menu['Home'] = 7
sub_menu['Home'] = '' +
   formatI('Who am I?', 'index.html#WhoAmI') +
   formatI('What I do?', 'index.html#WhatIDo') +
   formatI('How I can help?', 'index.html#HowICanHelp') +
   formatI('How you can help?', 'index.html#HowYouCanHelp') +
   formatI('Freeware Policy', 'index.html#FreewarePolicy') +
   formatI('Contact Information', 'contact_info.html') +
   formatI('Menu Relocation', 'index.html#MenuRelocation')

size_menu['News'] = 5
sub_menu['News'] = '' +
   formatI('09/2002 - The JavaScript used to create the menus for this web site is now available', 'products.html#ThisWebSite') +
   formatI('09/2002 - New web site installed', 'index.html') +
   formatI('03/2002 - Locana 0.81 Released', 'locana.html') +
   formatI('11/2001 - ArunaDB 0.80 Released', 'arunadb.html') +
   formatI('02/2001 - Released Access to PostgreSQL Conversion Tool', 'products.html#Upsizing') +
   formatI('06/2000 - Released Coin Wizard', 'products.html#CoinWizard') +
   formatI('To receive email notification of changes to this web site', 'whatsnew.html#EmailNotification')

size_menu['Products'] = 8
sub_menu['Products'] = '' +
   formatI('Freeware', 'products.html#Freeware') +
   formatI('Locana', 'locana.html') +
   formatI('Locana Applets', 'products.html#LocanaApplets') +
   formatI('ArunaDB', 'arunadb.html') +
   formatI('Upsizing Tools', 'products.html#Upsizing') +
   formatI('This Web Site', 'products.html#ThisWebSite') +
   formatI('Coin Wizard', 'products.html#CoinsWizard')

size_menu['Services'] = 9
sub_menu['Services'] = '' +
   formatI('Outsourcing', 'services.html#Outsourcing') +
   formatI('Consulting', 'services.html#Consulting') +
   formatI('Contracting', 'services.html#Contracting') +
   formatI('Upgrading', 'services.html#Upgrading') +
   formatI('Integrating', 'services.html#Integrating') +
   formatI('Problem Solving', 'services.html#ProblemSolving') +
   formatI('Software Devel.', 'services.html#SoftwareDevelopment') +
   formatI('Web Development', 'services.html#WebDevelopment') +
   formatI('Database Design', 'services.html#DatabaseDesign')

size_menu['Clients'] = 6
sub_menu['Clients'] = '' +
   formatI('TV Guide', 'clients.html#TVGuide') +
   formatI('MasterPath', 'clients.html#MasterPath') +
   formatI('Fort Lupton Market', 'clients.html#FortLupton') +
   formatI('DISC', 'clients.html#DISC') +
   formatI('DOD', 'clients.html#DOD')

size_menu['Contributing'] = 6
sub_menu['Contributing'] = '' +
   formatI('How to Contribute', 'contributing.html#HowToContribute') +
   formatI('Why Contribute', 'contributing.html#WhyContribute') +
   formatI('Contributors', 'contributing.html#Contrubutors') +
   formatI('How to Invest', 'contributing.html#HowToInvest') +
   formatI('Why Invest', 'contributing.html#WhyInvest') +
   formatI('Investors', 'contributing.html#Investors')

size_menu['Information'] = 3
sub_menu['Information'] = '' +
   formatS('Languages', 'languages.html') +   // these will open a sub-menu
   formatS('Databases', 'databases.html') +
   formatS('Systems', 'systems.html')

size_menu['Languages'] = 8
sub_menu['Languages'] = '<table cellpadding=5 border=groove>' +
   formatT('Ruby', 'languages.html#Ruby', 'HTML', 'languages.html#HTML') +
   formatT('Java', 'languages.html#Java', 'JavaScript', 'languages.html#JavaScript') +
   formatT('C#', 'languages.html#CS', 'CGI', 'languages.html#CGI') +
   formatT('Perl', 'languages.html#Perl', 'Tk', 'languages.html#Tk') +
   formatT('C++', 'languages.html#CP', 'SQL', 'languages.html#SQL') +
   formatT('C', 'languages.html#C', 'PL/SQL', 'languages.html#PLSQL') +
   formatT('Modula2', 'languages.html#Modula2', 'ODBC', 'languages.html#ODBC') +
   formatT('Fortran', 'languages.html#Fortran', 'COBOL', 'languages.html#COBOL') +
   '</table>'

size_menu['Databases'] = 6
sub_menu['Databases'] = '' +
   formatI('Database Terms', 'databases.html#Terms') +
   formatI('Choosing A Database', 'databases.html#ChoosingADatabase') +
   formatI('ArunaDB', 'databases.html#ArunaDB') +
   formatI('PostgreSQL', 'databases.html#PostgreSQL') +
   formatI('Oracle', 'databases.html#Oracle') +
   formatI('SQL Server', 'databases.html#SQLServer') +
   formatI('Access', 'databases.html#Access') +
   formatI('MySQL', 'databases.html#MySQL')

size_menu['Systems'] = 7
sub_menu['Systems'] = '' +
   formatI('Operating System Terms', 'systems.html#Terms') +
   formatI('Linux', 'systems.html#Linux') +
   formatI('FreeBSD', 'systems.html#FreeBSD') +
   formatI('Windows', 'systems.html#Windows') +
   formatI('MAC OS', 'systems.html#MACOS') +
   formatI('HPUX', 'systems.html#HPUX') +
   formatI('DEC OSF', 'systems.html#OSF') +
   formatI('MSDOS', 'systems.html#MSDOS')

// This store the position of the mouse on every mouse move event in the window so Mouse Over events can track where the mouse is
function getXY(e) {
	if (document.all) {
		x=event.x;
		y=event.y;
	}
	else {
		x=e.pageX;
		y=e.pageY;
	}
}

// This relocates the menu on the left to the new_y position
function relocate_menu(new_y) {
   //alert(new_y + ' == ' + menuY)
   if (new_y == menuY) return nil;     // we don't need to relocate
   obj = (document.getElementById ? document.getElementById('left_menu') : document.all.left_menu)
   obj.style.top = new_y + 10
   menuY = new_y + 10
}

// This relocates the menu when the user scrolls around in the web page only if menu relocation is enabled
function on_scroll() {
   if (moveMenu == null) moveMenu = get_menu_relocation();    // retrieve the cookie so we can determine the value of the menu relocation
   if (moveMenu == 0)  return null;   // moving the menu has been disabled
	if (window.pageYOffset >= 0 && window.pageYOffset != menuY)
	   relocate_menu(document.pageYOffset);   // netscape
	if (document.body.scrollTop >= 0 && document.body.scrollTop != menuY)
	   relocate_menu(document.body.scrollTop);         // ie
}

// This saves the turns menu relocation value in a cookie
function save_menu_relocation(value)
{
   moveMenu = value;
   obj = (document.getElementById ? document.getElementById('toggle_menu_relocation_button') : document.all.toggle_menu_relocation_button)
   //alert(obj.value + ' - ' + value)
   if (value == 0) {
      exp = new Date()
      expn = exp.getTime() + (90*24*60*60*1000);   // the cookie is good for 90 days from the last time the web site was hit
      exp.setTime(expn);
      document.cookie = 'ToggleMenuRelocation=0; expires=' + exp.toGMTString();  // store a cookie so the new setting is remembered
      obj.value = "Turn Menu Relocation On"
      relocate_menu(0); // let's send the menu to the top of the display
   }
   else {
      if (document.cookie) // delete the cookie if it exists
         document.cookie = 'ToggleMenuRelocation=1; expires=Thu, 01-Jan-70 00:00:01 GMT'     // the default is that menu_relocation is on, so lets delete the cookie
      obj.value = "Turn Menu Relocation Off"
      on_scroll();   // let's put the menu in the right spot
   }
}

// This retrieves and returns the state of the menu relocation value from a cookie
function get_menu_relocation()
{
   if (document.cookie && document.cookie.indexOf('ToggleMenuRelocation=0') >= 0)
      return 0  // menu relocation has been turned off
   return 1  // menu relocation is on by default
}

// This toggles menu relocation on and off
function toggle_menu_relocation()
{
   if (moveMenu == null) moveMenu = get_menu_relocation();    // retrieve the cookie so we can determine the value of the menu relocation
   save_menu_relocation((moveMenu == 0 ? 1 : 0));
}

document.onmousemove=getXY    // make sure we remember the x,y position of the mouse for mouse over events
document.onmouseup=on_scroll  // This is needed for netscape to reposition the menu after clicking on the scroll bar

var popupLeft = 140;                   // the location of the pop up menu
var popupSubLeft = popupLeft + 105;    // the location of the pop up sub-menu
var lineHeight = 20;                   // the pixel height of a single line in a menu, this used to estimate the height of the menu in ns

// Returns the pixel position to use for the top of the menu
function get_menu_top(myobj, menu_name)
{
   var winHeight;
   var maxHeight;
   if (document.body.clientHeight)
      winHeight = document.body.clientHeight;  //ie
   if (myobj.clientHeight > 0) {
      maxHeight = myobj.clientHeight;
      //alert(myobj.clientHeight)
   }
   else {    // estimate the height of each menu
      maxHeight = 20 + (size_menu[menu_name] + 1) * (lineHeight + (menu_name=='Languages' ? 5 : 0));   // make sure we take the padding and the header into account
      //alert(maxHeight + ' =  20 + (' + size_menu[menu_name] + ' + 1) * (' + lineHeight + ' + ' + (menu_name=='Languages' ? + 5 : 0) + ') - menu_name:' + menu_name)
   }

// my_y is the position of the mouse relative to the top of the window, i.e. no ScrollTop
	if (document.all)    // ie
      my_y = y;         // y does not include scrollTop for ie
   else                 // ns
      my_y = y - document.body.scrollTop;  // y includes scrollTop for ns

//alert('menu: ' + my_y + ' + ' + maxHeight + ' > ' + winHeight)
   if (my_y + maxHeight > winHeight)   // This would clip the bottom menu so lets put the menu at the bottom of the page
      h = winHeight - maxHeight - 20;  // make sure the whole menu is visible
   else
      h = my_y - (maxHeight/2) + 20;   // center the pop up menu
   if (h < 0) h = 0;
   if (moveMenu == 1)
      return h + document.body.scrollTop; // only if menu relocation is on
   return h;
}

// This returns a string of HTML to use for the content of a menu item in the left menu bar.  It includes the sub-menu if there is one.
function format_menu_item(menu_name)
{
   return '<div align="CENTER" style="background-color:#00F0F0"><font size=+1>' + menu_name + '</font></div>' + sub_menu[menu_name];
}

// Opens the pop up menu
function open_the_menu(myObj, menu_name, myLeft)
{
	myObj.style.borderStyle = 'groove'
	myObj.style.backgroundColor = '#E0FFFF'  // light blue
	if (document.all) {
   	myObj.innerHTML = ""
		myObj.insertAdjacentHTML("BeforeEnd", format_menu_item(menu_name));
		}
	else
	   myObj.innerHTML = format_menu_item(menu_name);
   myObj.style.top = get_menu_top(myObj, menu_name);
   myObj.style.left = myLeft;
	myObj.style.visibility = "visible";
}

// Opens the pop up menu
function open_menu(menu_name)
{
   activeMenu = menu_name;
	clearTimeout(timerID)                  // make sure we don't close the open menu
	if (isOpen == menu_name) return null;  // already open
	if (theobj2) close_the_menu2();        // changing menus closes the sub-menu
	if (y <= 20) return null;              // make sure we have a valid before continuing
   theobj = (document.getElementById ? document.getElementById('left_popup_menu') : document.all.left_popup_menu);
	isOpen = menu_name;
   open_the_menu(theobj, menu_name, popupLeft);
}

// Closes the pop up menu
function close_the_menu()
{
	isOpen = '';
	theobj.innerHTML = ""
	theobj.style.visibility = "hidden"
}

// Closes the pop up menu after 1 second.  This allows the user to navigate to another menu and stop the closing menu.
function close_menu()
{
   activeMenu = null;
   timerID = setTimeout("close_the_menu()", closeTimer)
}

// Opens the pop up sub-menu
function open_menu2(menu_name)
{
	clearTimeout(timerID)                  // make sure we don't close the open menu
	clearTimeout(timerID2)                 // make sure we don't close the open sub-menu
	if (isOpen2 == menu_name) return null; // already open
	if (y <= 20) return null;              // make sure we have a valid before continuing
   theobj2 = (document.getElementById ? document.getElementById('left_popup_menu2') : document.all.left_popup_menu2);
	isOpen2 = menu_name;                   // remember the open menu so we don't reopen it
   open_the_menu(theobj2, menu_name, (x > popupLeft ? popupSubLeft : popupLeft));
}

// Closes the pop up sub-menu
function close_the_menu2()
{
	if (activeMenu == null)
      timerID = setTimeout("close_the_menu()", 250);
	isOpen2 = '';
	theobj2.innerHTML = ""
	theobj2.style.visibility="hidden"
}

// Closes the pop up sub-menu after 1 second.  This allows the user to navigate to another menu and stop the closing menu.
function close_menu2()
{
   timerID2 = setTimeout("close_the_menu2()", closeTimer)
}

// This should be called in the body of every web page and puts invisible objects in the web page to use for the pop up menu and pop up sub-menu
function add_popup_menu()
{
   document.write(
      '<div class="toolbar" id="left_popup_menu" style="padding:10;left:0;top=0;visibility:hidden;position:absolute;z-index:1;overflow:hidden;" onMouseOver="clearTimeout(timerID)" onMouseOut="close_menu()"></div>'+
      '<div class="toolbar" id="left_popup_menu2" style="padding:10;left:0;top=0;visibility:hidden;position:absolute;z-index:1;overflow:hidden;" onMouseOver="clearTimeout(timerID2);clearTimeout(timerID)" onMouseOut="close_menu2()"></div>'
      )
}

// Creates the clickable items (left menu) on the left side of all Seva Software web pages, this eliminates the need for frames
function add_menu(parent)
{
   document.write('<div class="toolbar" id="left_menu" style="position:absolute;left:10;top:10">');  // style="position:absolute;left:0;top:0" allows me to reposition the menu but has issues
   document.write('<A HREF="http://sevasoftware.com"> <IMG SRC="logo.jpg" ALT="Seva Software"></A><BR>'); // add the logo
   for(i=0; i<menu_items.length; i++) {  // for each item in the menu_items array
      document.write(
         '<div class="toolbar" onMouseOver=open_menu("' + menu_items[i] + '") onMouseOut=close_menu()>' +
         '<P><FONT SIZE=+2><A class="toolbar" HREF="' + menu_hrefs[i] + '">' + menu_items[i] + '</A></FONT></P>' +
         '</div>'
      )
      if (parent == menu_items[i].toLowerCase())
         document.write('<pre onMouseOver=close_the_menu()>' + sub_menu[menu_items[i]] + '</pre>');
   }
   document.write('</div>');
};

// Adds the thank you line to the bottom of all Seva Software web pages
function add_thank_you(page_name)
{
   document.write(
      '<P align=center><IMG SRC="bar.jpg" ALT="----------------"></P>' +
      '<P align=center>' +
      '<BR>Thanks for taking the time to visit this web page.  I hope you found the information contained in this page useful.' +
      "<BR>Please email any questions, concerns, or issues with this web site to <A HREF='mailto:webmaster-" + page_name + "@SevaInc.com'>webmaster@sevasoftware.com</A>." +
      "<BR>Please email any additional information you would like to see added to this web site to <A HREF='mailto:webmaster-" + page_name + "@SevaInc.com'>webmaster@sevasoftware.com</A>." +
      '<BR>Please remember Seva Software when your company would benefit from an experienced database designer and software engineer.' +
      '</P>'
   )
}

// Adds the Seva Software logos to the bottom of all Seva Software web pages, this includes the last updated date below the logos
function add_logos()
{
   document.write(
      '<BR><div align=CENTER>' +
      '<a href="http://www.arunadb.org"><img src="logos/arunadb.jpg" alt="arunadb.org" title="A database server written in Ruby"</a>' +
      '<a href="http://www.locana.org"><img src="logos/locana.jpg" alt="locana.org" title="A GUI and GUI builder written in Ruby"</a>' +
      '<a href="http://www.ruby-lang.org"><img src="logos/ruby.jpg" alt="ruby-lang.org" title="The Ruby programming language"</a>' +
      '<a href="http://www.coolwell.org"><img src="logos/coolwell.jpg" alt="coolwell.org" title="A great web site for aspiring writers and authors"</a>' +
      '<a href="http://www.sevasoftware.com"><img src="logos/seva.jpg" alt="sevasoftware.com" title="A great web site for free software"</a>' +
      '</div>'
   )
   add_last_updated('center');
}

// Adds the modified date of the web page to the web page, location can be 'left', 'center', or 'right'
function add_last_updated(location)
{
   var m = "Last Updated: " + document.lastModified;
   var p = m.length-8;
   document.write('<BR><font size=2><P align=' + location + '>' + m.substring(p, 0) + '</P></font>');
}