HTML (Div Layer):
<div id="myDiv" style="position:absolute; visibility:hidden; width=100%;">
<table ...
...
</table>
</div>
HTML (Event Starter):
<input type=checkbox name=mycheckboxid onclick="javascript:toggle(document.myform);">
Javascript:
function getObj(name)
{
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function toggle(theForm) {
obj1 = new getObj('myDiv');
if (obj1.style.visibility == 'visible') {
obj1.style.visibility = 'hidden';
obj1.style.position = 'absolute';
}
else {
obj1.style.visibility = 'visible';
obj1.style.position = 'relative';
}
}
There are three parts of this implementation:
1) DIV Layer (to wrap the table)
2) Activation (to trap events to activate the hide/unhide action, for this method make sure the form name is called myform or change accordingly)
3) The Javascript Subroutines to handle the hide/unhide action (I'm showing the toggle version which changes the visibility depending on the current exposure)
No comments:
Post a Comment