Forum Moderators: open
In the June 10, 2003 post tedster posted a javascript menu.
In the body, you call the function that shows/hides layer(s), from some text with an <a> anchor like this:
<a onClick="hideAll(); showLayer('layer1');">This shows layer1.</a>
How would I code this if I wanted to apply this to a drop-down list, to show a specific layer depending which option you picked. So far, this hasn't worked:
<option value="hideAll(); showLayer('layer1');">
If anyone could please take a moment, do you know how this is done?
Thank You!
<script>
function refreshLayer(objSelect){
hideall();
showLayer(objSelect.options[objSelect.selectedIndex].value);
}
</script>
...
<select onchange="refreshLayer(this)">
<option value="layer1">Layer 1</option>
<option value="layer2">Layer 2</option>
...
</select>
-=casey=-
These are in an external .js:
function init() { if (document.layers) { layerRef="document.layers"; styleSwitch=""; visibleVar="show"; screenSize = window.innerWidth; what ="ns4"; } else if(document.all) { layerRef="document.all"; styleSwitch=".style"; visibleVar="visible"; screenSize = document.body.clientWidth + 18; what ="ie4"; } else if(document.getElementById) { layerRef="document.getElementByID"; styleSwitch=".style"; visibleVar="visible"; what="dom1"; } else { what="none"; newbrowser = false; } check = true; }
function showLayer(layerName) { if(check) { if (what =="none") { return; } else if (what == "dom1") { document.getElementById(layerName).style.visibility="visible"; } else { eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); } } else { return; } }
function hideLayer(layerName) { if(check) { if (what =="none") { return; } else if (what == "dom1") { document.getElementById(layerName).style.visibility="hidden"; } else { eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); } } else { return; } }
function hideAll() { hideLayer('layer1'); hideLayer('layer2'); hideLayer('layer3');
function onLoad() { init(); }
These are in the HTML doc:
<head>
<script type="text/javascript" src="nav.js"></script>
</head>
<body onLoad="init();">
<a href="#" onClick="hideAll(); showLayer('layerName');">This shows layer 1.</a>
Only I need this call to be in a drop-down list instead of regular text bound by an <a>.
I've tested this the way it is here and it works. I can't seem to make it work in the menu list.
Please Help!
Thanks...
-=casey=-
Thanks
"Object Expected"
It's character 1 on the line:
hideAll();
<html>
<head>
<script language="javascript">
var layerRef; var styleSwitch; var screenSize; var what;
function init() {
if (document.layers)
{
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
screenSize = window.innerWidth;
what ="ns4";
} else if(document.all) {
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
what ="ie4";
} else if(document.getElementById) {
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="dom1";
} else {
what="none";
newbrowser = false;
}
check = true;
}
function showLayer(layerName) {
if(check) {
if (what =="none") {
return;
} else if (what == "dom1") {
document.getElementById(layerName).style.visibility="visible";
} else {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
} else {
return;
}
}
function hideLayer(layerName) {
if(check) {
if (what =="none") {
return;
} else if (what == "dom1") {
document.getElementById(layerName).style.visibility="hidden";
} else {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
} else {
return;
}
}
function hideall(){
for(var i = 0; i < document.myForm.mySelect.length;i++){
hideLayer(document.myForm.mySelect.options(i).value);
}
}
function refreshLayers(){
hideall();
showLayer(document.myForm.mySelect.options(document.myForm.mySelect.selectedIndex).value);
}
</script>
</head>
<body onload="init();refreshLayers();">
<form name="myForm">
<select name="mySelect" onchange="javascript:refreshLayers();">
<option value="layer1">Layer 1</option>
<option value="layer2">Layer 2</option>
<option value="layer3">Layer 3</option>
</select>
<br>
<br>
<span id="layer1">This is layer1</span>
<span id="layer2">This is layer2</span>
<span id="layer3">This is layer3</span>
</form>
</body>
</html>
-=casey=-
The error is:"Object Expected"
It's character 1 on the line:
hideAll();
This would indicate that your are refencing an ID in the hideAll() function that is not actually on the page.
To use a select list, do as suggested: use onChange and take the value used in the option to display the correct layer.
The Menu Script: [webmasterworld.com ]
alert(typeOf hideAll) should tell you more
