Topic awaiting preservation: layers not working on the mac

Hi all,

This is a script I wrote myself and I just starting working on in today so there are probably many errors. Also, I haven't even begun to really code(there is some cross browser stuff) or test on Opera and Netscape, so...

But the real problem is that it works fine on Windows but not on a mac. I personally do not own a mac to test on, so I ask friends to test for me and take screenshots or tell me what is wrong. 3 people have all let me know that the layers in my code are not switching. And to make matters worse, it's crashing/slowing some of their machines!

What I'm trying to accomplish is this; I have two div tags with large amounts of text enclosed in each. When the page loads, in the onLoad handler, I'm calling setInterval() to make the layers switch back and forth. So one layer gets hidden, and then the other is visible, and vice versa.

Here's the code:

<style>
.overall {font-family: Verdana; font-size: 8px; }
.table {
position: absolute;
top: 567px;
z-index: 1;
}
.closed {
position: absolute;
top: 50px;
z-index: 4;
background: #000000;
visibility: visible;
}

.open {
position: absolute;
top: 50px;
z-index: 3;
background: #000000;
visibility: hidden;
}
.border {
color: #E8B53C;
}

</style>

<script language="JavaScript" type="text/javascript">
<!--
// simple browser check
v4 = (parseInt(navigator.appVersion) >= 4 && parseInt(navigator.appVersion) <= 5) ? 1:0
ie = (document.all && v4) ? 1:0
ns = (document.layers && v4) ? 1:0

// shows layer openpic, hides layer closedpic
function showOpen() {
if (ie) {
eval('openpic' + '.style.visibility = "visible"');
eval('closedpic' + '.style.visibility = "hidden"');
}
if (ns) {
eval('document.' + 'openpic' + '.visibility = "show"');
eval('document.' + 'closedpic' + '.visibility = "hide"');
}
setTimeout('hideOpen()',300);
}

// shows layer closedpic, hides layer openpic
function hideOpen() {
if (ie) {
eval('openpic' + '.style.visibility = "hidden"');
eval('closedpic' + '.style.visibility = "visible"');
}
if (ns) {
eval('document.' + 'openpic' + '.visibility = "hide"');
eval('document.' + 'closedpic' + '.visibility = "show"');
}
}

// script to refresh browser on resize
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth;
origHeight = window.innerHeight;
onresize = function() { if(innerWidth != origWidth

I think that I am confused on what you what to do. Are you wanting to have the layers switch back and forth when the page loads? So every 4500 milseconds, the layers switch?

Later,
C:\


~Binary is best~

Yeah that's it exactly. Imagine that there are two text layers positioned right on top of each other. When the page loads, only one is visible, every 4500 milliseconds, the visible layer gets hidden, and the other hidden layer becomes visible. Then after 300 milliseconds (note the call to setTimeout in the showOpen() function) they switch back.....this continues forever, in a loop, so that in another 4500 milliseconds the layers switch again.

The reason I have to hide the layer on the bottom is because they are text blocks, with transparent backgrounds, and the text would overlap and be unreadable otherwise. Make sense? Like I said before, this works on Win 98/Me/XP/NT with IE 4+.

EDIT: I suppose I could make my layers have backgrounds instead of being transparent and then only have to hide/show one layer, but I don't think it will solve my problem. However, I will try that and post the results.

[This message has been edited by cira (edited 09-01-2002).]

[This message has been edited by cira (edited 09-02-2002).]

Well I think that it may have to do with what version of browser they are using on MAC. I think that you would probably have better luck with it if you did just use one layer and then show/hide that one layer.

Then again I am no JavaScript pro. I was hoping that someone would come along and spot the problem.

Good luck.

Later,
C:\


~Binary is best~

I'm now thinking it might be a problem with the setTimeout() and setInterval functions. Has anyone had problems using those functions with a MAC?

After much research on cross browser and platform coding, I found this

"In Internet Explorer 5.0 for the Macintosh (and later), the browser uses the DOCTYPE element to decide how the document should be rendered."

I was using the wrong doctype. For anyone that didn't know about this, there are some wonderful articles at Netscape's Developer site and Apple.
http://developer.apple.com/internet/html/doctype.html