JavaScript - Browser (menus) How To Make Links?

Greetings,

I am currently using the websites tutorial about browser detection using the navigator.

http://www.javascriptkit.com/javatutors/navigator.shtml

I am however finding myself unable to detect a pattern in order to learn from.

My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws.

For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser.

There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose.

So if someone can explain how I could do it for Safari I would be very appreciative.

I need a script that will redirect to a specific page is the browser is safari version 4. if the browser is NOT safari 4 I want the browser to stay on the current page.

Hello,

I have a question what is the best way to identify a browser, browser version and OS in javascript.

I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers.

Thanks

Hello, i am trying to implement JavaScript menus for my website. I've used a ready-made one from apycom.
The menu works fine, however the problem is that whenever i try to have more than one of the same menu, the second menu does not work.

I'm generally a PHP coder, and i'm not very useful when it comes to JavaScript, so please excuse me. I'll bring some code into this:

Quote:
<div id="menu">
<ul class="menu" id="menu">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>
<!-- <li><a href="browse.php?id=84&<?php echo "sort=".$sort; ?>"><span>Sign-In</span></a></li> -->
<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="menu">
<ul class="menu" id="menu2">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>
<!-- <li><a href="browse.php?id=84&<?php echo "sort=".$sort; ?>"><span>Sign-In</span></a></li> -->
<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
You can ignore the hrefs, there for local use. I'm under the impression the identities of each menu is duplicated, but i'm not sure how to allow separation of identities. The second menu works, mouseover the menu comes up but the fade effect does not work.
Can someone please help?
Thank you.

Hi everyone,

I am very new to javascript & web editing in general, so I apologize if this is a silly question.

I am designing a site using this menu:
http://dynamicdrive.com/dynamicindex1/slideinmenu.htm

I would like to have two of these menus on the page. Ideally, each will pop out on a rollover. Currently, when I copy and paste the code, only one works (and pops out no matter which menu is rolled over).

How do I need to change the code so that both will work independently of each other on the same page? The CSS styling will be the same for both, however they will have different menu items.

Thank you in advance!!!

I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.

Code:

<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

	if(curVisible != null) {
		oldObject = curVisible;
	}

	if(!inMotion) {
		curVisible = obj;		
		pusher = -100;
		pushBack = 40;
		document.getElementById(obj).style.visibility = "visible";
		document.getElementById(obj).style.bottom = pusher+"px";
		animateOut();
		animateIn();
	}
}

function hide() {
	animateIn();
}


function animateIn() {
	if (pushBack > -100) {
		inMotion = true;
		pushBack -=4;
		document.getElementById(oldObject).style.bottom = pushBack+"px";
		setTimeout(animateIn, 20);
	} else {
		document.getElementById(oldObject).style.visibility = "hidden";
		inMotion = false;
	}
}


function animateOut() {
	
	if(pusher < 40) {
		inMotion = true;
		pusher += 4;
		document.getElementById(curVisible).style.bottom = pusher+"px";
		setTimeout(animateOut, 20);
	} else {
		inMotion = false;
	}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

I want to make a menu like this web site :http://www.petrobras.com.br/pt/
When your move the cursor on it , a new windows open and there is a picture in left side and submenues in right side

I myself think it is a jquery tool but I don't know how to make some thing like this

How can I do so ?

thanks

I would love some help on this code I was assigned to debug...I never studied javascript nor have ever coded really, yet my boss(im volunteering at a company) is having me debug a website and I can't seem to figure this out.

The problem is the menus stay expanded when the mouse is out, but when you activate the onMouseOver, it fixes it.

Here is an extremely simplified version but it shows the problem. And I greatly appreciate any help I can get. Thanks in advance!

Oh and I didn't write any of this + im a noob at coding so if the answer was explained with this in mind that'd be great!

-----------




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Yep</title>

<link href="ReferenceFunctions.css" rel="stylesheet" type="text/css" />

<!--<script type="text/javascript" src="/offices/management_support/js/tab-view.js"></script>-->

<!-- ************************ BEGIN Section 1 *************************************** -->
<script type="text/javascript">
function ManageTabPanelDisplay() {
//
// Between the parenthesis, list the id's of the div's that
// will be effected when tabs are clicked. List in any
// order. Put the id's in single quotes (apostrophes)
// and separate them with a comma -- all one line.
//
var idlist = new Array('tab1focus','tab2focus','tab3focus','tab1ready','tab2ready','tab3ready','content1','content2', 'content3');

// No other customizations are necessary.
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<!-- ************************ END Section 1 *************************************** -->
<!-- ************************ BEGIN Section 2 *************************************** -->
<script type="text/javascript">
<!-- *************Not sure why this is commented out ********
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=15; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- ************************ END Section 2 *************************************** -->
<!-- ************************ BEGIN Section 3 *************************************** -->
<script type="text/javascript">

function decide() {

if (document.myca.search.value.length < 1) {
window.alert ("Please enter a search keyword.");
return false;
}

if (document.myca.whosearch[0].checked) {
document.myca.sSearchString.value = document.myca.search.value;
document.myca.submit();

} else {
if (document.myca.whosearch[1].checked) {
document.thissite[1].value = document.myca.search.value;
document.thissite.submit();

} else {
alert("You must select whether you want to search My CA or This Site.");
}

}

return false;
}
</script>
<!-- ************************ END Section 3 *************************************** -->
<!-- ************************ BEGIN Section 4 *************************************** -->
<script type="text/javascript">

<!--*************Not sure why this is commented out ********-->
<!--
var defaultMainList = "Home";


function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->

</script>
<!-- ************************ END Section 4 *************************************** -->
<!-- ************************ BEGIN Section 5 *************************************** -->
<style type="text/css">

.blueLink {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000066;
font-size: 71%;
}
.Office_functions_sub_title {
font-size: xx-small;
color: #0066CC;
}
.style1 {
font-size: small
}
.pixel_height {
font-size: 5px;
}
.blank_menu_space_height {
font-size: 5px;
font-family: Arial;
}
.turquoise {
color: #00FFCC
}
.blue_font {
color: #0000FF;
font-size: small;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
.style7 {color: #000066}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style11 {
font-size: 12px
}
.style12 {font-size: 14px}
.style13 {font-size: 65%}
.style14 {font-size: 12px; color: #800000; }
.style15 {
color: #FFFFFF;
font-weight: bold;
font-size: small;
}
.style17 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4d7fb2;
font-weight: bold;
}
.style19 {
font-family: "Times New Roman", Times, serif;
font-size: 18pt;
color: #FFFF00;
}
.style22 {font-size: 11px}
</style>
<!-- ************************ END Section 5 *************************************** -->
</head>
<body onload="FP_preloadImgs(/*url*/'images/button13.jpg', /*url*/'images/button4a.jpg'); MM_preloadImages('indeed.jpg' )">

<!--<body onload="MM_preloadImages('yep.jpg','yep.jpg')">-->
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- ************************ BEGIN Section 6 *************************************** -->
<tr>
<!--BEGIN Table Set-Up -->

<!--CLOSE Table Set-Up -->
</tr>
<!-- ************************ END Section 6 *************************************** -->
<!-- ************************ BEGIN Section 7 *************************************** -->
<tr>
<td style="height:17px"><div align="center" class="style15">
<table width="100%" border="1">
<tr>
<td><div align="center">link</div></td>
</tr>
</table>
</div></td>
</tr>
<!-- BEGIN Table Set-Up 1 -->

<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<tr>
<td valign="top" style="padding-left:12px; text-align:left; line-height:186%;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<!-- BEGIN Table Set-Up 2 -->
<tr>
<td rowspan="72" valign="top"><table border="0" cellspacing="0" cellpadding="0" style="background-color:#fff">
<!--BEGIN Example Office- Menut Table SET-UP-->
<tr>
<td valign="top" style="padding-right:12px"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="185" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="9px"></td>
</tr>
<tr>
<td class="boxtitle style12">testings12345</td>
</tr>
<!-- BEGIN Sub-Section A thru C -->
<tr>
<td><div class="left_column_top">
<dl id="menu">
<!-- ************************ BEGIN Sub-Section A *************************************** -->
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<!-- ************************ END Sub-Section A *************************************** -->
<!-- ************************ BEGIN Sub-Section B *************************************** -->
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">
<ul>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm">link</a></li>
</ul>
</dd>
<!-- ************************ END Sub-Section B *************************************** -->
<!-- ************************ BEGIN Sub-Section C *************************************** -->
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <a href="link.htm"> link</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
</ul>
</dd>
<!-- ************************ END Sub-Section C *************************************** -->
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <a href="ble.htm" style="line-height: 200%"> link<br />
link
</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="link233link.htm"> link</a></li>
<li><a href="indeedy.htm"> link</a></li>
<li><a href="training/linsks.htm"> link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"> <a href="yep.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"> <a href="indeed.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"> <a href="thanks.htm"> link</a></dt>
</dl>
</div></td>
</tr>
<!-- CLOSE Sub-Section A thru C -->
</table></td>
</tr>
<td><table width="185px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40px"></td>
</tr>
<tr>
<td class="boxtitle style12">link</td>
</tr>
<!--BEGIN Sub-Section D thru F -->
<tr>
<td><div class="left_column_bottom" style="height:125px">
<dl id="menu">
<!-- ************************ BEGIN Sub-Section D *************************************** -->
<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
<a href="yes.htm">link</a></dt>

<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">
<a href="yep.htm">random words</a></dt>

<dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"> <a href="tests.htm">
<p style="line-height: 200%; margin-top: 1px; margin-bottom: 1px">
ble<br> mhm</p></a></dt>

<dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
<a href="communication/testsss.htm">Just some test</a></dt>
<!-- ************************ END Sub-Section D *************************************** -->
</dl>
</div></td>
</tr>
<tr>
<td >&nbsp;</td>
</tr>
<!--CLOSE Sub-Section D thu F -->
</table></td>
</tr>


<tr>

<td align="center">
<p align="center" id="legal"><!-- Original Template Designed by etc -->
<a href="#heading"></a></p> </td>
</tr>

<!-- BEGIN Office Chief Table -->
</table></td></tr>
<!-- </td> SICR TAble -->
<!-- </tr> CLOSE only TR Table Set-Up 2 -->
</table>
<p align="center">
</table>
<!--CLOSE MAIN TABLE-->
<a href="#heading"> Back to Top</a><br />
</td>
</tr>
</table>
</td>
</tr>
<!-- CLOSE Table Set-Up 1 -->

<!-- ************************ END Section 7 *************************************** -->
</p>
<tr>
<td style="height:1px ;background-color:#CCCCCC"></td>
</tr>
</body>
</html>

Hello! I am currently using this code on a webpage that lists the site members.

Code:

function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}[

For some reason, and maybe this is the function of it (I am not sure,) when you click 'characters' on the tables lower down on the page, you are sent to the top of the page again.

Here is the page in question, if it's necessary: http://oursideofthemountain.webs.com/members.htm

Any help in this matter would be greatly appreciated! I am very new to Javascript, so please be patient with me!

Hi All,

Hope someone can help me with this.

I have been using a free javascript code to make some drop-down menus.

this is the link for the code on dynamic drive. http://www.dynamicdrive.com/dynamici...anylinkcss.htm

The script works fine and I have been using it for a while now. However, one of the websites that I run has just asked me to include a sub menu on one of the menu items.

I have managed to get the sub menu to show as requested by using the normal drop down menu and adding a Quote:
rev="lr"
and giving it another class and rel. However, When the link is hovered over the menu appears to the side as expected but when you move onto that "sub-menu" the original menu disappears. can anyone suggest what changes I would need to make so that the first menu does not disappear?

Any help would be greatly appreciated.

As you can tell I am new to JavaScript (hence the use of free codes)

The menus are supposed to come out from the side, as an animation. I thought I had the correct code but for some reason it isn't working.

Could anyone take a look at my Javascript at let me know what I'm doing wrong?

Thanks...

Here are my files:

HTML:

Code:

 <?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   The 221B Blog
   Author:          
   Date:   March 6, 2011          

   Filename:         sherlock.htm
   Supporting files: logo.jpg, mblog.css, sh.jpg, slides.js

-->
   <title>The Works of Sherlock Holmes</title>
   <link href="mblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slides.js"></script>

   <!--[if IE]>
      <style type="text/css">
         /* IE-specific styles to ensure list of links is 
            rendered properly */

         #linkList ul li   {float: left; width: 100%}
         #linkList ul li a {height: 1%} 
      </style>
   <![endif]-->

</head>

<body>
   <div id="page">
   <form id="searchForm" action="">

      <div id="head">
         <img src="logo.jpg" alt="The 221B Blog" />
         <input id="searchTxt" type="text" size="20" />
         <label for="searchTxt">Search</label>
      </div>

      <div id="linkList">
      <ul>
         <li><a href="#">Home</a></li>

         <li><ul class="newGroup">
            <li class="slideMenu">
               <a href="#" class="pTitle">The Adventures of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list1">
                 <li><a href="#">A Scandal in Bohemia</a></li>
                 <li><a href="#">The Red-headed League</a></li>
                 <li><a href="#">A Case of Identity</a></li>
                 <li><a href="#">The Boscombe Valley Mystery</a></li> 
                 <li><a href="#">The Five Orange Pips</a></li>
                 <li><a href="#">The Man with the Twisted Lip</a></li>
                 <li><a href="#">The Blue Carbuncle</a></li>
                 <li><a href="#">The Speckled Band</a></li>
                 <li><a href="#">The Engineer's Thumb</a></li>
                 <li><a href="#">The Noble Bachelor</a></li>
                 <li><a href="#">The Beryl Coronet</a></li>
                 <li><a href="#">The Copper Beeches</a></li>
               </ul>
            </li>
         </ul></li>
                                                     
         <li><ul>            
            <li class="slideMenu">
               <a href="#">The Memoirs of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list2">
                  <li><a href="#">Silver Blaze</a></li> 
                  <li><a href="#">The Yellow Face</a></li> 
                  <li><a href="#">The Stock-broker's Clerk</a></li> 
                  <li><a href="#">The "Gloria Scott"</a></li> 
                  <li><a href="#">The Musgrave Ritual</a></li> 
                  <li><a href="#">The Reigate Puzzle</a></li> 
                  <li><a href="#">The Crooked Man</a></li> 
                  <li><a href="#">The Resident Patient</a></li> 
                  <li><a href="#">The Greek Interpreter</a></li> 
                  <li><a href="#">The Naval Treaty</a></li> 
                  <li><a href="#">The Final Problem</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Return of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list3">
                  <li><a href="#">The Empty House</a></li> 
                  <li><a href="#">The Norwood Builder</a></li> 
                  <li><a href="#">The Dancing Men</a></li> 
                  <li><a href="#">The Solitary Cyclist</a></li> 
                  <li><a href="#">The Priory School</a></li> 
                  <li><a href="#">Black Peter</a></li> 
                  <li><a href="#">Charles Augustus Milverton</a></li> 
                  <li><a href="#">The Six Napoleons</a></li> 
                  <li><a href="#">The Three Students</a></li> 
                  <li><a href="#">The Golden Pince-Nez</a></li> 
                  <li><a href="#">The Missing Three-Quarter</a></li> 
                  <li><a href="#">The Abbey Grange</a></li> 
                  <li><a href="#">The Second Stain</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Case Book of Sherlock Holmes 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list4">
                  <li><a href="#">The Illustrious Client</a></li> 
                  <li><a href="#">The Blanched Soldier</a></li> 
                  <li><a href="#">The Mazarin Stone</a></li> 
                  <li><a href="#">The Three Gables</a></li> 
                  <li><a href="#">The Sussex Vampire</a></li> 
                  <li><a href="#">The Three Garridebs</a></li> 
                  <li><a href="#">Thor Bridge</a></li> 
                  <li><a href="#">The Creeping Man</a></li> 
                  <li><a href="#">The Lion's Mane</a></li> 
                  <li><a href="#">The Veiled Lodger</a></li> 
                  <li><a href="#">Shoscombe Old Place</a></li> 
                  <li><a href="#">The Retired Colourman</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">His Last Bow 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list5">
                  <li><a href="#">Wisteria Lodge</a></li> 
                  <li><a href="#">The Cardboard Box</a></li> 
                  <li><a href="#">The Red Circle</a></li> 
                  <li><a href="#">The Bruce-Partington Plans</a></li> 
                  <li><a href="#">The Dying Detective</a></li> 
                  <li><a href="#">The Disappearance of Lady Frances Carfax</a></li> 
                  <li><a href="#">The Devil's Foot</a></li> 
                  <li><a href="#">His Last Bow</a></li>
               </ul>
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">The Novels 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list6">
                  <li><a href="#">A Study in Scarlet</a></li>  
                  <li><a href="#">The Sign of the Four</a></li>  
                  <li><a href="#">The Hound of the Baskervilles</a></li>  
                  <li><a href="#">The Valley of Fear</a></li> 
               </ul> 
            </li>
         </ul></li>

         <li><ul class="newGroup">
            <li class="slideMenu">
               <a href="#">The 221B Community 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list7">
                  <li><a href="#">Essays</a></li>
                  <li><a href="#">Fan Fiction</a></li>
                  <li><a href="#">Art</a></li>
                  <li><a href="#">Discussion Forum</a></li>
                  <li><a href="#">Issues Archive</a></li>
               </ul> 
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">Holmes on the Web 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list8">
                  <li><a href="#">The 221B Museum</a></li>
                  <li><a href="#">Jeremy Brett Page</a></li>
                  <li><a href="#">Basil Rathbone Page</a></li>
                  <li><a href="#">The Baker Street Irregulars</a></li>
               </ul> 
            </li>
         </ul></li> 

         <li><ul>
            <li class="slideMenu">
               <a href="#">Multimedia 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list9">
                  <li><a href="#">Radio Podcasts</a></li>
                  <li><a href="#">Audiobooks</a></li>
                  <li><a href="#">Video Clips</a></li>
               </ul> 
            </li>
         </ul></li>

         <li><ul>
            <li class="slideMenu">
               <a href="#">Doyle's Life &amp; Times 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list10">
                  <li><a href="#">About Arthur Conan Doyle</a></li>
                  <li><a href="#">Victorian England</a></li>
                  <li><a href="#">Strand Magazine</a></li>
                  <li><a href="#">The Holmes Atlas</a></li>
               </ul> 
            </li>
         </ul></li>
 
         <li><ul>
            <li class="slideMenu">
               <a href="#">Other Fictional Detectives 
               <img class="arrow" src="arrow.gif" alt="" /></a>
               <ul id="list11">
                  <li><a href="#">Miss Marple</a></li>
                  <li><a href="#">Hercule Poirot</a></li>
                  <li><a href="#">Ellery Queen</a></li>
              </ul> 
           </li>
        </ul></li>

        <li class="newGroup"><a href="#">About Me</a></li>

     </ul>
     </div>
   
     <div id="main">
         <img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
         <p id="firstp">
            The most famous of fictional detectives, Sherlock Holmes
            first appeared in print in 1887, in stories written by the Scottish author
            and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
            of deductive reasoning to solve difficult and complex cases. Almost
            all Holmes stories are told in the first-person narration of
            Dr. John Watson, Holmes' closest friend and confidant.</p>
   
         <p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
            canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i> 
            which chronicled the meeting of Holmes and Watson and covered their 
            first case together. As Doyle wrote additional tales, the Sherlock Holmes 
            stories grew in popularity, becoming a regular feature of The 
            Strand magazine. Desiring to explore other literary pursuits, Doyle 
            grew tired of the detective and killed off Holmes in the short story
            <i>The Final Problem</i>. However public acclaim and a desire for more
            Holmes stories eventually persuaded Doyle to resurrect the popular 
            detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>

         <p>Doyle's final Holmes story, <i>His Last Bow</i> appeared in 1914, but 
            that did not end the public's fascination with Holmes and Watson. Basil 
            Rathbone brought the character to the silver screen in 14 movies
            loosely based on Doyle's original stories. In more recent years,
            Jeremy Brett played Holmes to great critical acclaim over four seasons of 
            the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes 
            has been played by over 70 actors appearing in over 200 films.</p>

         <p>To enjoy online versions of the Sherlock Holmes short stories and novels,
            select entries from the menu on the left.</p>
      </div>

   </form>
   </div>

</body>
</html>

Javascript:
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   Author: 
   Date:  

   Filename:  slides.js

   -------------------------------------------------------------
   Function List:
   makeMenus()
      Initializes the contents of the mystery.htm Web page, locating
      the sliding menus, setting their initial positions and 
      display styles and defining the onevent handlers.

   showSlide()
      Shows a sliding menu while hiding any inactive menus

   closeSlide()
      Closes an inactive sliding menu

   moveSlide()
      Moves a sliding menu horizontally across the page


   -------------------------------------------------------------
   Global Variable List:

   currentSlide
      An object variable pointing to the currently active sliding menu
   
   timeID
      A variable containing the id of a timed command using the setInterval method

   leftPos
      The current left position of the sliding menu as it is 
      moved across the page

   -------------------------------------------------------------
*/

window.onload = makeMenus;
var currentSlide = null;
var timeID = null;
var leftPos = 0;


function makeMenus() {
	var slideMenus = new Array();
	var allElems  = document.getElementsByTagName("*");

	for (var i = 0; i < allElems.length; i++) {
		if (allElems[i].className == "slideMenu") slideMenus.push(allElems[i]);
}

	for (var i = 0; i < slideMenus.length; i++)  {
		slideMenus[i].onclick = showSlide;
		slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";

}

document.getElementsById("head").onclick = closeSlide;
document.getElementsById("main").onclick = closeSlide;
}


function showSlide() {
	slideList = this.getElementsByTagName("ul")[0];
	if (currentSlide && currentSlide.id == slideList.id) {
	closeSlide();
	} else {
		closeSlide();
		currentSlide = slideList;
		currentSlide.style.display = "block";
		timeID = setInterval("moveSlide()", 1);
	}
}

function closeSlide() {
	if (currentSlide) {
		clearInterval(timeID);
		currentSlide.style.left = "0px";
		currentSlide.style.display = "none";
		currentSlide = null;
	}
}

function moveSlide() {
	leftPos += 5;
	if (parseInt(currentSlide.style.left) <=220) {
		currentSlide.style.left = leftPos + "px";
	} else {
		clearInterval(timeID);
		leftPos = 0;
	}
}

CSS

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Review Assignment

   Author:  
   Date:     
   Filename: mblog.css

   This file contains styles used in the sherlock.htm file.

*/

*                   {padding: 0px; margin: 0px; line-height: 1.2}

body                {background-color: white; 
                     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
                     font-size: 12px}

#page               {position: absolute; top: 0px; left: 10px; width: 1000px}

a                   {text-decoration: none; color: black}
p                   {margin: 15px 0px}

#head               {width: 800px; height: 108px; background-color: white; 
                     border-bottom: 1px solid black; margin-bottom: 10px}
#head img           {float: left}
#head label         {float: right; margin-top: 15px; margin-right: 10px}
#head input         {float: right; margin-top: 15px; background-color: ivory}



#main                {float: left; margin-left: 20px; z-index: 1; width: 600px;
                      background-color: white}

#firstp              {margin-top: 0px}
#firstp:first-line   {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
                      line-height: 0.8; margin: 0px 5px 0px 0px}


#linkList            {width: 225px; background: rgb(0, 14, 238);
                      float: left} 
#linkList ul         {list-style: none; margin: 0px; padding: 0px}

#linkList a          {font: bold 11px/16px arial, helvetica, sans-serif;
                      display: block; border-width: 1px; border-style: solid;
                      border-color: #ccc #888 #555 #bbb; margin: 0px;
                      padding: 2px 3px}
#linkList a          {color: black; background-color: rgb(172, 172, 172);
                      text-decoration: none}
#linkList a:hover    {color: white; background: rgb(0, 0, 255)}

#linkList li         {position: relative} 

#linkList ul ul ul   {position: absolute; display: none;
                      top: 0px; left: 100%; width: 100%}

#linkList .arrow     {position: absolute; left: 210px; border-width: 0px}

#linkList .newGroup  {border-top: 1px solid red; z-index: 2}

#linkList .slideMenu > a {z-index: 2; position: relative}

Hi,
I'm using this to put menus on my website

http://simplythebest.net/scripts/DHT...script_79.html

at the top it says its capable of having more than one menu on a page, but it doesnt give the directions.
The website it links to for more help is dead.

Can anyone help me out?

Hi,

I am trying to use JavaScript for several linked drop down menus. The contents of the first drop down menu is defined in the code of the form, however, I do not know the best way to populate the following drop down menus depending on the selection of the previous.

I have something working with the following JavaScript code, however as there are lots of options I am not sure whether this is the best way of doing this.

Code:

 <script type="text/javascript">

function setYear(chosen, selbox) {
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select a year',' ');
setTimeout(setYear(' ',document.question.subject),5);
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('exam1','11');
  selbox.options[selbox.options.length] = new
Option('exam2','12');
selbox.options[selbox.options.length] = new
Option('exam3','13');
selbox.options[selbox.options.length] = new
Option('exam4','14');
selbox.options[selbox.options.length] = new
Option('exam5','15');
setTimeout(setYear('11',document.question.subject),5);

}




if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('exam6','twoone');
  selbox.options[selbox.options.length] = new
Option('exam7','twotwo');
 selbox.options[selbox.options.length] = new
Option('exam8','twothree');
 selbox.options[selbox.options.length] = new
Option('exam8','twofour');
 selbox.options[selbox.options.length] = new
Option('exam9','twofive');
 selbox.options[selbox.options.length] = new

}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('exam10','threeone');
  selbox.options[selbox.options.length] = new
Option('exam11','threetwo');
  selbox.options[selbox.options.length] = new
Option('exam12','threethree');
  selbox.options[selbox.options.length] = new

}


if (chosen == "11") {
  selbox.options[selbox.options.length] = new
Option('subject1','111');
}


}


</script>

This is what I have in the form:
Code:

   
        <td>Minimum DBS Year: </td><td colspan="2">
     <select name="DBSyear" onchange="setYear(document.question.DBSyear.options
[document.question.DBSyear.selectedIndex].value,
document.question.exam);">
<option value=" " selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
		</tr>
		<tr>
		<td>
		Exam Paper:
		</td>
		<td>
		 <select name="exam" onchange="setYear(document.question.exam.options
[document.question.exam.selectedIndex].value,
document.question.subject);">
<option value=" " selected="selected">Please select a year</option>
</select>
</td>
		</tr>
		<tr>
		<td>
		Subject:
		</td>
		<td>
		<select name="subject" size="1">
<option value=" " selected="selected">Please select an exam</option>
</select>
		</td>
		</tr>

How would I populate the drop down menus from tables in the database and filter the options depending on the previous drop down selection??

I would appreciate any help!

hi,

I am making a driving map which shows lines on the map based on point of departure and destination. It's working fine he http://www.xelawho.com/map/drive2.htm

but what I would like to do is instead of having all the sidebar checkbox business, just to have two dropdown boxes - one for "from" and one for "to".

I have seen plenty of these around but my problem is that my data comes from an xml file, so I guess the menus would have to be populated by loops. The other problem being that not every departure point goes to every destination, so the second menu would have to be populated dynamically depending on the option chosen in the first...

does anybody have any ideas how I would do this?

thanks in advance.