Solved

What are some Options for Positioning elements

Posted on 2003-11-02
7
286 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 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