Hiding page elements with Javascript (Advanced)

[Solarpitch]

Hey Guys,

 

Really need help with this one. On the home page of my site I want to define 2 div's. One div will display the welcome information and the other will be a big textfield. I only want one of these div's visible at a time.

 

The idea is..

 

When the user goes to the home page they will see the welcome information but as soon as they types a letter in the search box (onKeyUp) on the left, the welcome div will disappear showing the search div dynamically displaying the user's choices.

 

Here's an EXAMPLE of the idea I was trying...

 

<script type="text/javascript">


*** Script for dynamic html search function ***

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}


*** Script for changing the div elements ***


var divs = document.getElementById("information").getElementsByTagName("div");
for(i = 0; i < divs.length; i++){
    divs[i].style.display = "none";
}
document.getElementById("page1").style.display = "block";

var current = "1";
function pageSwitch(id){
    if(!document.getElementById) return false;
    var div = document.getElementById("page"+id);
    var curDiv = document.getElementById("page"+current);
    curDiv.style.display = "none";
    div.style.display = "block";
    current = id;

</script>

*** HTML ***

<div id="welcome_div">
<p>Welcome to...</p>
</div>

<div id="search_div">
<textarea name="textarea" id="txtHint" style="width:500px; height:400px "></textarea>
</div>

 

Here's a quick example

 

[fenway]

And what happens currenctly?