Thursday, February 25, 2010

Javascript to hide/unhide table layer for IE+Firefox+Safari

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