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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    find all divs whose elementId contains a substring

    Hi - I have a page with a lot of divs which I'd like to hide, and then show just the one whose link I click.

    The function is like this:

    function switchLayer(selectedLayer)
    {
    document.getElementById('findOnlyElementsWhoseIdBeginsWithStringXXX').style.visibility = 'hidden';
    document.getElementById('container_' + selectedLayer).style.visibility = 'visible';
    return false;
    }

    this would eliminate the need to separately hide each layer. How can I write the code so the getElementById returns all elements whose ID begins with 'mystring'?

    Thanks

    Ellen

  • #2
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trying getElementsByTagName

    I am also trying getElementsByTagName

    and giving each div a name="container"

    then

    document.getElementsByTagName('container').style.visibility = 'hidden';

    but Netscape's javascript console tells me

    Error: document.getElementsByTagName("container").style has no properties

    What am I doing wrong?

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    tagName is different than name, and the name attribute is for form elements.

    There are "getElementsByTagName", or "getElementsByName" methods.

    They both return a collection. A particular item in the collection is accessed by index, like an array [0], [1], [2], etc., or using the item property of the collection item(0), item(etc.).

    About your first question, getElementById does not return a collection, so you will have to loop a collection of elements, and check the id property of each item, or something...
    *this message will self destruct in n-seconds*

  • #4
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ohhh OK

    Thank you - that makes sense.

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Really? Great!
    *this message will self destruct in n-seconds*

  • #6
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It Works!!!

    Code:
    function switchLayer(selectedLayer)
    { 
    myContainerArray = document.getElementsByName('container'); 
    for (i=0; i < myContainerArray.length; i++) 
    { 
     **myContainerArray[i].style.visibility = 'hidden'; 
    }
    document.getElementById('container_' + selectedLayer).style.visibility = 'visible';
    }
    Each layer I want turned on and off (there's a lot of them)has an ID:
    id="container_art" or "container_css"

    And each layer has a name:
    name='container'

    So it loops through and grabs ALL divs whose name is 'container' and sets their visibility to "hidden"
    then it turns on just the one layer I want.
    Last edited by EllenM1; 03-21-2005 at 03:36 PM.

  • #7
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sounds good.
    Regarding the name attribute, a *more valid* way may be to use getElementsByTagName to get a collection; for example, if all elements were contained in an outer div, one could give that an id, like <div id="container">... and get its collection using:
    Code:
    var myContainerCollection = document.getElementById("container").getElementsByTagName("*");
    ... or a specific tag name if those are all alike.
    Last edited by codegoboom; 03-21-2005 at 04:13 PM. Reason: detail
    *this message will self destruct in n-seconds*

  • #8
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OK, made that change but am having problems...

    I've discovered a problem - it seems to NOT hide all the divs every time. I'm not sure why.

    The test page is at:

    http://thedesignspace.net/index8.php

    This doesn't have to do with the change I just made - it was doing this even without the surrounding div you suggested.

    Oh well - maybe I'll do this by simply listing all the divs I want to hide.

  • #9
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It looks like you're not distinguishing between a "name" and a "tag name" the tag name is the name of the element's tag, not its name attribute, so using getElementsByTagName("container") is bound to fail...
    *this message will self destruct in n-seconds*

  • #10
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I *think* I've tried it both ways

    I have tried it with getElementsByName and it seems to not behave correctly that way either.

    Thanks though!

  • #11
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's a simple matter... you are doing something wrong (but I haven't the will to prove it).
    *this message will self destruct in n-seconds*

  • #12
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    LOL, I believe you ...

    All day, I had been testing this on IE for PC, and was in despair. Then I tried the same page on Safari - seems to work well. Also works well on Netscape for Mac. Could be Safari and NS are more tolerant of my errors, or IE is very picky.

    Anyway, thanks very much for your help.

  • #13
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Run this snippet in both IE and Firefox, and you should see why IE isn't working.
    Code:
    <html><body>
    <div id='anId' name='aName'>a lonely div</div>
    <script>
    alert("document.getElementsByName('anId')= " +document.getElementsByName('anId').length+
        "\ndocument.getElementsByName('aName')= "+document.getElementsByName('aName').length+
        "\ndocument.getElementById('anId')= " +document.getElementById('anId')+
        "\ndocument.getElementById('aName')= "+document.getElementById('aName') );
    </script>
    </body></html>
    You're going to need to make an onload function builds an array of your container divs for later use.

  • #14
    New Coder
    Join Date
    May 2003
    Location
    MI
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OK, got it

    Yeah, it alerted like this:

    document.getElementsByName('anId)=1
    document.getElementsByName('aName')=0
    document.getElementByID('anId')=(object)
    document.getElementById('aName')=null


    in other words, it is interpreting the Id as a Name in this case. And basically ignoring the "Name" I have set for the div.

    According to this post

    and also according to codegoboom,

    IE interprets the getElementsByName only when the element is a form control, like input or select or whatever. Other browsers interpret it differently I guess.

    So I will try loading them all as an array first.

    Thanks everyone.

  • #15
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    How about this way


    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>

    <script type="text/javascript" language="javascript">
    <!--

    last_id=""
    function show_me(id){

    if(last_id!=""&&last_id!=id){
    document.getElementById(last_id).style.display="none"
    }

    document.getElementById(id).style.display="block"

    document.getElementById(id).style.top="200px"

    last_id=id
    }

    //-->
    </script>

    <style>
    .article{
    position:absolute;
    display:none;
    }
    </style>
    </HEAD>
    <BODY>

    <div style="font-size:12px">
    <a href="#null" onclick="show_me('div1')">Article One</a><BR>
    <a href="#null" onclick="show_me('div2')">Article Two</a><BR>
    <a href="#null" onclick="show_me('div3')">Article Three</a><BR>
    <a href="#null" onclick="show_me('div4')">Article Four</a><BR>
    </div>

    <div id="div1" class="article">
    <h1>Article One</h1>
    </div>

    <div id="div2" class="article">
    <h1>Article Two</h1>
    </div>

    <div id="div3" class="article">
    <h1>Article Three</h1>
    </div>

    <div id="div4" class="article">
    <h1>Article Four</h1>
    </div>

    </BODY>
    </HTML>

    Last edited by Mr J; 03-22-2005 at 07:54 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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