document.getElementById( ....

Discussion in 'Javascript' started by PaulB, Jun 29, 2005.

  1. PaulB

    PaulB Guest

    Good Morning everybody,

    I'm trying to adapt a tutorial script that will handle the behaviour of an
    "Expanding/Contracting" site-navigation menu. The code that seems to
    handle the expansion and contraction follows at the bottom of my
    message here.

    This following line is a big part of my hang-up:

    document.getElementById('m1').style.display='none';

    Question #1:
    My "assumption" is that this statement line will "Contract" the menu-chain
    that is named by 'm1' and the action word is 'none'.
    My other 'assumption' is that the other statement line would " Expand" the
    named menu-chain and the action word is 'block'.
    That doesn't make sense but really, what do I know?

    Am I correct in my assumptions?

    Question #2: ( This is my biggie )
    At the end of the day, I want the menu.shtml page to open with
    this menu in a fully contracted state. Display only the major
    category headings. I took all of the document.getElementById
    statements and placed them in a function called CloseAll(), like this:

    function CloseAll()
    {
    document.getElementById('m1').style.display='none';
    document.getElementById('m2').... // did this for each menu-chain
    }

    Placed this tag in the menu.shtml
    <BODY onLoad="CloseAll()">
    but...
    When I load the page... nothing displays... NADA, ZILCH.
    If I remove the onLoad part, he page displays, but the
    menu is FULLY expanded.

    Clearly, I am working this code wrong, can someone please help
    me sort it out? I've been kicking this thing around for so long that
    I barely remember to eat.

    Many thanks

    -Paul-


    [ All of this in now located in the "JS" file ]
    document.getElementById('m1').style.display='none';
    document.getElementById('m2').style.display='none';
    document.getElementById('m3').style.display='none';
    document.getElementById('m4').style.display='none';
    document.getElementById('m5').style.display='none';
    document.getElementById('m6').style.display='none';
    document.getElementById('m7').style.display='none';
    document.getElementById('m8').style.display='none';
    document.getElementById('m9').style.display='none';

    var Ary=new Array();
    function toggle(list){
    var listElement=document.getElementById(list);
    for (i=0;i<Ary.length;i++){
    if (Ary!=listElement){
    Ary.style.display="none";
    }
    }
    if (listElement.style.display=="none"){
    listElement.style.display="block";
    }
    else {
    listElement.style.display="none";
    }
    if (!listElement.dis){
    listElement.dis=1;
    Ary[Ary.length]=listElement;
    }
    }
     
    PaulB, Jun 29, 2005
    #1
    1. Advertising

  2. PaulB wrote:


    > This following line is a big part of my hang-up:
    >
    > document.getElementById('m1').style.display='none';
    >
    > Question #1:
    > My "assumption" is that this statement line will "Contract" the menu-chain
    > that is named by 'm1' and the action word is 'none'.
    > My other 'assumption' is that the other statement line would " Expand" the
    > named menu-chain and the action word is 'block'.
    > That doesn't make sense but really, what do I know?
    >
    > Am I correct in my assumptions?


    Not necessarily, JavaScript is used to change the CSS display property
    of HTML elements and CSS 2.1 knows a lots of possible values for the CSS
    display property, 'none' will always hide the element so that it does
    not consume layout space but to show an element different values are
    possible depending on the functionality of the element. 'block' is for
    block elements, other possible values are 'inline' for inline elements,
    'list-item' for list item elements, 'table-row' for table rows and so
    on. To make things more complicated the usual cross browser problems
    exist, modern browsers like Mozilla or Opera 7/8 are closer to CSS 2.1
    than IE 6 is which for instance knows how to render HTML tables so
    internally must have some way to distinguish between a table row and a
    paragraph but does not support the different display properties. While
    IE therefore somehow lets you get away with setting the display of a
    table row to 'block' that will mess up the rendering with Mozilla or Opera.
    There are different strategies to try to solve all that, one is to set
    element.style.display = 'none';
    to hide an element but use
    element.style.display = '';
    to show it as that way the browser's default style sheet kicks in which
    has the proper defaults for table rows or table cells or paragraphs or
    list items.

    > Question #2: ( This is my biggie )
    > At the end of the day, I want the menu.shtml page to open with
    > this menu in a fully contracted state. Display only the major
    > category headings. I took all of the document.getElementById
    > statements and placed them in a function called CloseAll(), like this:
    >
    > function CloseAll()
    > {
    > document.getElementById('m1').style.display='none';
    > document.getElementById('m2').... // did this for each menu-chain
    > }
    >
    > Placed this tag in the menu.shtml
    > <BODY onLoad="CloseAll()">
    > but...
    > When I load the page... nothing displays... NADA, ZILCH.
    > If I remove the onLoad part, he page displays, but the
    > menu is FULLY expanded.


    We need to see the HTML of the page e.g. which element has the id 'm1'
    and so on.
    Also tell us whether you get any script errors in the script console of
    your browser, which browsers you are testing with.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 29, 2005
    #2
    1. Advertising

  3. PaulB

    PaulB Guest

    Re: document.getElementById( .... - menu.htm (0/1)

    Thanks Martin,

    I have attached the Menu.htm so that you can
    see the various ID elements.

    Thank you so much... this issue is becoming
    an obsession with me.

    Paul
     
    PaulB, Jun 29, 2005
    #3
  4. PaulB

    PaulB Guest

    Re: document.getElementById( .... - menu.htm (0/1)

    Thanks Martin,

    I have attached the Menu.htm so that you can
    see the various ID elements.

    Thank you so much... this issue is becoming
    an obsession with me.

    Paul
     
    PaulB, Jun 29, 2005
    #4
  5. Re: document.getElementById( .... - menu.htm (0/1)

    On 29/06/2005 17:17, PaulB wrote:

    > I have attached the Menu.htm so that you can
    > see the various ID elements.


    This is a text-only newsgroup. Do /not/ post attachments (my news server
    rejected it).

    Post a URL, or include code in your post if really necessary.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jun 29, 2005
    #5
  6. PaulB

    PaulB Guest

    Thanks for the offer Martin, bit I can not send an attachment through
    this newsgroup. It will be stripped by the server.

    -Paul-
     
    PaulB, Jun 29, 2005
    #6
  7. PaulB

    PaulB Guest

    I'm sorry Martin.
    I had thought you offered to help and asked to see the HTML stuff.

    My apologies and I'll leave you alone about it all

    Regards,

    Paul
     
    PaulB, Jun 29, 2005
    #7
    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. Franck
    Replies:
    3
    Views:
    2,455
    Eliyahu Goldin
    Aug 25, 2005
  2. Ferret Face
    Replies:
    3
    Views:
    30,665
    Ferret Face
    Oct 4, 2005
  3. wk
    Replies:
    5
    Views:
    198
    Dietmar Meier
    Apr 22, 2005
  4. Martin
    Replies:
    3
    Views:
    167
  5. Replies:
    4
    Views:
    184
    Jonas Raoni
    Nov 21, 2006
Loading...

Share This Page