Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

What are some Options for Positioning elements

Posted on 2003-11-02
7
Medium Priority
?
313 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

636 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