Show-Hide Layer Test For Mac and NS

[TheDemon]

Hi people,

I've got this exciting little show-hide layer project on the go and want to make sure it works cross-browser. It looks perfect on my set-up (XP, IE6, 1152x864) but I've just checked on an iMac (with IE 5) and noticed that not only does the layer function work but it doesn't even see the images on the menu (which are the show-hide buttons). I've not checked in Netscape yet.

Does anyone know what is missing in the code to make this Mac-compliant? It would seem a shame to lose this functionality.

The project may be found at:

http://www.spannerheadz.com/test/layers.htm

Thank you to anyone out there who may be able to help! The Demon

..:: Visit me at:

http://www.syclick.com

..:: Try out:

http://www.sysurvey.com

..:: Subscribe to:

http://www.syberfood.com

 

[Sleidia]

Hello.

Your page can't work on Netscape (Mac & Win).

I suggest you use this snippet I always use because
it is cross-browser/cross-platform (tested on IE4->IE6,
NN4->NN6, Win&Mac).

Here it is:

// cross-browser show/hide layers----------------------------- START ------------->
function getStyleObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}

function showLayer(objectId) {
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.visibility = "visible";
return true;
} else {
return false;
}
}

function hideLayer(objectId) {
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.visibility = "hidden";
return true;
} else {
return false;
}
}
// cross-browser show/hide layers----------------------------- STOP ------------->


CSS:
#test1 { position: absolute; z-index: 1; top: 10px; left: 169px; visibility: hidden }
#test2 { position: absolute; z-index: 1; top: 10px; left: 169px; visibility: hidden }


To run it:
hideLayer('test1');
showLayer('test2');


Have a good day.

 

[TheDemon]

Hi Sleidia,

Thanks very much for your response - I was starting to lose heart but this looks encouraging. However I'll admit that I used Dreamweaver for this and your code is scaring me a little. Could you tell me:

- do I replace the JS in my code with your one or do I add to it? (And will a straight copy do it or will i have to replace anything in your code)

- as you can see my layers are actually layers within layers, though i only want to switch layer1 on and off. is your code compatible with this?

- when you say 'to run it', at what point do i insert that last bit of code?

As you can see I'm struggling to replace the Dreamweaver code with your bits. I'm unsure which bits to take out and what to keep in.

Can you help at all? I know it's a tall order but your help would be really appreciated.

Thanks in advance! The Demon

..:: Visit me at:

http://www.syclick.com

..:: Try out:

http://www.sysurvey.com

..:: Subscribe to:

http://www.syberfood.com

 

[Sleidia]

Sorry to be late (I forgot to check E-mail Notification).

Replace the functions called MM_showHideLayers() and MM_findObj(n, d) with the 3 I've posted.
For what you've done, you shouldn't need to use nested
layers. Always avoid to do such a thing when you can.

Your code: onMouseDown="MM_showHideLayers('MTab1','','show','MTab2','','hide','MTab3','','hide','MMain1','','show','MMain2','','hide','MMain3','','hide')">

Change it to something like: onMouseDown="hideLayer('layer1');showLayer('layer2')">

Look closer at the code instead of looking at the wysiwig
interface.

Have a good day.