Author Name/notes : Raymond Angana aka rangana
Description : I was inspired by this post: post49170.html#p49170
This is a simple and very light script that show,hide (multiple) element(s), calls file and append to the element and writes text nodes to (multiple) element(s).
The script gives you the advantage to show/hide/write (multiple) element(s) at a time, by passing it as an argument to the available methods as explained below. It also gives you the flexibility to create text nodes from external file (via AJAX).
Code:
- Code: Select all
<script type="text/javascript">
/**
Title: Show, Hide, CallFile and Write to Element 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>
Methods available on ray object are as follows:
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.
Hope this helps.
