|
JavaScript - Spry Menus And Other Js Not Working
I've built a site with DW4 and the spry menus are not working. they worked for a little while and then I changed something in the JS menu on the template and now none of the spry works on my site.
also, I imbedded a google gadget and that didn't show up either! any help would be appreciated. thx: Similar TutorialsThe 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 & 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 have created a global navigation includes document. Unfortunately the drop down menus that are part of the navigation aren't working. They worked fine when they were part of the page, but now that they are separated from the page as includes the drop down menus don't appear in my test site (posted to a web server). All other content in the includes file appears and works. Any ideas? Thanks for your help. Hello, I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this? Any help would be greatly appreciated, Thanks Here is the link: http://www.patagonia.com/web/us/home Need Help with Spry Menu Bar This is the site I am working on: http://www.alpinelakesair.com/newsite/index.php To quickly summarize: (without getting into the *why* of things) - the website has only two pages: 1=index.php, 2=charter-flights.php - the homepage links to specific tabs within the spry region of the main menu bar, which is located on page the 2nd page. - all the sub pages of the site are located within the spry content of the spry tabs of the menu bar (this is so the header image never has to reload) So, the idea goes that you click on the tabs of the home page and it brings you to the 2nd page with the corresponding menu bar item already highlighted. The pages work in Safari and Firefox on my Mac - but - when you try click on the first four tabs from the homepage in Internet Explorer it doesn't open any content. If you click on the last three tabs it opens content - but all the content, and the sub-spry regions do not work... I am new to spry, so if you help please make your answers for someone with a little but not much spry knowledge. Please let me know if more information is needed.. I am reposting this as the issue has not been resolved... alex Hi, I am having problem in validating my form using spry tools. The problem is that if I try to include any other validation other than spry along with spry validation the spry validation does not work. Plzz tell a possible solution Hello, trying to cooperate with Spry atm, and its going fairly ok.. Its just one thing, i would like it when you open one spry panel, the rest of them would close. Anyone know how to do that? Thanks Hello there! Brand new to the forums, but a regular reader. I'm currently in the process of putting together a site and before I get too much further I had a few Spry related questions (hope this is the correct forum for such questions). Please bear with me if my questions seem plentiful or ignorant. First off, here's the current progress of the site in question: http://thedeadhamster.com/testing/index.htm As you can (hopefully) see, upon the site's loading the header does some slide in animations. This animation would only animate on the home page; all linked pages would have a static header. While I think it looks rather nice I'm actually hesitant to use it. Here's a few of my concerns, perhaps some of you know of some possible solutions: I can't seem to get the images to animate when they're just div backgrounds. As such, I'm using image tags to make up the header which unfortunately adds the images into the HTML structure itself and doesn't really seem "good practice". Or am I simply missing something? The images sometimes "flash" on screen prior to animating, a result of the browser loading the images before the Spry coding I assume. Any simple workaround to that? Should I just forget animating the header and settle for a static background image header instead? Aka, is this more trouble than it's worth? Any thoughts or suggestions are most welcome, I appreciate any help you guys graciously throw my way. Thanks! Hi All, I searched for an answer but didn't find anything that matched my issue. I am using Dreamweaver CS5 and have a few spry validation select boxes on my page. All but one are working correctly. The one in question is spryselect1 ("spryEquipLoc"). For some reason (which I cannot figure out) this field will display the selectRequiredState even after a selection has been made. Thanks in advance for any help. Here is the code: Code: <!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">
<head>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="javascripts/Calendar.js" type="text/javascript"></script>
<!--<script src="javascripts/datetimepicker_css.js"></script>-->
<script type="text/javascript">
var categories = [];
categories["startList"] = ["Equipment issue","Log issue","Operator error","Media issue","Satellite issue","Program issue","Playlist issue","Promo issue"]
categories["Equipment issue"] = ["Digibeta deck","XDCAM deck","Video monitor","Chyron","Switcher","Media port","Downstream keyer","Asset base PC","Device server","Rapid Play X PC","Satellite receiver","Video server","Miranda wall","Crispen automation","Vertigo X-Play"];
categories["Log issue"] = ["Log/Playlist mismatch","Log timing light","Log timing heavy","Incorrect duration","Wrong start time","Events deleted"];
categories["Operator error"] = ["Operator Name1","Operator Name2","Operator name3"];
categories["Media issue"] = ["Damaged tape","Missing media","Dublist not received","Bad media file","Snipe Issue","Bug Issue","Missing audio","Audio out of sync","Audio clipping/distorted","Audio level too low","Embedded credits"];
categories["Satellite issue"] = ["Black on air", "Signal outage", "Sun outage", "Closed captions","Audio issue","Transmitter related"];
categories["Program issue"] = ["Program light","Program heavy","Incorrect program","Incorrect material ID","Program replaced","Incorrect segment lengths","Embedded credits"];
categories["Playlist issue"] = ["Playlist light","Playlist heavy", "Incorrect playlist loaded", "Wrong playback source"];
categories["Promo issue"] = ["Incorrect material ID","Incorrect duration","Incorrect snipe","Incorrect snipe duration","Promo replaced"];
var nLists = 2; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['frmOnAirActivity']['List'+i].length = 1;
document.forms['frmOnAirActivity']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['frmOnAirActivity']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Air Activity Form</title>
<style type="text/css">
body,td,th {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #052F47;
}
body {
background-color: #8E8E8E;
background-image: url();
background-repeat: no-repeat;
}
#form {
behavior: url(PIE.htc);
font-family: Verdana, Geneva, sans-serif;
background-repeat: repeat;
font-size: 14px;
padding: 10px;
width: 660px;
border-radius: 0px 0px 20px 20px;
box-shadow: #666 10px 10px 10px;
border-top-style: none;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: none;
background-color: #589DC6;
float: right;
}
#wrapper {
margin: auto;
width: 860px;
}
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="css/Calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
// show and hide sections of a form
function preparePage() {
document.getElementById("List1").onclick = function() {
if (document.getElementById("List1").value=="Equipment issue") {
// use CSS style to show it
document.getElementById("Equipment").style.display = "block";
document.getElementById("Satellites").style.display = "none";
} else if (document.getElementById("List1").value=="Satellite issue") {
// use CSS style to show it
document.getElementById("Satellites").style.display = "block";
document.getElementById("Equipment").style.display = "none";
} else {
// hide the div
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
};
// now hide it on the initial page load.
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
window.onload = function() {
preparePage();
};
</script>
<div id="wrapper"> <img src="Graphics/banner.png" alt="Banner" width="860" height="84" />
<div id="form">
<form id="frmOnAirActivity" name="frmOnAirActivity" method="post" action="">
<span id="spryAirdate">
<label for="Airdate">Airdate</label><br/>
<input type="Text" id="Airdate" tabindex="1" />
<img src="graphics/cal.gif" onclick="javascript:showCalendar('Airdate')" style="cursor:pointer" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
<span id="spryDiscrepType">
<label for="List1">Event Category</label><br />
<select name="List1" id="List1" tabindex="2" onchange="fillSelect(this.value,this.form['List2'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
</p>
<span id="spryDiscrepSubType">
<label for="List2">Detail</label><br />
<select name="List2" id="List2" tabindex="3" onchange="fillSelect(this.value,this.form['List3'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<div id="Equipment">
<span id="spryEquipLoc">
<label for="EquipLoc">Equipment Location</label><br/>
<select name="EquipLoc" id="EquipLoc" tabindex="4">
<option selected></option>
<option>Master Control</option>
<option>Media Services</option>
<option>Central Tape</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<span id="spryEquipID">
<label for="EquipID">Equipment ID</label><br />
<input type="text" name="EquipID" id="EquipID" tabindex="5" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
</div>
<p>
<div id="Satellites">
<fieldset><legend>Affected Satellites:</legend>
<table width="424">
<tr>
<td width="152"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_12" />
NET Sat1</label></td>
<td width="119"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_16" />
Net Sat2</label></td>
<td width="137"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_20" />
Net Sat3</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_13" />
Net Sat4</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_17" />
Net Sat5</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_21" />
Net Sat6</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_14" />
Net Sat7</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_18" />
Net Sat8</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_22" />
Net Sat9</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_15" />
Net Sat10</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_19" />
Net Sat11</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_23" />
Net Sat12</label></td>
</tr>
</table>
</fieldset>
</div>
<fieldset>
<legend>Network:</legend>
<table width="424">
<tr>
<td width="152">
<label>
<input type="checkbox" name="Network_1" value="checkbox" id="Network_1" />
Networl_1</label>
</td>
<td width="119">
<label>
<input type="checkbox" name="Network_2" value="checkbox" id="Network_2" />
Network_2</label>
</td>
<td width="137">
<label>
<input type="checkbox" name="Network_3" value="checkbox" id="Network_3" />
Network_3</label>
</td>
</tr>
</table>
</fieldset>
<p>
<label for="OnAirVariance">On Air Variance</label>
<input name="OnAirVariance" type="checkbox" value="" />
<p>
<span id="spryDescription">
<label for="Description">Description</label><br />
<textarea name="Description" id="Description" cols="45" rows="5" tabindex="6"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span>
<p>
<span id="spryResolution">
<label for="Resolution">Action Taken</label><br />
<textarea name="Resolution" id="Resolution" cols="45" rows="5" tabindex="7"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span></p>
</form>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryAirdate", "date", {validateOn:["blur"], useCharacterMasking:true, format:"mm/dd/yyyy"});
var sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
var spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryDiscrepType", {validateOn:["blur"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryDiscrepSubType", {validateOn:["blur"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("spryDescription", {validateOn:["blur"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("spryResolution", {validateOn:["blur"]});
</script>
</body>
</html>
Thanks to everyone for all the help so far. I've done a search for this but haven't found anything applicable. I have a Spry dataset pulling form an External XML file. The masterColumn needs to scroll horizontally. You can see what I'm talking about here. Under the "pics" section. (Thanks again JWPhillips and Tiny Script for helping to get the shuffle to work. And yeah, not everything is ready so It looks choppy.) Anyway, this is the div tag in question: Code: <div id="contentpics">
<div class="MasterDetail">
<div spry:region="ds2" class="MasterContainer">
<img class="MasterColumn" spry:repeat="ds2" spry:setrow="ds2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected" src="{thumb}" width="80" height="80"/></div>
<div spry:detailregion="ds2" class="DetailContainer">
<div class="DetailColumn"><img name="" src="{large}" alt="" width="350" height="350"/></div>
</div>
<br style="clear:both" />
</div>
</div>
I've tried several JS custom scrollbars, but I don't think that they work with the spry. Any suggestions? Thanks, SweetAnne I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container. ( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly). I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding [CODE] google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); }); after var map = new google.maps.Map(document.getElementById(canvas), myOptions); [CODE] This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested: Re-centrering the map around the marker [CODE] google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); [CODE] Zooming in and out again to trigger the resize: [CODE] map.setZoom( map.getZoom() ); [CODE] Or using this to do the same thing: [CODE] this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1); [CODE] Suggested for use if there are multiple markers: [CODE] map.setZoom(map.getZoom()); map.fitBounds(bounds); [CODE] I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help! Hey folks, I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!! Code: <div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
The CSS and Jscript files are attached. Hi there! I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem: I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong. First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me. When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly. My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); rs_ProfAbility.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_ProfAbility.gallery) { return row; } return null; } rs_ProfAbility.filter(chooseSet); [CODE] This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help! Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he www.iotheatre.com/GoldenAgeAbilities.php -Chris Blockus I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now 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 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! 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 > </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 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!!! |
|||||||