SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  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)

    selecting table diplay without URL change

    Code:
    <script type=text/javascript>
    <!--
    
    function hide_table()
    {
    document.getElementById('table1').style.display = "none";
    document.getElementById('table2').style.display = "none";
    }
    function show_table(tablediv)
    {
    hide_table();
    
    document.getElementById(tablediv).style.display = "block";
    }
    
    -->
    </script>
    
    <table>
    <tr>
    <td>
         <a href="#" onclick="show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="#" onclick="show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    
    <tr>
      <td colspan='2'>
    <table id='Table1' cellpadding='0' cellspacing='0' border='0'  style="display:block">
    <tr>
    <td>table1</td>
    </tr>
    </table>
    
    <table id='Table2'  cellpadding='0' cellspacing='0' border='0' style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
    
    </td>
    <tr>
    </table>
    The code above selects the table which is shown.

    If a user clicks the link "table1," it shows table1.(table2 is not shown.)

    If the user clicks the link "table2," it shows table2.(table1 is not shown.)

    It works fine. but I want more.


    The code above works fine with URL change.

    I like to make the function above work fine without URL change.

  2. #2
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi there.

    Meaning the # (hash) at the end of the URL string ?
    If that's the case, you can replace it either with "#void" or just leave it blank.

    Hope that helps.

    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  3. #3
    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)
    Quote Originally Posted by Contrid
    Hi there.

    Meaning the # (hash) at the end of the URL string ?
    If that's the case, you can replace it either with "#void" or just leave it blank.

    Hope that helps.

    Antonie
    Hi, Antonie.

    As I test your recommend, It refleshed.

    I want selecting the table shown without reflishing.


    The following code which can fold tables is an example moving without URL change(without reflesh).

    Code:
    <script type=text/javascript>
    
    function foldGroup(menuId)
    {
      var objTableFoldGroup = document.getElementById('foldTable_'+menuId);
      if(objTableFoldGroup.style.display == 'block' || objTableFoldGroup.style.display == '') 
      {
    objTableFoldGroup.style.display = 'none';
      }
      else
      {
    objTableFoldGroup.style.display = 'block';
      }
    }
    </script>
    
    
    <a href="javascript:foldGroup('1')" class='bold'>fold1</a>
    
    <table id='foldTable_1' cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    
    <br>
    
    <a href="javascript:foldGroup('2')" class='bold'>fold2</a>
    
    <table id='foldTable_2' cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
    I hope you also think the code above is cool. and make the selective table display code without URL change from the code above which can fold without URL change.

  4. #4
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What is the problem with the # at the end of the URL ?

    Edit :
    You didn't need to edit the JS code. All you could've done was change this :

    HTML Code:
    <tr>
    <td>
         <a href="#" onclick="show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="#" onclick="show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    To this :

    HTML Code:
    <tr>
    <td>
         <a href="javascript:show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="javascript:show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  5. #5
    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)
    Quote Originally Posted by Contrid
    What is the problem with the # at the end of the URL ?
    It makes refleshing the page.

  6. #6
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    It makes refleshing the page.
    See my post above.
    The # sign doesn't refresh the page...it simply scrolls the page to the top.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  7. #7
    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)
    Quote Originally Posted by Contrid
    See my post above.
    The # sign doesn't refresh the page...it simply scrolls the page to the top.
    Yes, it scrolls the page to the top.

    Maybe I choosed wrong word "refleshing." instead of "scrolling."


    Actually I want not scrolling the page to the top.

  8. #8
    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)
    Code:
    <tr>
    <td>
         <a href="javascript:show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="javascript:show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    your new code above works fine. Thank you, Antonie.

  9. #9
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    Code:
    <tr>
    <td>
         <a href="javascript:show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="javascript:show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    your new code above works fine. Thank you, Antonie.
    It's a pleasure. Glad I could help.
    I'm not a JS expert (at all)...but I enjoy working with it and learning new things. It's extremely powerful.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  10. #10
    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)
    Quote Originally Posted by Contrid
    It's extremely powerful.
    Yes, it is. ^^


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
  •