Solved

What are some Options for Positioning elements

Posted on 2003-11-02
7
287 Views
Last Modified: 2013-11-19
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
Comment
Question by:fungord
  • 3
  • 3
7 Comments
 
LVL 25

Expert Comment

by:devic
ID: 9668169
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
 
LVL 11

Accepted Solution

by:
Zontar earned 80 total points
ID: 9668625
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
 

Author Comment

by:fungord
ID: 9672769
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:fungord
ID: 9672871
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9672978
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
 

Author Comment

by:fungord
ID: 9680119
Thanks for everything, also the link for browser compatibiltiy
G
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9683792
> 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
c# LinkButton OnClientClick 2 34
Angular- another way of coding hide and display 3 40
Angular - break the dataset in chunks? 7 39
Angular - "nest" service calls? 18 25
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now