SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making a table row visible or invisible

    I have a radio button set that I am trying to use the onclick method to mae one row visible or the other. Let me show you what I mean. I have this javascript defined. I tried to use pointers but then I got element has no properties. So I've reverted to useing the full DOM call.
    Code:
    <script type="text/javascript">
    <!--
    var sd = document.getElementById("sd");
    var m1 = document.getElementById("md1");
    var m2 = document.getElementById("md2");
    function singleChange()
    	{
    	document.getElementById("sd").style.visibility = 'visible';
    	document.getElementById("md1").style.visibility = 'hidden';
    	document.getElementById("md2").style.visibility = 'hidden';
    	document.getElementById("md1").style.display = 'none';
    	document.getElementById("md2").style.display = 'none';
    	document.getElementById("sd").style.display = 'inline';
    	}
    function multiChange()
    	{
    	document.getElementById("sd").style.visibility = 'hidden';
    	document.getElementById("md1").style.visibility = 'visible';
    	document.getElementById("md2").style.visibility = 'visible';
    	document.getElementById("md1").style.display = 'inline';
    	document.getElementById("md2").style.display = 'inline';
    	document.getElementById("sd").style.display = 'none';
    	}
    //-->
    </script>
    I know that can be optimized so please give me pointers on that.

    Now my HTML looks like this:
    Code:
    <style type="text/css">
    .
    .
    .
    #md1,#md2
         {
         display:none;
         }
    #sd
         {
         visibility:visible;
         }
    </style>
    .
    .
    .
    <tr>
    	<td class="left">Event:</td>
    	<td class="right">
                <label for="singledate">Single Date</label>
    	    <input type="radio" name="datetype" id="singledate" value="0" checked onClick="singleChange();">
                <label for="multidate">Date Range</label>
    	    <input type="radio" name="datetype" id="multidate" value="1" onclick="multiChange();">
    	</td>
    </tr>
    <tr id="sd">
    .
    .
    </tr>
    <tr id="md1">
    .
    .
    </tr>
    <tr id="md2">
    .
    .
    </tr>
    Now for the gitty...

    When I load the page the sd row is displayed which is fine. It is the default and it is supposed to be displayed when the first radio button is checked. This is okay screenshot

    But... when I select the second radio item, sd is supposed to be replaced by the 2 rows md1 and md2. It is, but the alignment goes funky. CSS display property? If I don't use display then I get the big gap. If I use it, the alignment goes odd. How can I get the alignment right? screenshot

    Finally, when I click back on Single Date, the same alignment goes haywire PLUS leaves a gap underneath. screenshot

    Any tips?

    Aaron
    Aaron Brazell
    Technosailor



  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Aaron,

    I think your alignment problem was due to the fact that you have
    2 td's when you start the table but when you switch them you only have one, or none if your code is an example.

    Try this out:

    Code:
    <html>
    <head>
    <style type="text/css">
    #md1,#md2 {
       display:none;
    }
     
    table {
    	border-collapse: collapse;
    	border-bottom: 1px solid black;
    }
    table td {
    	border: 1px solid black;
    	padding: 4px;
    }
    </style>
    <script type="text/javascript">
    function els()
    {
      var el = [
      document.getElementById("sd").style,
      document.getElementById("md1").style,
      document.getElementById("md2").style
      ];
    return el;
    }
    
    function singleChange()
    {
      var el = els();
      
      el[1].display = 'none';
      el[2].display = 'none';
      el[0].display = 'block';
    }
    function multiChange()
    {
      var el = els();
    
      el[1].display = 'block';
      el[2].display = 'block';
      el[0].display = 'none';
    }
    </script>
    </head>
    
    <body>
    
    <table>
    <tr>
      <td class="left">Event:</td>
      <td class="right">
       <label for="singledate">Single Date</label>
        <input type="radio" name="datetype" 
       id="singledate" value="0" checked="checked" 
       onclick="singleChange();" />
       <label for="multidate">Date Range</label>
        <input type="radio" name="datetype" 
       id="multidate" value="1" onclick="multiChange();" />
      </td>
    </tr>
    <tr id="sd">
      <td> sd </td>
      <td> sd </td>
    </tr>
    <tr id="md1">
      <td> md1 </td>
      <td> md1 </td>
    </tr>
    <tr id="md2">
      <td> md2 </td>
      <td> md2 </td>
    </tr>
    </table>
    
    </body>
    </html>
    -xDev
    Last edited by xDev; Jul 13, 2003 at 08:18.

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I was typing up the code in shortened form. Actually I had 2 td's on each line. So no solution...though I like your code better and I'll use it.

    Aaron
    Aaron Brazell
    Technosailor



  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    erg...no one?
    Aaron Brazell
    Technosailor



  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Sketch,

    It's a bit more complicated than you have. You'll have to set the display on each table cell as opposed to each table row, which isn't an issue in and of itself, but you run into some browser support issues. IE doesn't understand display: table-cell in CSS, so you have to set its display to block. However, Mozilla and Opera render block-displayed table cells very strangely, so we have to resort to JS hell: browser detection. However, I optimized your function well enough that it shouldn't matter, at least until IE7 is released.
    HTML Code:
    <html> 
    <head> 
    <style type="text/css"> 
    /* commented these style rules out because they were messing the script up :)
    #md1,#md2 
    { 
    display:none; 
    } */
    table 
    { 
    border-collapse: collapse; 
    border-bottom: 1px solid black; 
    } 
    table td 
    { 
    border: 1px solid black; 
    padding: 4px; 
    } 
    </style> 
    <script type="text/javascript"> 
    function getStyle(myVal) {
    if (myVal == 1) {
    //browsercheck by object model support :(
      if (document.all && document.getElementById) {
        return "block";
      }
      else if (document.getElementById && !document.all) {
        return "table-cell";
      }
      else {
        return "Not Supported";
      }
    }
    if (myVal == 0) return "none";
    }
    
    function change(md1Display, md2Display, sdDisplay) {
    //style variables, pass these into the getStyle() function to return the appropriate 
    //style for the browser we're targeting.
    var styleMD1 = getStyle(md1Display);
    var styleMD2 = getStyle(md2Display);
    var styleSD = getStyle(sdDisplay);
    
    //get all td tags for this TR
    var mdCN1 = document.getElementById("md1").childNodes;
    var mdCN2 = document.getElementById("md2").childNodes;
    var sdCN = document.getElementById("sd").childNodes;
       for (var x = 0; x < mdCN1.length; x++) {
       	  
          mdCN1[x].style.display = styleMD1;
       }
        for (var x = 0; x < mdCN2.length; x++) {
    	
          mdCN2[x].style.display = styleMD2;
        }
        for (var x = 0; x < sdCN.length; x++) {
    	
          sdCN[x].style.display = styleSD;
        }
    }
    window.onload = function () {change(0, 0, 1)};
    </script> 
    </head> 
    <body> 
    <table> 
    <tr>  
    <td class="left">Event:</td>  
    <td class="right">  <label for="singledate">Single Date</label>  
    <input type="radio" name="datetype" id="singledate" value="0" 
    checked="checked" onclick="change(0, 0, 1);" />  
    <label for="multidate">Date Range</label>  
    <input type="radio" name="datetype" id="multidate" value="1" 
    onclick="change(1, 1, 0);" />  
    </td> 
    </tr> 
    <!--the TDs in these rows have to stay on one line, 
    otherwise Mozilla will count the newlines in the loop :(-->
    <tr id="sd"><td> sd </td><td> sd </td></tr> 
    <tr id="md1"><td> md1 </td><td> md1 </td></tr> 
    <tr id="md2"><td> md2 </td><td> md2 </td></tr> 
    </table> 
    </body> 
    </html>

  6. #6
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally got back to this. All I have to say is.... Vinnie for president!
    Aaron Brazell
    Technosailor



  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    //get all td tags for this TR
    var mdCN1 = document.getElementById("md1" ).childNodes;

    What's wrong with
    HTML Code:
    var mdCN1 = document.getElementById( "md1" ).cells;
    ??? That way you don't have to re-organize your HTML for Mozilla to skip the textNodes (or use normalize() beforehand)
    HTML Code:
    var TR1 = document.getElementById( "md1" );
    TR1.normalize();
    var mdCN1 = TR1.childNodes;
    But, I think using the cells collection is better [img]images/smilies/biggrin.gif[/img]
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by beetle
    [/font]
    What's wrong with
    HTML Code:
    var mdCN1 = document.getElementById( "md1" ).cells;
    ??? That way you don't have to re-organize your HTML for Mozilla to skip the textNodes (or use normalize() beforehand)
    HTML Code:
    var TR1 = document.getElementById( "md1" );
    TR1.normalize();
    var mdCN1 = TR1.childNodes;
    But, I think using the cells collection is better [img]images/smilies/biggrin.gif[/img]
    You must spread some Reputation around before giving it to beetle again.


    This is definitely a better method than what I posted earlier. Beetle for King! I didn't even know about the cells collection! Good tips.

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehe, sure thing. While I'm at it, I'll add

    TABLE.rows [collection]

    TABLE.tBodies [collection]

    TR.rowIndex [integer]

    TD.cellIndex [integer]

    In case you were unaware of those, as well (as they are somewhat related)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why is this thread always on the top?

  11. #11
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because it was pinned or something buy the thread starter sketch!

  12. #12
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm. Sorry guys. I thought it got unpinned. It is unpinned now.
    Aaron Brazell
    Technosailor




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
  •