Forum Moderators: open
QUESTION: But the 2nd line of the 2nd function is causing trouble, and I can't figure out why. Can you help?
<script type="text/javascript">
var mylastlayer;
function hideLayer(ObHide){
document.getElementById(ObHide).style.visibility="hidden";
}
function showLayer(ObShow){
document.getElementById(ObShow).style.visibility="visible";
document.getElementById(mylastlayer).style.visibility="hidden";
mylastlayer = ObShow;
}
</script>
This next script works completely. But when there are about 10 class="hidable" divs, then it takes a bit longer, as I think it checks all the possible divs, rather than simply hides the last opened one as attempted by the above. So I really would prefer to use the script idea above... if it can be fixed.
<script type="text/javascript">
function hideLayer(ObHide){
document.getElementById(ObHide).style.visibility="hidden";
}
function showLayer(ObShow){
var divs = document.getElementById("hidable").getElementsByTagName('div');
for(var i=0; i<divs.length; i++){
if(divs[i].style.visibility == 'visible'){
divs[i].style.visibility = 'hidden';
}
}
document.getElementById(ObShow).style.visibility = 'visible';
}
</script>
But the 2nd line of the 2nd function is causing trouble,
<script type="text/javascript">
var mylastlayer;
function hideLayer(ObHide){
try {
document.getElementById(ObHide).style.visibility="hidden";
} catch(er){}
}
function showLayer(ObShow){
var showEl = document.getElementById(ObShow),
hideEl = document.getElementById(mylastlayer);
if (showEl !== null) {
showEl.style.visibility="visible";
if (hideEl !== null) {
hideEl.style.visibility="hidden";
}
}
mylastlayer = ObShow;
}
</script>
Thanks for the workaround... but I decided an easier route was to simply assign a value to the variable from the start. It worked!
I can't paste my whole code, because it is quite long, but I will give the short of it here...
<body>
<div id="header">
//code for header follows
//css = {position:fixed; width:100%; z-index:50;}
</div>
<div id="LeftSidebarMenu">
//code for LeftSidebarMenu..
//css = {position:absolute; width:15%; z-index:30;}
</div>
<div id="RightSidebarQuickLinks">
//code for RightSidebarQuickLinks..
//css = {position:absolute; right:0px; width:15%; z-index:30;}
</div>
<div id="scroller">
//then follows 11 divs one after the other as per
//<div id="div_n"> whatever content </div>
//all are css = {display:block; width:550px;}
</div> //referring to the end of scroller
<script language="JavaScript">
resetdivs4_JS_users();
</script>
</body>
It is pretty simple really. The code for the scroller is as follows, and I won't use shorthand this time.
#scroller {
position: fixed;
left: 15%;
width: 63%;
display: block;
height: 67%;
max-height: 67%;
padding-top: 5px;
padding-left: 5%;
overflow-x: scroll;
overflow-y: scroll;
z-index: 3;
background-color: #FFF;
font-style: normal;
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 150%;
}
I noticed as I was copy pasting to this screen that the css "position" was mispelled (grr how do you spell misspell?) as "postion". So now I have to fix the position of the menus and the scroller, as they are behind the header... but I don't think that is what caused the moveup() function not to work in FF. It works in IE.
Now, I know you've already fixed this with a work-around by declaring a value for "mylastlayer", but an alternative solution is a simple if statement:
if (mylastlayer) {
var mylastlayer;
function hideLayer(ObHide){
document.getElementById(ObHide).style.visibility="hidden";
}
}