JavaScript - Need Help Pull Down Menus

I'm working on an internal website at work and employees have a cookie created when they login to the customer support tool. The filename is cookie:username@domain.com/ and I'd like to use javascript to pull a variable for their username to plug into a URL for a unique link when they're viewing one of our intranet pages.

I'm a Javascript newbie so any help is appreciated. @domain.com/ will always be the same but I don't know how to pull the unique username from the filename of the cookie. I don't need to actually read the cookie.

Thanks!

Hey all,

Objective:
- when you select other the pull down menu is replaced by the text field.

Currently:
- Gotten it to the level of when you select the other the text field appears.

Question:
- HOw can I modify the code so when I select the other menu option from the pull down menu and it replaced by the text field?


Quote:
<script type="text/javascript">
function togglefield(val) {
var o = document.getElementById('other');
(val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
}

</script>
and the form:

<form action="" method="post">
<select name="sel" id="sel" onChange="togglefield(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="Other">Other</option>
</select>
<input type="text" name="other" id="other" style="display: none;">
</form>

I have an function that shoud be activated when the pull down menu in triggerd, the if functions is corresponding to the same menu overig_eenh[]

PHP Code:
function overig_tot_abs(selectVeld, nr) 
{ 
    // Prijs totaal 
    if (document.getElementsByName('overig_eenh[]')[nr].value == 'totaal') 
      { 
        document.getElementsByName('overig_totaal[]')[nr].value  = (document.getElementsByName('overig_prijs[]')[nr].value).toFixed( 2 )  
      } 
    // Prijs kg 
    if (document.getElementsByName('overig_eenh[]')[nr].value ==  'kg') 
      { 
        document.getElementsByName('overig_totaal[]')[nr].value  = (document.getElementsByName('overig_prijs[]')[nr].value * (document.getElementsByName('materiaal_tot_gew[]')[nr].value + document.getElementsByName('plaat_tot_gew[]')[nr].value)).toFixed( 2 )  
      } 
    // Prijs verf opp. 
    if (document.getElementsByName('overig_eenh[]')[nr].value == 'verf_opp') 
      { 
        document.getElementsByName('overig_totaal[]')[nr].value  = (document.getElementsByName('overig_prijs[]')[nr].value * (document.getElementsByName('materiaal_tot_verf_opp[]')[nr].value + document.getElementsByName('plaat_tot_verf_opp[]')[nr].value)).toFixed( 2 )  
      } 
} 


Form (in loop):
PHP Code:
<tr> 
        <td><select name="overig_omsch[]" > 
        <option></option> 
                    <option  value=Engineering>Engineering</option> 
                    <option  value=Inkoop bev.middelen>Inkoop bev.middelen</option> 
                    <option  value=Inkoop snijwerk>Inkoop snijwerk</option> 
                    <option  value=Spuiten>Spuiten</option> 
                    <option  value=Stralen>Stralen</option> 
                    <option  value=Transport>Transport</option> 
        </select> 
                </td> 
        <td><select name="overig_eenh[]" onChange="overig_tot_abs(this, 0)" > 
        <option></option> 
        <option value="totaal">Totaal</option> 
        <option value="kg">Per Kg</option> 
        <option value="verf_opp">Per 1m2</option> 
        </td> 
        <td><input type="text" name="overig_prijs[]" size="10" value="" /></td> 
        <td><input type="text" name="overig_totaal[]" size="10" style="text-align:right;background-color: #f1f1f1" value="" readonly="readonly" /></td> 
        <td><input type="text" name="overig_opmerkingen[]" size="75" value="" /></td> 
    </tr> 

Hi all

I have relatively easy task I need to accomplish but as per usual I have very little idea of how to do it. I have done a google search to no avail.

Basically I need to:

1. Pull a value from inside a div
Code:

<div id="number">(invoice #1017)</span>

2. Populate a form input field with that value.

Does this make sense? If not let me know if you need any more info.

Thanks

Hi, I'm new to these forums so if anything is out of the ordinary let me know for next time or so I can correct it - please.

I am also not very good with javascript but I am trying to learn the whole concept.

Anyways, I am supposed to create pull down menus when I open this page:

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
   Tutorial Case

   The 221B Blog
   Author:          
   Date:         

   Filename:         holmes.htm
   Supporting files: menus.js, logo.jpg, sh.jpg, shblog.css
	

-->
   <title>The 221B Blog</title>
   <link href="shblog.css" rel="stylesheet" type="text/css" />
	<script type="text/javascirpt" src="menus.js"></script>
</head>

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

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

      <div id="menu1" class="menu">
         <a href="#">The Adventures of Sherlock Holmes</a>
      </div>
      <div id="menu1List" class="menuList">
         <ul>
            <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>
      </div>

      <div id="menu2" class="menu">
         <a href="#">The Memoirs of Sherlock Holmes</a>
      </div>
      <div id="menu2List" class="menuList">
         <ul>
            <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>
      </div>

      <div id="menu3" class="menu">
         <a href="#">The Return of Sherlock Holmes</a>
      </div>
      <div id="menu3List" class="menuList">
         <ul>
            <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>
      </div>

      <div id="menu4" class="menu">
         <a href="#">The Case Book of Sherlock Holmes</a>
      </div>
      <div id="menu4List" class="menuList">
         <ul>
            <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> 
      </div>

      <div id="menu5" class="menu">
         <a href="#">His Last Bow</a>
      </div>
      <div id="menu5List" class="menuList">
         <ul>
            <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>
      </div>

      <div id="menu6" class="menu">
         <a href="#">The Novels</a>
      </div>
      <div id="menu6List" class="menuList">
         <ul>
            <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> 
      </div>

      <ul id="linkList">
         <li><a href="#">Home</a></li>
         <li class="newGroup"><a href="#">Essays</a></li>
         <li><a href="#">Fan Fiction</a></li>
         <li><a href="#">Art</a></li>
         <li class="newGroup"><a href="#">Discussion Forum</a></li>
         <li class="newGroup"><a href="#">Holmes on the Web</a></li>
         <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>
         <li class="newGroup"><a href="#">Holmes Radio Podcast</a></li>
         <li><a href="#">Holmes Audiobooks</a></li>
         <li class="newGroup"><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>
         <li class="newGroup"><a href="#">Other Fictional Detectives</a></li>
         <li class="newGroup"><a href="#">About the WebMaster</a></li>
         <li><a href="#">Issues Archive</a></li>
      </ul>


      <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 <i>The 
            Strand Magazine</i>. 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 at the top of this page.</p>
      </div>

   </form>
   </div>

</body>
</html>

Here is my javascript file:

Code:

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

   Author: 
   Date:   

   Filename:  menus.js

   -------------------------------------------------------------
   Function List:
   init()
      Initializes the contents of the holmes.htm Web page, setting
      the display property of the pull-down menus and the initial
      values of the global variables

   moveMenu()
      Moves the active menu from one pull-down menu to another

   changeMenu()
      Change the active menu displayed in the document

   closeOldMenu()
      Closes the active menu

   rollDown()
      Applies a roll-down effect the opening of the active menu 

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

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

   clipHgt
      The current height of the active menu as it is being rolled down

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

window.onload = init;

var activeMenu = null;
var clipHgt = 0;
var timeID;

function init() {
	var menus = new Array();
	var allElems = document.getElementsByTagName("*");

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

for (var i = 0; i < menus.length; i++)  {
	menus[i].onclick = changeMenu;
	menus[i].onmouseover = moveMenu;
}

document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}

function moveMenu() {
 // this function moves the pull-down menu from one title to another

	if (activeMenu) {
		closeOldMenu();

	menuID = this.id + "List";
	activeMenu = document.getElementById(menuID);
	activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
	activeMenu.style.display = "block";
	timeID = setInterval("rollDown()", 1);
	}
}

function changeMenu() {
	// this function changes the pull-down menu displayed in the document

	closeOldMenu();

	menuID = this.id + "List"; 
	activeMenu = document.getElementById(menuID);
	activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
	activeMenu.style.display = "block";
	timeID = setInterval("rollDown()", 1);
}

function closeOldMenu() {
	if (activeMenu) {
	clearInterval(timeID);
	activeMenu.style.display = "none";
	activeMenu = null;
}
}

function rollDown() {
	clipHgt = clipHgt + 10;
	if (clipHgt < 400) {
		activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px,  0px)";
} else {
	clearInterval(timeID);
	clipHgt = 0;
	}
}

The book's tutorial instructed me to copy down every thing I did yet it doesn't work at all! I've tried on Safari, IE, and Firefox. Can someone tell me what I'm doing wrong?

EDIT: Here is the CSS file.

Code:

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

   Author:  
   Date: 
   Filename: shblog.css

   This file contains styles used in the holmes.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: 850px}

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

#logo               {position: absolute: top: 0px; left: 0px;
                     width: 100%; height: 108px; background-color: white; z-index: 3}
#logo img           {float: left}
#logo label         {float: right; margin-top: 15px; margin-right: 10px}
#logo input         {float: right; margin-top: 15px; background-color: ivory}

.menu               {position:absolute; top: 110px; width: 140px; height: 35px; z-index: 3;
                     border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
                     text-align: center}
.menu a             {display: block; width: 140px; height: 35px; color: black}
.menu a:hover       {background-color: rgb(151, 151, 151); color: white}

#menu1, #menu1List  {left: 0px}
#menu2, #menu2List  {left: 141px}
#menu3, #menu3List  {left: 282px}
#menu4, #menu4List  {left: 423px}
#menu5, #menu5List  {left: 564px}
#menu6, #menu6List  {left: 705px}

.menuList           {position: absolute; top: 146px; width: 140px; z-index: 2;
                     background-color: ivory; border: 1px solid black; display: none}

.menuList li        {margin: 5px}
.menuList a         {display: block; width: 132px}
.menuList a:hover   {background-color: rgb(151, 151, 151); color: white}

#linkList           {position: absolute; top: 160px; left: 5px; width: 175px;
                     border-right: 1px solid black}
#linkList li        {line-height: 1.5}
#linkList .newGroup {margin-top: 15px}
#linkList a:hover   {text-decoration: underline overline; 
                     color: red; background-color: ivory}

#main                {position: absolute; top: 160px; left: 190px; z-index: 1}
#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}

Hello all.

I have created a snippet of javascript code that will do the following:

1. read the window URL
2. depending on the window URL, a word will be placed into a hidden form field.
3. Person submits form...etc., etc.

Here is what I have.

Let's say that I have a single landing page with a simple form on it. I would like to reference the referred URL by pulling a part of the window URL into a hidden field of the form. Let's say the three URLs a

http://www.whatever.com/index.htm?id=ref1
http://www.whatever.com/index.htm?id=ref2
http://www.whatever.com/index.htm?id=ref3

I have created a javascript that takes the exact URL and check for equality. If the URL is equal, it will place the corresponding id into the hidden form field. See my code below.

Code:

<script type="text/javascript">
var lead_source = window.location.href
{
if (lead_source == "http://www.whatever.com/index.htm?id=ref1")
   {
   document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref1'>");
   }
else if (lead_source == "http://www.whatever.com/index.htm?id=ref2")
   {
   document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref2'>");
   }
else if (lead_source == "http://www.whatever.com/index.htm?id=ref3")
   {
   document.writeln("<input type=hidden name='lead_source' id='lead_source' value='ref3'>");
   }
}
</script>

What I am looking to do is modify the code to only look at the "id" variable, not the entire URL. That way, if I add any additional items to the URL I will not have to change the code. I guess I am looking for an extra step of parsing the URL...maybe.

Thanks for your help

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>

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)

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!!!

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!

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.

I'm currently looking to revamp the Link Exchange section on my website.

Rather than clutter it with banners, I am going to put all the links into a drop down menu, with the banner for the selected site under it.

The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else.

This is the code I am using to change it:

Code:

function defineimage()
{
	if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
	{
		document.images.linkimage.src = '/images/exchange/jeff.gif'
	}
	else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
	{
		document.images.linkimage.src = '/images/exchange/SCH.jpg'
	} 
}

And this is my drop down menu, and the image I'd like to change:

Code:

<p><select name="gourl" onChange="defineimage()">
  <option value="http://www.strangedrawingsartgallery.com" selected>Strange City Heroes</option>
  <option value="http://jeff.zhomg.com">Invincible Jeff</option>
  </select>&nbsp;<input type="submit" name="Submit" value="Go to Site" onClick="dropdown()"></p><p><img src="/images/exchange/SCH.jpg" alt="SCH" name="linkimage" width="468" height="60" border="0" id="linkimage"></p>

If you are unsure what I mean by this, you can see for yourself by going to the page in question and selecting 'Invincible Jeff' from the list. The banner will change, but you won't be able to change the selection again.

Many thanks (again) for the help.

Hi, I am wanting to do menus and image slideshows using javascript because my existing flash menus and slide shows no longer work on many newer devices.
To save time learning all about Javascript, I purchased WoW Slider and Apycom Menus, two programs that do it all for you. Independantly both programs work perfectly, however if I use both programs together on the same website, as soon as I add my image slider it messes up my menu for that page. the menu item colours and bouncy effects when I do a mouseover on menu items no longer work correctly.
Example http://www.dorset-self-catering.com note the menu working correctly on mouseover, then go to second page called "Information", this page also has a slideshow and if you now do a mouseover on the menu, you will see that all the nice properties no longer work.
Is anyone able to offer some advice please.

David Priest