SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM: Detecting clicked links

    i have the following code that repeats itself over and over and is generated by my CMS. i can not assign id's to any of the divs

    test2 is hidden by default (display:none and should be set to display:block; when the user clicks on the "title" above it.

    im not sure how to start writing the code, since getElementById can not be used (only classes). once i can assign the clicked link/title to a variable, i can get at the test2 div below it by using childNode


    <div class="test1">title
    <div class="test2">hey</div>
    </div>

    <div class="test1">title
    <div class="test2">hey</div>
    </div>
    I need someone to protect me from
    all the measures they take in order to protect me

  2. #2
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could i use something like "this.nextSibling.style.display='block';" ?
    I need someone to protect me from
    all the measures they take in order to protect me

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. The inner div is a child of the outer div--not a sibling. Try:

    this.firstChild.nextSibling.style.display = "block".

    The text is considered to be in a textnode and that is the firstChild. It's sibling is the inner div.

    You can use document.getElementsByTagName("div") to get all the divs. Then loop through them and check if divs[i].className == "test1.

    A warning: if you have html like this:

    <div>
    <div>inner 1</div>
    <div>inner 2</div>
    </div>

    IE will see two children inside the outer div. However, FF will identify 5 children inside the outer div:

    <div> *
    <div>inner 1</div> *
    <div>inner 2</div> *
    </div>

    The two divs plus the 3 carriage returns which are considered to be inside textNodes. So, usually using firstChild.nextSibling and such doesn't work cross browser. The solution is to access the elements through the childNodes[] array and identifying a property your target element has, e.g.

    if(childNodes[i].className == "test1")

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a getElementsByClassName function - then you can do:
    Code:
    this.getElementsByClassName('test2')[0].style.display = 'block';

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    getElementsByClassName function
    No such thing in js. Too many user libraries circling around in your brain?

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    
    <script type="text/javascript">
    
    function showDiv() {
    
    var e = document.getElementsByTagName('div');
    
    for(var i =0; i< e.length; i++ ) {
    
    if(e[i].className.indexOf('test2') != -1 ) 
    { 
    
    e[i].style.display="block" ;
    
    e[i].firstChild.nodeValue =" write me" ;
    }
    }
    }
    </script>
    
    <style type="text/css">
    
    .test2 { display:none;}
    
    </style>
    
    <div class="test1">title
    <div class="test2">hey</div>
    </div>
    
    <div class="test1">title
    <div class="test2">hey</div>
    
    
    <button onclick="showDiv()">click me</button>
    Last edited by muazzez; Jan 17, 2007 at 06:43.

  7. #7
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    No such thing in js.
    I never claimed there was, just suggested he use a function.


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
  •