...

View Full Version : Review this "show/hide layers" script for errors and cross browser compatibility



realrealtomato
07-15-2010, 07: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.


<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, 08: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:


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

Should get rid of those.

realrealtomato
07-15-2010, 09: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, 09:28 AM
<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>
You shouldn't use javascript pseudo (http://www.javascripttoolbox.com/bestpractices/#onclick) 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


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


<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, 09: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, 09:47 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

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

low tech
07-15-2010, 09: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, 08: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.]



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum