Menu
I have a searchbox at the top of a page. Using ajax I want a div to drop down over the page to display search results. The key thing is I want the search results to overlay the page underneath rather than push it down. For this reason, I cannot just have a div underneath the searchbox. I need to do something a bit more complicated--but I am not sure what.
Following code populates a div under the searchbox. Can anyone suggest an economical way to get div to go over the page rather than push everything down. Thanks for any suggestions!
javascript
function showResults(str) {
document.getElementById("results").innerHTML=xmlhttp.responseText;
document.getElementById("results").style.border="1px solid #A5ACB2";
//some ajax
xmlhttp.open("GET","search.php?str="+str,true);
xmlhttp.send();
}
html
<html>
<body>
<table><tr><td><img src="logo.gif"></td><td>
<input type="text" id="string" onkeyup="showResults(this.value)">
<div id="results"></div><td></tr>
<tr><td colspan=2
Main body of page. All sorts of text and html go here that I do not want pushed down.
</td></tr></table>
</body>
</html>
765
<html>
<body>
<table><tr><td><img src="logo.gif"></td><td style="position:relative">
<input type="text" id="string" onkeyup="showResults(this.value)">
<div id="results" style="position:absolute"></div><td></tr>
<tr><td colspan=2
Main body of page. All sorts of text and html go here that I do not want pushed down.
</td></tr></table>
</body>
</html>
Position relative and absolute will help you to find the solution, and the same time, onload, you need to hide the div, once search result in, you have to show it again.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
