Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <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 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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by low tech View Post
    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

  • #7
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi
    sorry, I assumed wrongly that it would have been changed --- didn't check source code -- silly me hahahhaha

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •