SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    showing and disappearing with <div>

    The followign javascript make a table shown whenver a link is clicked, taking turn.
    Code:
    <script type=text/javascript>
    function hide()
    {
      xGetElementsByClassName('xTables', document, 'table',
        function(ele) {
          ele.style.display = "none";
        }
      );
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display = "block";
    }
    
    
    // xGetElementsByClassName, Copyright 2002-2006 Michael Foster (Cross-Browser.com)
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    
    function xGetElementsByClassName(c,p,t,f)
    {
     
    var found = new Array();
      var re = new RegExp('\\b'+c+'\\b', 'i');
    
    
      var list = p.getElementsByTagName(t);
      for (var i = 0; i < list.length; ++i) {
        if (list[i].className && list[i].className.search(re) != -1) {
          found[found.length] = list[i];
          if (f) f(list[i]);
        }
      }
      return found;
    }
    </script>
    The code above works fine with the following table tags.
    Code:
    table tag
    
    
    <a href="javascript:change('xTable2');">link2</a>
    <a href="javascript:change('xTable3');">link3</a>
    <a href="javascript:change('xTable7');">link7</a><br>
    
    <table id='xTable2' class='xTables' style="display:block">
    <tr><td>table2</td></tr>
    </table>
    
    <table id='xTable3' class='xTables' style='display: none'>
    <tr><td>table3-1</td></tr>
    </table>
    
    <table id='xTable7' class='xTables' style='display: none'>
    <tr><td>table7</td></tr>
    </table>
    
    <table id='xTable3' class='xTables' style='display: none'>
    <tr><td>table3-2</td></tr>
    </table>
    But it doesn't work with the following div code.
    Code:
    div code
    
    
    <a href="javascript:change('xTable2');">link2</a>
    <a href="javascript:change('xTable3');">link3</a>
    <a href="javascript:change('xTable7');">link7</a><br>
    
    
    <div id='xTable2' class='xTables' style="display:block">
    div2
    </div>
    
    <div id='xTable3' class='xTables' style='display: none'>
    div3
    </div>
    
    <div id='xTable7' class='xTables' style='display: none'>
    div7
    </div>
    How can I make the javascript work with <div>?

  2. #2
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found the solution by myself like the following.
    Code:
    <script type=text/javascript>
    function hide()
    {
      xGetElementsByClassName('xdivs', document, 'div',
        function(ele) {
          ele.style.display = "none";
        }
      );
    }
    function change(divdiv)
    {
    hide();
    document.getElementById(divdiv).style.display = "block";
    }
    
    
    // xGetElementsByClassName, Copyright 2002-2006 Michael Foster (Cross-Browser.com)
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    
    function xGetElementsByClassName(c,p,t,f)
    {
     
    var found = new Array();
      var re = new RegExp('\\b'+c+'\\b', 'i');
    
    
      var list = p.getElementsByTagName(t);
      for (var i = 0; i < list.length; ++i) {
        if (list[i].className && list[i].className.search(re) != -1) {
          found[found.length] = list[i];
          if (f) f(list[i]);
        }
      }
      return found;
    }
    
    </script>
    Thank you.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work, joon


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
  •