SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FauxPas, I like your approach in this.

    However, I am javascript retarded.

    What I am doing is building a menu with expanding and collapsing table rows. The first row will be the show/hide button, while every row below will be the subnavigation.

    I took your code, and instead of applying the id to only one row, I IDed a tbody grouping (rows 2-x)

    This is where I come to a dead end. And it is most likely an easy fix.

    I want to do this with multiple tables, with different tbody IDs (so they all don't expand and collapse at the same time), but don't want to have multiple instances of the same script up top. Any help appreciated.

    Here's my code:
    HTML Code:
    <script>
    function toggle() {
    if( document.getElementById("hidethis").style.display=='none' ){
    document.getElementById("hidethis").style.display = '';
    }else{
    document.getElementById("hidethis").style.display = 'none';
    }
    }
    </script>
    
    </head>
    
    <body>
    
    <table id="about" width="160" align="center" cellspacing="0">
    	<thead>
    	<tr>
    	<td class="toprow">
    	<span onClick="toggle();">
    	ABOUT
    	</span>
    	</td>
    	</tr>
    	</thead>
    	<tbody id="hidethis" style="display:none">
    	<tr><td class="row">
    	<a href="#">WHO</a>
    	</td></tr>
    	<tr><td class="row">
    	<a href="#">WHAT</a>
    	</td></tr>
    	<tr><td class="row">
    	<a href="#">WHY</a>
    	</td></tr>
    	</tbody>
    	</table>

  2. #27
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - most of this thread is undecipherable to me (ignorance bites), but I WAS able to take part of it apply it to something I'm doing - it will make my life MUCH easier. Thanks!!

  3. #28
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DCastillo
    I want to do this with multiple tables, with different tbody IDs (so they all don't expand and collapse at the same time), but don't want to have multiple instances of the same script up top. Any help appreciated.
    I'm also interested in doing this...is there an easy way to set this up?

  4. #29
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pure_soul
    well i found this thread through the search engine. I have tried the above codes but i need to know how to change the image on click.
    Here is some code to toggle a table row and change(toggle) the image btw a plus and minus too

    HTML Code:
    <html>
    <script>
    function toggle(id)
    {
    	var tr = document.getElementById(id);
    	if (tr==null) { return; }
    	var bExpand = tr.style.display == '';
    	tr.style.display = (bExpand ? 'none' : '');
    	var img = document.getElementById('img'+id);
    	if (img!=null)
    	{
    		if (!bExpand)
    			img.src = 'minus.gif';
    		else
    			img.src = 'plus.gif';
    	}
    }
    </script>
    <body>
    <table border=1 width="100%">
    <TR><TD width="10"><a href="#" onclick="javascript:toggle('Row1')"><img border=0 id="imgRow1" src="minus.gif"></a></TD><TD>Click the image to the left to 
    
    toggle display of the row below</td></tr>
    <tr id="Row1"><td>&nbsp;</td><td>This is a row that 
    
    toggles<br>*****************************************<br>*****************************************</td></tr></table>
    </body>
    </html>

  5. #30
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by adios
    Code:
    <script type="text/javascript">
    
    /* call onload with table id(s) */
    function TR_set_toggle()
    {
    	/* toggleRow method */
    	var toggleRow = function()
    	{
    		this.style.display = ((this.style.display == '') ? 'none' : '');
    		return false;
    	}
    
    	for (var oTable, a = 0; a < arguments.length; ++a)
    	{
    		oTable = document.getElementById(arguments[a]);
         		var r = 0, row, rows = oTable.rows;
         		while (row = rows.item(r++))
    			row.toggle = toggleRow;
    	}
    
    	/* convenience function */
    	self.toggleRow = function(row_id)
    	{
    		document.getElementById(row_id).toggle();
    	}
    }
    
    onload = function()
    {
    	TR_set_toggle('foo');
    }
    
    </script>
    etc..........
    I really like your script. It is very useful and easy to customize. I've managed to make it not show the rows until the item is clicked. Now I'm wondering how can I make it so that when I click on one of the selections it toggles all other rows off and only shows the current selection?

  6. #31
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah....Spent a couple of hours and rewrote everything but had been inspired by Adios post on this. Below you'll see what I came up with. Much simpler code to get the same functionality as a tab pane.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script>
    function resetAll(){
    		document.getElementById('tab1').style.display = 'none';
    		document.getElementById('tab2').style.display = 'none';
    		document.getElementById('tab3').style.display = 'none';
    		document.getElementById('tab4').style.display = 'none';
    		document.getElementById('tab5').style.display = 'none';
    
    		document.getElementById('tablink1').className = 'tab';
    		document.getElementById('tablink2').className = 'tab';
    		document.getElementById('tablink3').className = 'tab';
    		document.getElementById('tablink4').className = 'tab';
    		document.getElementById('tablink5').className = 'tab';
    
    }
    function toggleRow2(row,link) {
    resetAll();
    		document.getElementById(''+row+'').style.display = 'block';
    		link.className = 'tabSelected';
    }
    </script>
    <style>
    <!--
    a.tab { width: 100%; display: block; background-color: #EEE; color: #000; border-bottom: #999 1px solid; text-align: center;}
    a.tab:visited { width: 100%; display: block; background-color: #EEE; color: #000; border-bottom: #999 1px solid; text-align: center;}
    a.tab:hover { width: 100%; display: block; background-color: #999; color: #000; border-bottom: #999 1px solid; text-align: center;}
    
    a.tabSelected { width: 100%; display: block; background-color: #FFF; color: #000; border-bottom: #FFF 1px solid; text-align: center;}
    a.tabSelected:visited { width: 100%; display: block; background-color: #FFF; color: #000; border-bottom: #FFF 1px solid; text-align: center;}
    a.tabSelected:hover { width: 100%; display: block; background-color: #FFF; color: #000; border-bottom: #FFF 1px solid; text-align: center;}
    
    table#tabs td { padding: 0px; text-align: left;}
    table#tabs td#tabs { border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;}
    table#tabs td.rows { background-color: #FFF; border-left: #999 1px solid; border-right: #999 1px solid; border-bottom: #999 1px solid;}
    -->
    </style>
    
    </head>
    
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tabs">
      <tr>
        <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab1',this)" class="tabSelected" id="tablink1">Test1</a></td>
        <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab2',this)" class="tab" id="tablink2">Test2</a></td>
        <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab3',this)" class="tab" id="tablink3">Test3</a></td>
        <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab4',this)" class="tab" id="tablink4">Test4</a></td>
        <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab5',this)" class="tab" id="tablink5">Test5</a></td>
      </tr>
      <tr id="tab1">
        <td colspan="5" class="rows">Row 1</td>
      </tr>
      <tr id="tab2" style="display: none;" >
        <td colspan="5" class="rows">Row 2</td>
      </tr>
      <tr id="tab3" style="display: none;">
        <td colspan="5" class="rows">Row 3</td>
      </tr>
      <tr id="tab4" style="display: none;">
        <td colspan="5" class="rows">Row 4</td>
      </tr>
      <tr id="tab5" style="display: none;">
        <td colspan="5" class="rows">Row 5</td>
      </tr>
    </table>
    </body>
    </html>

  7. #32
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All,

    Also experiencing problems. Code attached. Got about 4 different version of the JavaScript and none work inside the PHP.

    Thinking I need a hidden field in the php to make it work.

    What do you think?

    Thanks!

    OMR
    Attached Files Attached Files

  8. #33
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All,

    I got this fixed. Found that syntax in my code was major problem. Code is (javascript):
    Code:
        <script language="javascript">
        function getItem(id) {
            var itm = false;
            if(document.getElementById)
                itm = document.getElementById(id);
            else if(document.all)
                itm = document.all[id];
            else if(document.layers)
                itm = document.layers[id];
            return itm;
        }
    
        function toggleItem(id) {
            itm = getItem(id);
            if(!itm)
                return false;
            if(itm.style.display == 'none')
                itm.style.display = '';
            else
                itm.style.display = 'none';
            return false;
        }
        </script>
    (PHP)
    Code:
    <a href='#' onclick=\"toggleItem('myTbody[$i]')\">
    Notice the placement of the single and double quotes and the "\" escape character needed for correct processing.

    I noticed all the extra javascript code in here to get MSIE to read a page. I have a problem in thread:

    http://www.sitepoint.com/forums/showthread.php?t=587899

    Where I cannot get it to work. Can any of the contributors here, help me with this?

    Thanks All!

    OMR

  9. #34
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much that was so helpful and easy!

    you rock!


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
  •