Forum Moderators: open

Message Too Old, No Replies

Hiding a previously opened layer

Hiding last layer when opening next one

         

garjoh

5:34 am on Jan 21, 2010 (gmt 0)

10+ Year Member



I have several divs which are able to open in the center area of my page, and have classed them all as "hidable". Though each has its own "Close" button, I also wanted to close divA, for example, when someone clicks to open divB or divC or divZ. The variable does work, and is only changed after closing the previous layer.

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>

astupidname

7:36 am on Jan 23, 2010 (gmt 0)

10+ Year Member



Welcome to webmasterworld!
But the 2nd line of the 2nd function is causing trouble,

Always best to clarify what exactly you mean by 'causing trouble', but I will assume it fails on the first attempt because mylastlayer has not yet had a value assigned to it, which is first done at the end of the showLayer function. So when showLayer reads the 2nd line in it which tries to use mylastlayer inside of document.getElementById since mylastlayer is undefined document.getElementById will be null and not have a style property and will error out. The solution is to use use error checking:
<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>

garjoh

7:46 am on Jan 26, 2010 (gmt 0)

10+ Year Member



That may have been the problem alright. I thought of it, and since no error message came up I assumed that the variable (mylastlayer) would work on the second click. But now I realize that if it errs on the one line, it won't reach the line to reassign the variable.

Thanks for the workaround... but I decided an easier route was to simply assign a value to the variable from the start. It worked!

garjoh

8:56 am on Jan 26, 2010 (gmt 0)

10+ Year Member



Now the only part of my whole page that Firefox doesn't recognize is:

function moveup(){
scroller.scrollTop = 0;
}
Grrr...

Fotiman

2:02 pm on Jan 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There's no reason Firefox shouldn't recognize that, assuming you have a global variable scroller that contains an element reference, and assuming that element is scrollable.

garjoh

2:12 am on Jan 28, 2010 (gmt 0)

10+ Year Member



Yes, and that is exactly what I am gleaning as I search the web. But I still haven't found the answer.

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.

Readie

4:50 am on Jan 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I do have something small that is meaningful to bring to this thread, but first I would just like to say that you misspelled "misspelled". It has 2 S's :) :P
(At least, in the English[UK] vocabulary it does)

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";
}
}

garjoh

7:49 am on Jan 29, 2010 (gmt 0)

10+ Year Member



Haha.. yea, I knew one of them was the right spelling... so I used one of each rather than look it up which is my normal MO.

Thanks for that idea... I didn't realize that.