PDA

Click to See Complete Forum and Search --> : Stacking text input over a drop down

Alv
12-13-2005, 09:29 PM
Hi,

I have a table with 4 column and on the rightmost column, I am currently displaying a dropdown.

What I would like to do is at a click of a button, the dropdown is hidden and is replaced by an text input in its place.

Part of the code below is from http://www.quirksmode.org/js/blockinvi.html


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function visi(nr)
{
if (document.layers)
{
vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
document.layers[nr].visibility = vista;
}
else if (document.all)
{
vista = (document.all[nr].style.visibility == 'hidden') ? 'visible' : 'hidden';
document.all[nr].style.visibility = vista;
}
else if (document.getElementById)
{
vista = (document.getElementById(nr).style.visibility == 'hidden') ? 'visible' : 'hidden';
document.getElementById(nr).style.visibility = vista;

}
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.para { visibility: visible; position: relative; }
//-->
</STYLE>
</HEAD>
<BODY>

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%"><DIV CLASS="para" ID="number1">This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1.</DIV><DIV CLASS="para" ID="number2">This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2.</DIV></TD>
</TR>
</TABLE><BR><BR>

<INPUT TYPE="button" VALUE=" Click " onClick="visi('number1'); return false;">

</BODY>
</HTML>


Would I would like to achieve if for paragraph 2 to reuse the area occupied by paragraph 1 or vice versa on a click on a button. Its as if I have changed the CSS position from relative to absolute.

If I were to change it to absolute, it will not be within the boundary of the table cell, which is something I do not want.

Any help appreciated.

Thank you.
Fang
12-14-2005, 01:14 AM
Use display instead of visibility
Alv
12-14-2005, 02:52 AM
Use display instead of visibility

Hi Fang,

No luck using the display property. I have tried these values inline, block, list-item, run-in, inline-block, table, inline-table, table-column, table-cell.

Any other suggestions?

Thanks in advance.
Fang
12-14-2005, 04:08 AM
The if..else order has changed; most browsers support getElementById, so this should be first.
NN4 and older do not support display, so you still need to use visibility and form elements must be wrapped in the form element for NN4
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function visi(nr)
{
var vista;
if (document.getElementById)
{
vista = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
document.getElementById(nr).style.display = vista;
}
else if (document.all)
{
vista = (document.all[nr].style.display == 'none') ? 'block' : 'none';
document.all[nr].style.display = vista;
}
else if (document.layers)
{
vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
document.layers[nr].visibility = vista; }
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.para { position: relative; }
//-->
</STYLE>
</HEAD>
<BODY>

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%"><DIV CLASS="para" ID="number1">This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1.</DIV><DIV CLASS="para" ID="number2">This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2.</DIV></TD>
</TR>
</TABLE><BR><BR>

<form action="#" name="form1">
<INPUT TYPE="button" VALUE=" Click " onClick="visi('number1'); return false;">
</form>
</BODY>
</HTML>
bokeh
12-14-2005, 05:53 AM
Why do people bother including conditionals in their code to accomodate browsers like netscape 4. I doubt that 1/10 of 1% is using that browser. What you are doing is wasting bandwidth and encouraging the gullible that are still using that browser not to update to something that works properly. Even the latest version of Netscape only has a 0.4% following (http://www.w3schools.com/browsers/browsers_stats.asp). Stop wasting time and bandwidth and start writing DOM compatible code.
Fang
12-14-2005, 08:14 AM
Why do people bother including conditionals in their code to accommodate browsers like netscape 4. because so many of the JavaScripts available on the web are archaic (note where the original script came from!). The same can be said of html and a lesser extent css. Not to mention outdated coding practices, JavaScript driven pages, table layout, poor semantics ...
Alv
12-14-2005, 08:01 PM
The if..else order has changed; most browsers support getElementById, so this should be first.
NN4 and older do not support display, so you still need to use visibility and form elements must be wrapped in the form element for NN4
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function visi(nr)
{
var vista;
if (document.getElementById)
{
vista = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
document.getElementById(nr).style.display = vista;
}
else if (document.all)
{
vista = (document.all[nr].style.display == 'none') ? 'block' : 'none';
document.all[nr].style.display = vista;
}
else if (document.layers)
{
vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
document.layers[nr].visibility = vista; }
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.para { position: relative; }
//-->
</STYLE>
</HEAD>
<BODY>

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%">&nbsp;</TD>
<TD WIDTH="25%"><DIV CLASS="para" ID="number1">This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1.</DIV><DIV CLASS="para" ID="number2">This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2.</DIV></TD>
</TR>
</TABLE><BR><BR>

<form action="#" name="form1">
<INPUT TYPE="button" VALUE=" Click " onClick="visi('number1'); return false;">
</form>
</BODY>
</HTML>

Thanks for helping, Fang. The revised code works great. I will pay more attention to getElementById now.

Once again, thanks.