PDA

Click to See Complete Forum and Search --> : show/hide layers in netscape

wynton_ca
05-22-2003, 01:55 PM
Hey all you js freaks. Im having a problem with a show/hide layer script. The basics - user clicks 'show details', layer opens up, original link changes to 'hide details', user clicks on hide details, the layer goes away and reverts back to 'show details'. I have the script functioning well on IE, however NN is giving me many problems. I thought I might throw it up on here and see if any of you have some suggestions on this. Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>show-hide test</title>
<script>
function toggle_div_inline_display(id) {
var spanObj = document.all.item(id);
var prevStyle = spanObj.style.display;
if (prevStyle == 'none') {
spanObj.style.display = 'inline';
}
else {
spanObj.style.display = 'none';
}
}

function toggle_innertext_display(thisElement,displayedText1,displayedText2) {
if (thisElement.innerText == displayedText1) {
thisElement.innerText = displayedText2;
}
else if (thisElement.innerText == displayedText2) {
thisElement.innerText = displayedText1;
}
else {
thisElement.innerText = displayedText1;
}

}
</script>
</head>

<body>

<a href="javascript:toggle_div_inline_display('1');" onclick="javascript:toggle_innertext_display(this,'Show Details','Hide Details');">Show Details</a>
<br>
<div ID='1' STYLE='display: none' >
this is the content of layer 1<br>
</div>
<a href="javascript:toggle_div_inline_display('2');" onclick="javascript:toggle_innertext_display(this,'Show Details','Hide Details');">Show Details</a>
<br>
<div ID='2' STYLE='display: none' >
this is the content of layer 2
</div>
</body>
</html>


It seems as though NN just doesnt recognize the script at all. Let me know what you think.

thanks!

wynton
Vladdy
05-22-2003, 01:59 PM
You are using proprietory IE methods to access objects. Sure no other browser (other than the suffering from identity crisis Opera :D :D :D ) will recognize them.
khalidali63
05-22-2003, 03:13 PM
Originally posted by Vladdy
Y(other than the suffering from identity crisis Opera :D :D :D )

:D :D

Thats funny,though so true
wynton_ca
05-22-2003, 03:14 PM
How would I go ahead and swap the text of a link based on the onClick method?

Initial: 'show details'
onClick: 'hide deatils'
onClick: 'show details'
etc etc

Im at a loss for this. As for the show/hide layer, Im on a better track and will post what Ive done. If you could help me with the hide/show of the text link Id much appreciate it.

thanks,
wynton
khalidali63
05-22-2003, 03:35 PM
I am not sure what exactly you are trying to do,what I could understand is,

<a href="http://www.w3c.org" onmouseover="this.innerHTML='new Text'" onmouseout="this.innerHTML='original text'">original text</a>


the above will change the text in the link,on mouseover and out
wynton_ca
05-22-2003, 05:06 PM
So now ive got it to the point where everything is working, but the display is kinda messed up. I want it to be such that each link could be on a seperate line as such:

link 1
link 2
link 3

When you click on a link, the space between 'link1' and 'link2' would expand to reveal the 'hidden' div layer. currently it looks more like this:

link 1

link 2

link 3

Which is not the desired affect. Below is the test code ive assembled. Please lemme know if you have any possible solutions to this. thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>show-hide test</title>
<script>
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
//With nested layers for netscape, this function hides the layer if it's visible and visa versa
function showHide(div){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
if(obj.visibility=='visible' || obj.visibility=='show') obj.visibility='hidden'
else obj.visibility='visible'
}
//Shows the div
function show(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
obj.visibility='visible'
}
//Hides the div
function hide(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
obj.visibility='hidden'
}
</script>

<script>
function toggle_innertext_display(thisElement,displayedText1,displayedText2) {
if (thisElement.innerHTML == displayedText1) {
thisElement.innerHTML = displayedText2;
}
else if (thisElement.innerHTML == displayedText2) {
thisElement.innerHTML = displayedText1;
}
else {
thisElement.innerHTML = displayedText1;
}

}
</script>
</head>

<body>

<a href="#" onclick="javascript:toggle_innertext_display(this,'Show Details','Hide Details');showHide('myLayer')">Show Details</a><br>
<div id="myLayer" style="visibility:hidden;">
this is the content of layer 1
</div>
<a href="#" onclick="javascript:toggle_innertext_display(this,'Show Details','Hide Details');showHide('myLayer2');">Show Details</a>
<div ID="myLayer2" style="visibility:hidden;">
this is the content of layer 2
</div>
</body>
</html>