wayne on April 28, 2008
It seems I'm hexed when it comes to Javascripting lately. I recently needed to show or display a div tag based on the value of a checkbox. Any trigger that can fire off a JavaScript method will work.
I've never visited QuirksMode before and got any help from the site until now. The Display and Visibility page was exactly what I needed. Seems perfect for cross-browser compatibility.
Here is the long and short of it.
JavaScript in the <head>:
function visi(nr)
{
if (document.layers)
{
vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
document.layers[nr].visibility = vista;
}
else if (document.all)
{
vista = (document.all[nr].style.visibility == 'hidden') ? 'visible' : 'hidden';
document.all[nr].style.visibility = vista;
}
else if (document.getElementById)
{
vista = (document.getElementById(nr).style.visibility == 'hidden') ? 'visible' : 'hidden';
document.getElementById(nr).style.visibility = vista;
}
}
function blocking(nr)
{
if (document.layers)
{
current = (document.layers[nr].display == 'none') ? 'block' : 'none';
document.layers[nr].display = current;
}
else if (document.all)
{
current = (document.all[nr].style.display == 'none') ? 'block' : 'none';
document.all[nr].style.display = current;
}
else if (document.getElementById)
{
vista = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
document.getElementById(nr).style.display = vista;
}
}
And here is our div tag starting off by displaying nothing. For this, I'll use the blocking procedure since I won't be dealing with the visibility style.
<div id="myDiv" style="display:none;">
Call these guys to implement either visibility or blocking toggling. Just pass in the id of the div. Will work for other items as well.
Perhaps now I won't be vexed by this issue again.
