SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Page elements ?

  1. #1
    always learning . . .
    Join Date
    Nov 2003
    Location
    UK
    Posts
    821
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page elements ?

    I have Div's being dynamically created on a page at present. Depending on there group they are assigned an ID. "a" "b" or "c".

    Using then a simple onClick event im trying to make them visible and invisible.

    Easy enough, but im using getElementById and using "a" "b" or "c" will not apply it to all the DIV's with that reference. Just the first it comes across.

    What can I use to apply the action to all DIV's with the same ID or Name ?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ids must be unique but you can set an attribite say title or class to a common name and look for that

    ie if (obj.title=='myspecialtitlename'){
    ...........

  3. #3
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An id is supposed to be unique on the page ...

    give them a name an handle object with getElementsByName

    or give an incremental id

    id="_1"
    id="_2"

    and scan thru objects
    i=1
    while (document.getElementById("_"+i){....
    i++

  4. #4
    always learning . . .
    Join Date
    Nov 2003
    Location
    UK
    Posts
    821
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I shall have to go with what vwphillips said.

    The same problem would apply SpaceFrog each element would be unique which I now know is what the ID is meant for but what im after is having many elements within a group and turning that group on and off (visible).

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...or you can create your own attribute:

    <div group="a" id="d" class="">group a</div>
    <div group="b" id="d" class="">group b</div>

    Then:

    1) Get the collection of all your <div>'s with document.getElementsByTagName("div")

    2) Use a for-loop to step through all the <div>'s and check if the group value is the one you are looking for.

    3) Set the <div>'s .className property, which is the css class that styles the <div>, to 'show' if it is one you are looking for, otherwise set the .className property to 'hide':

    <style>

    .show{}
    .hide{display:none}

    </style>

    Code:
    function show(show_group)
    {
    	var divs = document.getElementsByTagName("div");
    	for(var i = 0, len = divs.length; i < len; i++)
    	{
    		if (divs.item(i).getAttribute("group") == show_group) divs[i].className="show";
    		else divs[i].className="hide";
    	}
    }

  6. #6
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7stud ... id has to be unique on page !!!

    I don't see why using the name attribute would be a problem ???
    Code:
    TabGroup1= document.getElementsByName('group1')
    returns the collection of all objects of the group1
    then a simple loop:

    Code:
    for(i=0;i<TabGroup1.length;i++){
      TabGroup1[i].style.visibility='hidden'
    }
    would hide all objects of group1

    if elements of group are side by side grouped on the page, just put them in one div and hide / show the div

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 'id' has nothing to do with the code--I just used my text editor to duplicate the line which had a default id attribute. You can eliminate the id attribute completely from both tags since it isn't used.

    <div group="a" class="">group a</div>
    <div group="b" class="">group b</div>

  8. #8
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Darn copy paste again !! It happens to me all the time !!

    Just one question 7Stud: why create a new attribute when the name attribute already exists and is intended for such use ?

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I would use the name attribute as the first choice too.

  10. #10
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And you can always use the id as a double reference if you need to spot one item out of the group without using it's index within the collection getElementsByName


Bookmarks

Posting Permissions

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