document.getElementById( ....

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • PaulB
    #1

    document.getElementById( ....

    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.getEle mentById('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.getEle mentById
    statements and placed them in a function called CloseAll(), like this:

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

    Placed this tag in the menu.shtml
    <BODY onLoad="CloseAl l()">
    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.getEle mentById('m1'). style.display=' none';
    document.getEle mentById('m2'). style.display=' none';
    document.getEle mentById('m3'). style.display=' none';
    document.getEle mentById('m4'). style.display=' none';
    document.getEle mentById('m5'). style.display=' none';
    document.getEle mentById('m6'). style.display=' none';
    document.getEle mentById('m7'). style.display=' none';
    document.getEle mentById('m8'). style.display=' none';
    document.getEle mentById('m9'). style.display=' none';

    var Ary=new Array();
    function toggle(list){
    var listElement=doc ument.getElemen tById(list);
    for (i=0;i<Ary.leng th;i++){
    if (Ary[i]!=listElement){
    Ary[i].style.display= "none";
    }
    }
    if (listElement.st yle.display=="n one"){
    listElement.sty le.display="blo ck";
    }
    else {
    listElement.sty le.display="non e";
    }
    if (!listElement.d is){
    listElement.dis =1;
    Ary[Ary.length]=listElement;
    }
    }





    Tags: None
    • Martin Honnen
      #2
      Re: document.getEle mentById( ....



      PaulB wrote:

      [color=blue]
      > This following line is a big part of my hang-up:
      >
      > document.getEle mentById('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?[/color]

      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.d isplay = 'none';
      to hide an element but use
      element.style.d isplay = '';
      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.
      [color=blue]
      > 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.getEle mentById
      > statements and placed them in a function called CloseAll(), like this:
      >
      > function CloseAll()
      > {
      > document.getEle mentById('m1'). style.display=' none';
      > document.getEle mentById('m2'). ... // did this for each menu-chain
      > }
      >
      > Placed this tag in the menu.shtml
      > <BODY onLoad="CloseAl l()">
      > 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.[/color]

      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
      Attention Required! | Cloudflare
      http://JavaScript.FAQTs.com/

        Comment

        • PaulB
          #3
          Re: document.getEle mentById( .... - 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

            Comment

            • PaulB
              #4
              Re: document.getEle mentById( .... - 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

                Comment

                • Michael Winter
                  #5
                  Re: document.getEle mentById( .... - menu.htm (0/1)

                  On 29/06/2005 17:17, PaulB wrote:
                  [color=blue]
                  > I have attached the Menu.htm so that you can
                  > see the various ID elements.[/color]

                  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.

                    Comment

                    • PaulB
                      #6
                      Re: document.getEle mentById( ....

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

                      -Paul-

                        Comment

                        • Martin Honnen
                          #7
                          Re: document.getEle mentById( ....



                          PaulB wrote:
                          [color=blue]
                          > Thanks for the offer Martin, bit I can not send an attachment through
                          > this newsgroup. It will be stripped by the server.[/color]

                          What offer? Nobody told you to send an attachment, it suffices if you
                          quote the relevant HTML. Or you can post a URL as already suggested.

                          --

                          Martin Honnen
                          Attention Required! | Cloudflare
                          http://JavaScript.FAQTs.com/

                            Comment

                            • PaulB
                              #8
                              Re: document.getEle mentById( ....

                              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

                                Comment

                                Previous template Next
                                Working...