Show/Hide layer in Netscape/IE problem

Discussion in 'Javascript' started by Mark, Nov 25, 2003.

  1. Mark

    Mark Guest

    Hi - I have a function which shows/hides a <div> on my page - this
    appears to oinly work in IE, but I also need it to work in Netscape 7.1.

    My function is in my head:

    function openIt(faq) {
    showIt = document.all(faq);
    if (showIt.style.display == "none") {
    showIt.style.display = ""
    } else {
    showIt.style.display = "none"
    }
    }

    ...and the onclick code is:

    <a href="#" onclick="Javascript:eek:penIt('22list'); return false;">click
    here to toggle</a>

    <div id="22list" style="display:none">
    This will show/hide when you click the above link
    </div>


    Could anyone help amend the function to run in both IE and Netscape?

    Thanks for any help,

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Mark, Nov 25, 2003
    #1
    1. Advertising

  2. Mark wrote:

    > Hi - I have a function which shows/hides a <div> on my page - this
    > appears to oinly work in IE, but I also need it to work in Netscape 7.1.


    I didn't even need to look at the rest of the code to see what was wrong.
    I'm sure a search in google groups would have found the answer, it seems to
    come up several times a week around here.

    <http://www.metalusions.com/backstage/articles/8/> appears to be a
    reasonable explanation.

    > <a href="#" onclick="Javascript:eek:penIt('22list'); return false;">click
    > here to toggle</a>


    (1) The "Javascript:" in the onclickj event is redundent.
    (2) href='#' is nasty. If you can't put a useful URL in there, don't use a
    link

    > <div id="22list" style="display:none">


    OK, I was wrong. I didn't guess what was wrong. Not everything at least. You
    have two problems. The solution to the first is above, the other is that
    ids may NOT begin with a number.

    <http://validator.w3.org/>

    --
    David Dorward http://dorward.me.uk/
     
    David Dorward, Nov 25, 2003
    #2
    1. Advertising

  3. Mark

    Fabian Guest

    Mark hu kiteb:

    > Hi - I have a function which shows/hides a <div> on my page - this
    > appears to oinly work in IE, but I also need it to work in Netscape
    > 7.1.
    >
    > My function is in my head:
    >
    > function openIt(faq) {
    > showIt = document.all(faq);
    > if (showIt.style.display == "none") {
    > showIt.style.display = ""


    Change the above line to one of:

    showIt.style.display = "inline";
    showIt.style.display = "block";

    And then be aware of the difference between them, and use them
    appropriately.


    --
    --
    Fabian
    Visit my website often and for long periods!
    http://www.lajzar.co.uk
     
    Fabian, Nov 25, 2003
    #3
  4. "Mark" <> wrote in message
    news:3fc309cb$0$193$...
    <snip>
    > function openIt(faq) {
    > showIt = document.all(faq);


    Netscape/Mozilla/Gecko browsers do not have a document.all collection so
    the above line will produce errors and the rest of the function will not
    be executed.

    If the parameter - faq - contains a string that represents the unique ID
    of an HTML element (as appears to be the case, with the caveat that
    "22list" is not a valid ID attribute string according to the HTML 4
    specification) then the W3C DOM standard document.getElementById method
    could be used, possibly with a fall back to document.all to accommodate
    IE 4.

    Incidentally, document.all is an object so its named properties should
    be accessed using square brackets instead of parenthesise. IE does its
    error correcting/tolerance thing with code like this but other browsers
    that do implement a document.all collection (there are quite a number
    these days) may not be so tolerant.

    > if (showIt.style.display == "none") {
    > showIt.style.display = ""
    > } else {
    > showIt.style.display = "none"
    > }
    > }
    >
    > ..and the onclick code is:
    >
    > <a href="#" onclick="Javascript:eek:penIt('22list');
    >return false;">click here to toggle</a>
    >
    > <div id="22list" style="display:none">

    <snip>

    Initially setting the display property to none means that any visitors
    to the page who have JavaScript disabled/unavailable will be presented
    with a non-functional/useful link and never be able to view the content
    of the DIV (unless they view the page source). Generally, if content is
    to be hidden and revealed with scripts it would be better to have it
    initially visible and hide it in the onload event so that the content
    will be available to the users without JavaScript. Additionally, the
    link is meaningless without scripting so it should probably be included
    in the document using a script, so that without client-side scripting
    the user doesn't ever get the impression that there was any dynamic
    mechanism on the page, and certainly not the impression that it is
    broken.

    Richard.
     
    Richard Cornford, Nov 25, 2003
    #4
  5. "Fabian" <> writes:

    > Mark hu kiteb:


    >> showIt.style.display = ""

    >
    > Change the above line to one of:
    >
    > showIt.style.display = "inline";
    > showIt.style.display = "block";


    That's not necessary. Setting the properties of the element's style
    object corresponds to writing in the tag's style attribute. Setting
    a style object property to the empty string is consistently (across
    current browsers) equivalent to removing the property from the
    attribute value. It will then take its default value (or whatever
    value is given by global CSS rules).

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Nov 25, 2003
    #5
  6. Mark

    Mark Guest

    Hi - thank you for the replies - I'm not good with JavaScript though -
    all I've been able to manage (after quite some time) is the code I've
    shown - this was all through trial and error. Does anyone have a proper
    routine which will both check for IE and Netscape, and toggle the
    visibility/hidden/block (not sure which now!) between being shown and
    not being shown - and not to leave a big gap if it is not shown?

    Thanks again,



    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Mark, Nov 25, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dhananjay
    Replies:
    1
    Views:
    1,127
    sloan
    Dec 18, 2006
  2. Thomas Abraham

    Show hide row in netscape using javascript

    Thomas Abraham, Jun 30, 2003, in forum: Javascript
    Replies:
    3
    Views:
    155
    Thomas Abraham
    Jun 30, 2003
  3. Stephan

    Hide layer in Netscape/Mozilla how??

    Stephan, Jan 16, 2004, in forum: Javascript
    Replies:
    1
    Views:
    105
    kaeli
    Jan 16, 2004
  4. Merlin

    show/hide layer

    Merlin, Apr 4, 2006, in forum: Javascript
    Replies:
    3
    Views:
    153
    Dag Sunde
    Apr 4, 2006
  5. HIDE/SHOW Layer HELP!

    , Dec 1, 2007, in forum: Javascript
    Replies:
    16
    Views:
    186
Loading...

Share This Page