?
Solved

What are some Options for Positioning elements

Posted on 2003-11-02
7
Medium Priority
?
306 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 320 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

801 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