Review this "show/hide layers" script for errors and cross browser compatibility

realrealtomato · 07-15-2010, 06:39 AM

I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback.

Code:

<head>
<script type="text/javascript">
lastone='empty'; 
function showIt(lyr) 
{ 
if (lastone!='empty') lastone.style.display='none'; 
lastone=document.getElementById(lyr); 
lastone.style.display='block';
}
</script>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>

Here is a demo of it in action:
http://www.mousegrey.com/layers.html

Old Pedant · 07-15-2010, 07:23 AM

That should be compatible with all browsers except Netscape 4 and MSIE 4. Since those both became obsolete about 1999 or so, I'd say you are okay.

You do have one extra quotation mark in all your <a> tags:

Code:

<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>

Should get rid of those.

realrealtomato · 07-15-2010, 08:05 AM

I am hoping that you can help me with an afterthought I had; Sometimes javascripts bring about a warning bar in your browser asking for permission to enable the scipt-- But sometimes it is allowed to run without this prompt. Would you be able to determine whether this code I'm using will run smoothly on it's own, or if the user will have to grant permission?

Thank you very much for your time, I am self taught and trying to finish this page of my project site quickly. Your help is very much appreciated!

abduraooft · 07-15-2010, 08:28 AM

Quote:

<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>

<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>

You shouldn't use javascript pseudo as it's useless. I'd recommend to change them to named anchors to make them accessible for users who have no javascript support in their browser, like

Code:

<a href="#divID1" onClick="showIt('divID1'); return false; ">link1</a>

Code:

<div  id="divID1">content1</div>

And, instead of statically setting a style display:none; to all the elements, use some javascript code to hide them. Thus, they will be visible and accessible even if there's no javascript. Read http://en.wikipedia.org/wiki/Progressive_enhancement

low tech · 07-15-2010, 08:38 AM

Hi
using IE8

What I get when I try your link is a page with a link in it 'content1' and when clicked, I get an error!! object required line 10

realrealtomato · 07-15-2010, 08:47 AM

Quote:

Originally Posted by low tech

Hi
using IE8

What I get when I try your link is a page with a link in it 'content1' and when clicked, I get an error!! object required line 10

I realized this is because of the extra quotation mark typo that the first response pointed out

low tech · 07-15-2010, 08:54 AM

Hi
sorry, I assumed wrongly that it would have been changed --- didn't check source code -- silly me hahahhaha

Old Pedant · 07-15-2010, 07:12 PM

Permissions issues like that arise for two reasons:
(1) You are doing something that violates the browser's sense of security. Typically, trying to access something like an ActiveX component (IE only) or Java component.

(2) You run an HTML page in the browser using the *FILENAME* and *not* using a web server. That is, "c:\test\foo.html" or "file://c:\test\foo.html". When you do that, you *automatically* bypass the normal permission checks so IE first asks you if you are sure you want to take a chance on what, for all IE knows, was a virus page you downloaded from the 'net and are now trying to run as "trusted". [You can avoid seeing this message by running IIS web server on your machine and then using "http://localhost/foo.html"--when using the http protocol, the normal browser safety mechanisms kick in.]