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

Code:

<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

Originally Posted by Fang

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

Code:

<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. Stop wasting time and bandwidth and start writing DOM compatible code.

**Fang** · 12-14-2005 08:14 AM

Originally Posted by bokeh

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

Originally Posted by Fang

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

Code:

<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.

Thread: Stacking text input over a drop down

Thread Tools

Display

Stacking text input over a drop down

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions