Here's the rundown on a page I'm trying to create with a box that can be shown (visible) or hidden. What happens is if I use the css visibility property setting that to hidden, the box does not appear, but I cannot use the mouse to access the buttons or input boxes that the box would cover up if shown.
While the box is hidden, cecking the value of the .visibility property returns an empty string. Using the toggleVis() function, the visibility is property toggled & the .visibility property is correctly either "hidden" or "visible"; and the best part is I can use the mouse to click the button underneath the box or enter the textboxes.
So my question is, how should I set this up so my box is both hidden & underlying pieces of the webpage can be properly accessed by the mouse without having to set the visibility property from the onload() event?
While the box is hidden, cecking the value of the .visibility property returns an empty string. Using the toggleVis() function, the visibility is property toggled & the .visibility property is correctly either "hidden" or "visible"; and the best part is I can use the mouse to click the button underneath the box or enter the textboxes.
So my question is, how should I set this up so my box is both hidden & underlying pieces of the webpage can be properly accessed by the mouse without having to set the visibility property from the onload() event?
Code:
<script src="findDOM.js"></script>
<script language="JavaScript">
function toggleVis(objectID) {
var dom = findDOM(objectID,1);
state = dom.visibility;
if (state == 'hidden' || state == 'hide' ) {
dom.visibility = 'visible';
}
else {
if (state == 'visible' || state=='show') {
dom.visibility = 'hidden';
}
else {
dom.visibility = 'hidden';
}
}
}
</script>
<style type="text/css">
#colorcharts {position: absolute; left: 805px; top: 130px; visibility: hidden;}
</style>
<title>Order Form</title>
</head>
<body bgcolor="#f0fff0" onload="toggleVis('colorcharts')">