Navigation through scripting. [Archive]

View Full Version : Navigation through scripting.

saeed

01-10-2003, 08:23 AM

can anybody help me how to create navigation like this website (http://www.highdevelopment.com/hist.asp)
most work in done through mouse onover method. I want to know that when a user clicks on any link. That particular link changes its color. That type of functionality can be easily done thorugh HTML but it takes little bit time then script. I want to centralize the script code like includes in ASP.

codefox

01-10-2003, 12:01 PM

Here's the code I used for a site.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>PMO</title>
<style>
body {
margin: 0;
}

table.titleBar {
width: 100%;
text-align: center;
border-collapse: collapse;
border: 1px solid white;
}
td.titleBar {
color: white;
background-color: #00659C;
border: 1px solid white;
font-family: tahoma, verdana, helvetica;
font-weight: bold;
font-size: 8pt;
}
a.titleBar {
display: block;
text-decoration: none;
padding: 1px;
}
a:link.titleBar, a:visited.titleBar {
color: white;
background-color: #00659C;
}
a:hover.titleBar, a:active.titleBar {
color: #00659C;
background-color: white;
}
.titlebar.selectedItem {
background-color: navy;
}
.titlebar.unselectedItem {
background-color: #00659C;
}
</style>
</head>

<body>

<%
' List of menu items; The first element of the second level of the array has
' the name of the menu item and the second element contains the links to
' which the item points to.
Dim asMenuItems, iItems, iItemWidth
asMenuItems = array("Home", "Projects", "Links", "Admin", "Logout")
iItems = UBound(asMenuItems) + 1 ' Total number of elements in the array
iItemWidth = CInt(100 / iItems) ' The width of each cell in the table row of the title-bar

' The menu-item selected by the user
Dim sSelectedItem
sSelectedItem = Trim(LCase(Request.QueryString("menuOption")))
If Len(sSelectedItem) = 0 Then ' No option was selected; set a default option
sSelectedItem = Trim(LCase(asMenuItems(0)))
End If
%>
<table class="titleBar" width="100%" cellpadding="1" cellspacing="0" border="0">
<tr>
<%
For iCnt = 0 To UBound(asMenuItems)
If Trim(LCase(asMenuItems(iCnt))) = sSelectedItem Then
%>
<td class="titleBar" align="center">
<a class="titleBar selectedItem"><% =asMenuItems(iCnt) %></a>
</td>
<%
ElseIf LCase(asMenuItems(iCnt)) = "logout" Then ' The "logout" option should close the window
%>
<td class="titleBar" align="center">
<a class="titleBar unselectedItem" href="javascript:window.close();"><% =asMenuItems(iCnt) %></a>
</td>
<%
Else
%>
<td class="titleBar" align="center">
<a class="titleBar unselectedItem" href="menu.asp?menuOption=<% =asMenuItems(iCnt) %>"><% =asMenuItems(iCnt) %></a>
</td>
<%
End If
Next
%>
</tr>
</table>

</body>

</html>

Hope you could modify it to suit your needs.

whammy

01-11-2003, 12:30 AM

The easiest way is to just have each possible "page name" as an array in javascript, and to then display the appropriate images accordingly. Of course you would modify the javascript depending upon which page you are on.

You can also do this server-side by assigning some variable like MENU_ITEM or whatever, and then modifying the javascript accordingly before you send the HTML to the client.

aCcodeMonkey

01-11-2003, 09:37 AM

I use a variety shared menu scripts. The scripts are stored in *.js files and called from the webpage by linking the files as needed.

Example: <script language="javascript" src="Menus.js"></script>

Since the library files are not parsed by the webserver, I to use ASP to set the "logon" session() state in an onload call in the <body> tag.

Example: <body onLoad="BuildMenus(<%= LCase(Session("LoggedOn")) %>)">

The menu script uses an array to store the menu name and the target URL. The hidden field containts a numeric value pointing to the pages information in the array.
Note: The code this sample is from is designed to generate either rollover menus or a jumpmenu dropdown list.

aMenus = new Array
// Start URL at the webroot not in relation to a specific webpage
//Syntax: Option('MenuName','URL to Web Page')
aMenus[0]=new Option('Home','/default.asp')
aMenus[1]=new Option('This Page','/MenuExample.asp')
aMenus[2]=new Option('Menu 2','/Blank.HTML')
aMenus[3]=new Option('Menu 3','/Blank.HTML')
aMenus[4]=new Option('Menu 4','/Blank.HTML')

The current page is identified by comparing the document.URL and the array value

var sPageURL = new String(document.URL)
if(sPageURL.indexOf(aMenus[i].value)==-1){
//Do Something
}

And this is the code to build the logon menu's click function & text:

// bLogon Value is set by ASP
sText=(bLogon==true?'Log Off':'Log On')
oCell.innerHTML=sText
if(bLogon==true){
oCell.onclick = function() {window.close()}
}

Hope this helps :cool: