www.webdeveloper.com
Results 1 to 7 of 7

Thread: Stacking text input over a drop down

  1. #1
    Join Date
    May 2003
    Posts
    32

    Stacking text input over a drop down

    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.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use display instead of visibility
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    May 2003
    Posts
    32
    Quote 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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,742
    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.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote 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 ...
    Last edited by Fang; 12-14-2005 at 08:17 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    May 2003
    Posts
    32
    Quote 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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles