[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 316
  • Last Modified:

What are some Options for Positioning elements

I have a radio button BUSINESS / PERSONAL
When the user clicks BUSINESS I want to display a X rows of a the table [below the radio button row] that allows the user to enter some data [ie Business name, Contact Name etc]
If they toggle it back to PERSONAL I want the business rows removed and the PERSONAL rows displayed/added

I so far tryied using style="position:absolute ; top:333" method but on some pages the template seems to not position the stuff correctly
I came across this note below but do not understand it :
"Notes in IE 5.0:
Absolute positioning works with inline elements, lists, and table cells "

I also played with the idea on getElement(row).delete and insert but I think that is to  complicated.

0
fungord
Asked:
fungord
  • 3
  • 3
1 Solution
 
devicCommented:
hi fungord, here is example
=============================
<script>
function selBorP(obj)
{
      var B=document.getElementById("ContainerBusiness").innerHTML;
      var P=document.getElementById("ContainerPersonal").innerHTML;
      var D=document.getElementById("dynamicfields");
      if(obj.BorP[0].checked)
      {
            D.innerHTML=B;
      }
      else
      {
            D.innerHTML=P;
      }
}
</script>
<form>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td>BUSINESS </td><td><input type=radio name=BorP onclick=selBorP(this.form)></td></tr>
<tr><td>PERSONAL</td><td><input type=radio name=BorP onclick=selBorP(this.form)></td></tr>
</table>
<hr>
<span id=dynamicfields>&nbsp;</span>
</form>


<div id=ContainerBusiness style=display:none>
<table width=400 cellspacing=0 cellpadding=0 border=0>
      <tr><td colspan=2>BUSINESS</td></tr>
      <tr><td>name</td><td><input></td></tr>
      <tr><td>company</td><td><input></td></tr>
</table>
</div>
<div id=ContainerPersonal style=display:none>
<table width=400 cellspacing=0 cellpadding=0 border=0>
      <tr><td colspan=2>PERSONAL</td></tr>
      <tr><td>name</td><td><input></td></tr>
      <tr><td>home</td><td><input></td></tr>
</table>
</div>
0
 
ZontarCommented:
Rather than using positioning, what you need to do is to change the display property. It is also easier to group related rows into TBODY elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-au">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
  table#displayTable  {width:400px;}
  tbody#personal {display:none;}
</style>

<script type="text/javascript">
function switchIt(form)
{
  var switches = form.switchRadio;
  var tBodyId;
  var displayStyle = document.defaultView ? "table-row-group" : "block"; //  table-row-group for Mozilla and Opera, block for MSIE

  for(var i = 0; switches.length; i++)
  {
    theSwitch = switches[i];
    if(theSwitch.checked)
    {
      tBodyId = theSwitch.value;
      break;
    }
  }

  if(tBodyId)
  {
    var tBodies = document.getElementById("displayTable").getElementsByTagName("tbody");

    for(var i = 0; i < tBodies.length; i++)
      tBodies[i].style.display = "none";

    document.getElementById(tBodyId).style.display = displayStyle;
  }
}

</script>

</head>
<body>
<form action="">
  <table id="displayTable" border="1" cellpadding="3" cellspacing="0">
    <thead>
      <tr>
        <td colspan="2" width="33%">&nbsp;</td>
        <td colspan="2" width="34%">
          Business: <input type="radio" name="switchRadio" value="business" onclick="switchIt(this.form);" checked><br>
          Personal: <input type="radio" name="switchRadio" value="personal" onclick="switchIt(this.form);">
        </td>
        <td colspan="2" width="33%">&nbsp;</td>
      </tr>
    </thead>
    <tbody id="business">
      <tr>
        <td colspan="3" width="50%">biz text...</td>
        <td colspan="3" width="50%">more biz text...</td>
      </tr>
      <tr>
        <td colspan="3">biz text...</td>
        <td colspan="3">more biz text...</td>
      </tr>
      <tr>
        <td colspan="3">biz text...</td>
        <td colspan="3">more biz text...</td>
      </tr>
    </tbody>
    <tbody id="personal">
      <tr>
        <td colspan="3">personal text...</td>
        <td colspan="3">more personal text...</td>
      </tr>
      <tr>
        <td colspan="3">personal text...</td>
        <td colspan="3">more personal text...</td>
      </tr>
      <tr>
        <td colspan="3">personal text...</td>
        <td colspan="3">more personal text...</td>
      </tr>
    </tbody>
  </table>
</form>

</body>
</html>

This switches the display style of the two tbody elements within the table.

Tested in MSIE 6.0, Mozilla 1.5, and Opera 7.12.
0
 
fungordAuthor Commented:
Zontar,
Being new to web dev I have read up on the tbody/thead/tfoot and found that it may be bad due to browser support, but maybe the article is old...Damn I hate web articles that don't display date written or last updated...WebTechnology changes so fast I think this is the most important thing...weew I guess I went off!
-------
"Tips and Notes - w3schools.com
Note: If you use the thead, tfoot and tbody elements, you must use every element, but you can leave them blank. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

Note: The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view an example in our XML tutorial."
--------
..I am basically concerned that this works on IE 5.5 or higher and Netscape 6+
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
fungordAuthor Commented:
One more thing, do I need to use tbody>?
I already had 2 tables id=tBus =tPer , Can I just <style>... tbody#tBus {display:none;} ?
What would be the pro/con for tbody?

0
 
ZontarCommented:
I'd forgot that the spec requires <tfoot> as well. Thanks for the reminder.

I do remember that TFOOT has to come first in the document. You could take care of that requirement by adding

table#displayTable tfoot {display:none;}

to the CSS and adding

<tfoot>
  <td colspan="6">&nbsp;</td>
</tfoot>

into the table before the THEAD element.

> Damn I hate web articles that don't display date written or last updated...

I know what you mean. It's a real pain with PHP sometimes, too -- you get to the end of something and THEN they talk about how "this is new in PHP3, so be sure to upgrade ASAP..." so then you check the PHP Manual and find out that it's already been deprecated.  ;-)

I tested my sample in MSIE 6.0, Mozilla 1.5, and Opera 7.12 before... just now schlepped over to the server box and ran it in MSIE 5.0/Win2K (I deliberately ignore all the "Pretty pretty please puhleeeeze upgrade to MSIE 6.0" messages I get from Windows Update on that machine, heh), it did just fine on there.  Most stuff that runs on Mozilla should be okay with NS 6/7 as well, so I don't think you'll have any problems there -- I do know that they support all of the newer table-related HTML tags (see the compatibility charts at  http://devedge.netscape.com/library/xref/).
0
 
fungordAuthor Commented:
Thanks for everything, also the link for browser compatibiltiy
G
0
 
ZontarCommented:
> What would be the pro/con for tbody?

Well, the nice thing about TBODY is that what would otherwise be separate tables are automatically guaranteed to be the same width.

> I already had 2 tables id=tBus =tPer , Can I just <style>... tbody#tBus {display:none;} ?

Yup. Actually, the tagname isn't required, you could just as easily use just

#tBus { display:none; }

and it would work, but I like to use the tagname as a sort of extra reminder to myself.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now