That can't be done with JS alone, you need AJAX to do that.
<script type="text/javascript">
/**
Title: Show/Hide Layer script
Author: Raymond Angana - [username = rangana in devppl.com/forum]
Created: 1/10/09
This notice must stay intact for legal use
Installation configuration:
hidelayer() - pass the id(s) of the layer you want to hide. Could work with multiple IDs
showlayer() - pass the id(s) of the layer you want to show. Could work with multiple IDs.
callFile() - first argument should be the URL of the file to call. The next argument is the ID of the layer you want the content of the file to show.
writetolayer() - first argument should be the text to write. The next argument(s) is the ID of the layer(s) you want the text be written. Could work with multiple IDs.
*/
var ray={
hidelayer:function(){
if(this.hidelayer.arguments.length>1){
for(var i=0;i<this.hidelayer.arguments.length;i++)
this.showHide(this.hidelayer.arguments[i],'none');
}
else this.showHide(this.hidelayer.arguments[0],'none');
},
showlayer:function(){
if(this.showlayer.arguments.length>1){
for(var i=0;i<this.showlayer.arguments.length;i++)
this.showHide(this.showlayer.arguments[i],'');
}
else this.showHide(this.showlayer.arguments[0],'');
},
getID:function(el){
return document.getElementById(el);
},
el:'',
callFile:function(){
this.el=this.el==''?this.callFile.arguments[1]:this.el;
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
ray.showlayer(ray.el);
ray.getID(ray.el).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("POST",this.callFile.arguments[0],true);
xmlHttp.send(null);
},
writetolayer:function(){
if(this.writetolayer.arguments.length>2){
for(var i=1;i<this.writetolayer.arguments.length;i++){
this.showlayer(this.writetolayer.arguments[i]);
this.getID(this.writetolayer.arguments[i]).innerHTML=this.writetolayer.arguments[0];
}
}
else{
this.showlayer(this.writetolayer.arguments[1]);
this.getID(this.writetolayer.arguments[1]).innerHTML=this.writetolayer.arguments[0];
}
},
showHide:function(el,disp){
this.getID(el).style.display=disp;
}
}
</script>
<span id="newlayer" style="position:absolute;">layer-text</span>
<br><br><br>
<a href="#" onclick="ray.hidelayer('newlayer');return false;">hide layer</a> |
<a href="#" onclick="ray.showlayer('newlayer');return false;">show layer</a> |
<a href="#" onclick="ray.callFile('myfile.php','newlayer');return false;">layer-text #1</a> |
<a href="#" onclick="ray.writetolayer('layer-text #2','newlayer');return false;">layer-text #2</a>
Your Javascript is so old, no need for document.all and those unnecessary detection for old browsers (IE5, Netscape).
The new script gives you the advantage to show/hide multiple layers at a time, by passing it as an argument to the available methods as explained below.
- pass the id(s) of the layer you want to hide. Could work with multiple IDs.
- pass the id(s) of the layer you want to show. Could work with multiple IDs.
- first argument should be the URL of the file to call. The next argument is the ID of the layer you want the content of the file to show.
- first argument should be the text to write. The next argument(s) is the ID of the layer(s) you want the text be written. Could work with multiple IDs.
Hope that helps.
