|
JavaScript - Need Help With Spry Menu Bar
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 Similar TutorialsHi 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>
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 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! 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 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: 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 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. 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! 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 Hi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
the css is as follows: Code:
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul ul ul ul li a {
margin-left: 60px; /* indent level 3 */
}
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
and finally the javascript: Code: var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";
//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;
//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
var url = location.href;
if (url.lastIndexOf("/") == (url.length-1)) {
url = url+menu_default_page;
}
if (url.lastIndexOf("?") >= 0) {
url = url.substring(0, url.lastIndexOf("?"));
}
if (url.lastIndexOf("#") >= 0) {
url = url.substring(0, url.lastIndexOf("#"));
}
menu_url = url;
var main = document.getElementById(menu_id);
if (!main) alert("No element with id '"+ menu_id +"' found");
menu_traverse(main);
}
/* Walks down the subtree and on the way back
sets properties.
returns bit set
1: set = element is a node, unset = element is a leaf
2: set = element contains the active node
4: set = element is the active A node
*/
function menu_traverse(element) {
var props = 0;
// walk down
for (var i=0; i<element.childNodes.length; i++) {
var child = element.childNodes[i];
props |= menu_traverse(child); // aggregate bits
}
// on the way back now
switch (element.tagName) {
case "UL":
props |= 1;
break;
case "LI":
var c1 = (props & 1) ?
((props & (2|4)) ? menu_open_class : menu_closed_class)
: menu_leaf_class;
element.className = element.className ? element.className+" "+c1 : c1;
if (props & 4) {
if (!(props & 2)) element.className += " "+menu_active_class;
props |= 2;
props &= 1 | 2; // reset bit 4
}
break;
case "A":
if (props & 2) break; // once is enough
var href = element.getAttribute("href");
if (menu_isSameUrl(menu_url, href)) props |= 4;
break;
}
return props;
}
//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
if (b[j] == "..") { j-=2; continue; }
if (a[i] == "..") { i-=2; continue; }
if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
if (! (a[i] == b[j])) return false;
i--;
j--;
}
return true;
}
New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code: var NoOffFirstLineMenus=7; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='white'; // Background color when mouse is not over on subs var HighBgColor='black'; // Background color when mouse is over var HighSubBgColor='black'; // Background color when mouse is over on subs var FontLowColor='black'; // Font color when mouse is not over var FontSubLowColor='black'; // Font color subs when mouse is not over var FontHighColor='white'; // Font color when mouse is over var FontSubHighColor='white'; // Font color subs when mouse is over var BorderColor='black'; // Border color var BorderSubColor='black'; // Border color for subs var BorderWidth=1; // Border width var BorderBtwnElmnts=1; // Border between elements 1 or 0 var FontFamily="arial,comic sans ms,technical" // Font family menu items var FontSize=9; // Font size menu items var FontBold=1; // Bold menu items 1 or 0 var FontItalic=0; // Italic menu items 1 or 0 var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right' var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right' var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static var ChildOverlap=.2; // horizontal overlap child/ parent var ChildVerticalOverlap=.2; // vertical overlap child/ parent var StartTop=05; // Menu offset x coordinate var StartLeft=05; // Menu offset y coordinate var VerCorrect=0; // Multiple frames y correction var HorCorrect=0; // Multiple frames x correction var LeftPaddng=3; // Left padding var TopPaddng=2; // Top padding var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL var MenuFramesVertical=1; // Frames in cols or rows 1 or 0 var DissapearDelay=1000; // delay before menu folds in var TakeOverBgColor=1; // Menu frame takes over background color subitem frame var FirstLineFrame='navig'; // Frame where first level appears var SecLineFrame='space'; // Frame where sub levels appear var DocTargetFrame='space'; // Frame where target documents appear var TargetLoc=''; // span id for relative positioning var HideTop=0; // Hide first level when loading new document 1 or 0 var MenuWrap=1; // enables/ disables menu wrap 1 or 0 var RightToLeft=0; // enables/ disables right to left unfold 1 or 0 var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover var WebMasterCheck=0; // menu tree checking on or off 1 or 0 var ShowArrow=1; // Uses arrow gifs when 1 var KeepHilite=1; // Keep selected path highligthed var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} // Menu tree // MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width); // For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg" Menu1=new Array("Home","","",3); Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150); Menu1_2=new Array("Acknow","Acknowledgement.htm","",0); Menu1_3=new Array("Prayer","Prayer.htm","",0); Menu2=new Array("About Us","","",4); Menu2_1=new Array("Debra","bio.htm","",0,20,150); Menu2_2=new Array("Seamus","Seamus.htm","",0); Menu2_3=new Array("Locations","location.htm","",0); Menu2_4=new Array("Contact Us","contact.htm","",0); Menu3=new Array("Services","","",7); Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150); Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0); Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0); Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0); Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0); Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0); Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0); Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0); Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0); Menu6=new Array("Articles","","",3); Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150); Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0); Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0); Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0); ? how would i make it for a menu so you could press it and it would go down to click on a link.
Hi there, I am trying to create "sideways" sub menus off of my main vertical menu images. (Something like this example: http://netweblogic.com/demos/ddm/vddm-nomoo.htm but in the place of Menu Item 1, Menu Item 2, Menu Item 3 there would be roll over images.) The main vertical menu items I have are rollover images. I would like the sub menu to appear when you hover over the main menu item. When I attempt this using the above example, all of my other CSS and JS does not work. Any help on how to link my rollover menu images to the sub menu would be greatly appreciated! Thanks in advance! Here is the code for my menu (I have only included 2 menu items here, if you need more info please let me know): Code:
<script type="text/javascript">
<!--
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];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/buttons/teamandcorpsports.jpg','images/buttons/performancesports.jpg','images/buttons/flagsandbanners.jpg','images/buttons/home.jpg','images/buttons/catalogues.jpg','images/buttons/galleries.jpg','images/buttons/designown.jpg','images/buttons/dealerlogin.jpg','images/buttons/contactus.jpg','images/buttons/dealersignup.jpg')">
<div id="wrapper">
<div id="header">
<h1> </h1>
</div>
<!-- Main content -->
<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>
<script type="text/javascript" src="slideshow.js"></script>
</div>
<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teamandcorpsports1','','images/buttons/teamandcorpsports.jpg',1)"><img src="images/buttons/teamandcorpsports1.jpg" alt="Team and Corporate Sports" name="teamandcorpsports1" width="224" height="37" border="0" id="teamandcorpsports1" /></a></li>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('performancesports1','','images/buttons/performancesports.jpg',1)"><img src="images/buttons/performancesports1.jpg" alt="Performance Sports" name="performancesports1" width="224" height="37" border="0" id="performancesports1" /></a></li>
Here is my CSS code for the menu, not sure if this is where the issue is? Code: /* navigation menu */
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none; /* removes bullets */
background-image:url('background.jpg');
}
#navcontainer li {
margin: 0 0 0 0; /* separates list items */
}
#navcontainer a
{
display: block; /* achieves rollover */
width: 250px; /* list width */
text-decoration: none;
}
Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim Hi! I'm relatively new to JavaScript, though I've done some PHP and Java programming before. Still, be gentle . I have a menu with some images as the links. These images have onmouseover() and onmouseout() functions where the image is changed (onmouseover makes the image blue, while the onmouseout restores the original white). Now, my problem is that I also want to make the link corresponding to the currently open page to stay blue all the time, but I cannot for the life of me figure out how to do it. I've tried with onClick="document.[IMG].src='blue'" but clearly, as the page reloads to open the chosen link, the image is reset to white. I've also tried some other, unsuccessful solutions that don't need mentioning here... How do I make the image stay blue even when the page is reloaded? I'd be really happy if you could point me towards some examples of this being done. This is parts of my code (it's not much and I know it's a bit of a mess, it's in the developmental stages...): Code: function printHTMLTop()
{
var html = '<div class="main" id="main"> \
<div class="header" id="header">\
<div class="topHeader" name="topHeader"> \
<div class="logo" name="logo"><a href="index.php"><img src="logoBlue02.png" /></a></div> \
\
</div> \
<div class="midHeader" name="midHeader"><img src="midHeadImg.png" /></div> \
<div class="bottomHeader" name="bottomHeader"> \
<div class="menu" name="menu"><a href="index.php"><img name="hem" id="hem" src="menu_HemW.png" onmouseover="document.hem.src=\'menu_HemB.png\'" onmouseout="document.hem.src=\'menu_HemW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Contract.php"><img name="skapa" src="menu_SkapakontraktW.png" onmouseover="document.skapa.src=\'menu_SkapakontraktB.png\'" onmouseout="document.skapa.src=\'menu_SkapakontraktW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="gbookAdd.php"><img name="gbook" src="menu_GbookW.png" onmouseover="document.gbook.src=\'menu_GbookB.png\'" onmouseout="document.gbook.src=\'menu_GbookW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Forskning.html"><img name="forskning" src="menu_ForskningW.png" onmouseover="document.forskning.src=\'menu_ForskningB.png\'" onmouseout="document.forskning.src=\'menu_ForskningW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Intervjuer.html"><img name="intervju" src="menu_IntervjuerW.png" onmouseover="document.intervju.src=\'menu_IntervjuerB.png\'" onmouseout="document.intervju.src=\'menu_IntervjuerW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Ungdom.html"><img name="ungdom" src="menu_UngdomW.png" onmouseover="document.ungdom.src=\'menu_UngdomB.png\'" onmouseout="document.ungdom.src=\'menu_UngdomW.png\'" /></a></div> \
<div class="menu" name="menu"><a href="Lankar.html"><img name="lank" src="menu_LankarW.png" onmouseover="this.src=\'menu_LankarB.png\'" onmouseout="this.src=\'menu_LankarW.png\'" /></a></div> \
</div> \
</div> \
<div class="mid" id="mid">';
document.write(html);
}
Thanks for your help! |
|||||||