Instant Search Results Appear To Be Lost In Space

phpauthor · October 8, 2012

I have installed a PHP/AJAX "instant search" (like Google) on our website.

The results should appear immediately below the input box, but they appear way up and to the left. Using a document.getelementByID(name).style.position along with top and left have no effect on the result box location. Here's the details:

Here's the problem in action:

Enter an a into the search box at http://www.woofwoofwoof.org/is01/search.htm and you'll see the results up and to the left rather than just below the input box.

The original search code on the w3school's site (located at http://www.w3schools..._livesearch.asp ) has worked well until I inserted into our web site; can anyone spot the problem? Here's our HTML-- I believe the problem lies in the relevant CSS, javascript or the inputbox lines. I've tried to mark them in green and surrounded them with a title and lots of equal signs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Search page - SupportWorks</title>
<meta name="description" content="Directory of resources in the Charlotte, NC region for nonprofit non-poltical support groups">
<meta name="keywords" content="SupportWorks search page, Charlotte NC, support groups">
<meta name="generator" content="WYSIWYG [url="http://www.php-forum.com/phpforum/viewtopic.php?f=26&t=21108#"]Web Builder[/url] 8 - http://www.wysiwygwebbuilder.com">
<style type="text/css">
div#container
{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
background-color: #9999CC;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #282828;
text-decoration: none;
}
a:visited
{
color: #282828;
}
a:active
{
color: #282828;
}
a:hover
{
color: #FF0000;
text-decoration: none;
}
</style>
<style type="text/css">
#Line1
{
color: #3300CC;
background-color: #3300CC;
border-width: 0px;
}
#wb_Shape8 a img
{
position: absolute;
}
#wb_Shape8 span
{
position: absolute;
}
#wb_Shape8 a .hover
{
visibility: hidden;
}
#wb_Shape8 a:hover .hover
{
visibility: visible;
}
#wb_Shape8 a:hover span
{
visibility: hidden;
}
#wb_Shape9 a img
{
position: absolute;
}
#wb_Shape9 span
{
position: absolute;
}
#wb_Shape9 a .hover
{
visibility: hidden;
}
#wb_Shape9 a:hover .hover
{
visibility: visible;
}
#wb_Shape9 a:hover span
{
visibility: hidden;
}
#wb_Shape10 a img
{
position: absolute;
}
#wb_Shape10 span
{
position: absolute;
}
#wb_Shape10 a .hover
{
visibility: hidden;
}
#wb_Shape10 a:hover .hover
{
visibility: visible;
}
#wb_Shape10 a:hover span
{
visibility: hidden;
}
#wb_Shape4 a img
{
position: absolute;
}
#wb_Shape4 span
{
position: absolute;
}
#wb_Shape4 a .hover
{
visibility: hidden;
}
#wb_Shape4 a:hover .hover
{
visibility: visible;
}
#wb_Shape4 a:hover span
{
visibility: hidden;
}
#Image2
{
border: 0px #000000 solid;
}
#Layer1
{
background-color: #FAFAFA;
opacity: 0.00;
-moz-opacity: 0.00;
-khtml-opacity: 0.00;
filter: alpha(opacity=0);
}
#Image1
{
border: 0px #000000 solid;
}


[color=#008000][b]================================ CSS and SCRIPT ==============================

[color=#800080][color=#8000FF][list]#Editbox1
{
border: 2px #000000 solid;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
background-color: #CCFFFF;
color :#282828;
font-family: Arial;
font-size: 20px;
padding: 0px 0px 0px 20px;
text-align: left;
vertical-align: middle;
}
[/color][/list][/color]</style>
[b][color=#4000FF]<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px"

return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.fontFamily="Arial";
document.getElementByID("livesearch").style.position="absolute";
document.getElementByID("livesearch").style.top="500px";
document.getElementByID("livesearch").style.left="500px"
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>[/b][/color]
[/color]</head>
[/b]


===================== END CSS AND SCRIPT =================================

<body>
<div id="container">
<div id="wb_Shape2" style="position:absolute;left:73px;top:142px;width:753px;height:44px;z-index:1;">
<img src="images/img0026.gif" id="Shape2" alt="" style="border-width:0;width:753px;height:44px;"></div>
<div id="wb_Shape7" style="position:absolute;left:2px;top:28px;width:959px;height:578px;z-index:2;">
<img src="images/img0027.gif" id="Shape7" alt="" style="border-width:0;width:959px;height:578px;"></div>
<hr id="Line1" style="margin:0;padding:0;position:absolute;left:437px;top:116px;width:442px;height:3px;z-index:3;">
<div id="wb_Shape5" style="position:absolute;left:511px;top:63px;width:2px;height:44px;z-index:4;">
<img src="images/img0028.gif" id="Shape5" alt="" style="border-width:0;width:2px;height:44px;"></div>
<div id="wb_Shape8" style="position:absolute;left:599px;top:56px;width:111px;height:66px;z-index:5;">
<a href="./discover.htm"><img class="hover" src="images/img0029_hover.png" alt="" style="border-width:0;width:111px;height:66px;"><span><img src="images/img0029.png" id="Shape8" alt="" style="border-width:0;width:111px;height:66px;"></span></a></div>
<div id="wb_Shape9" style="position:absolute;left:712px;top:57px;width:98px;height:66px;z-index:6;">
<a href="./learn.htm"><img class="hover" src="images/img0030_hover.png" alt="" style="border-width:0;width:98px;height:66px;"><span><img src="images/img0030.png" id="Shape9" alt="" style="border-width:0;width:98px;height:66px;"></span></a></div>
<div id="wb_Shape10" style="position:absolute;left:812px;top:57px;width:89px;height:66px;z-index:7;">
<a href="./contact.htm"><img class="hover" src="images/img0031_hover.png" alt="" style="border-width:0;width:89px;height:66px;"><span><img src="images/img0031.png" id="Shape10" alt="" style="border-width:0;width:89px;height:66px;"></span></a></div>
<div id="wb_Shape11" style="position:absolute;left:592px;top:63px;width:2px;height:44px;z-index:8;">
<img src="images/img0032.gif" id="Shape11" alt="" style="border-width:0;width:2px;height:44px;"></div>
<div id="wb_Shape12" style="position:absolute;left:706px;top:61px;width:2px;height:44px;z-index:9;">
<img src="images/img0033.gif" id="Shape12" alt="" style="border-width:0;width:2px;height:44px;"></div>
<div id="wb_Shape13" style="position:absolute;left:805px;top:61px;width:2px;height:44px;z-index:10;">
<img src="images/img0034.gif" id="Shape13" alt="" style="border-width:0;width:2px;height:44px;"></div>
<div id="wb_Shape4" style="position:absolute;left:517px;top:55px;width:81px;height:69px;z-index:11;">
<a href="./form.htm"><img class="hover" src="images/img0035_hover.png" alt="" style="border-width:0;width:81px;height:69px;"><span><img src="images/img0035.png" id="Shape4" alt="" style="border-width:0;width:81px;height:69px;"></span></a></div>
<div id="wb_Shape1" style="position:absolute;left:436px;top:55px;width:81px;height:68px;z-index:12;">
<img src="images/img0036.png" id="Shape1" alt="" style="border-width:0;width:81px;height:68px;"></div>
<div id="wb_Image2" style="position:absolute;left:64px;top:53px;width:334px;height:61px;z-index:13;">
<img src="images/SWLavLogo.JPG" id="Image2" alt="" border="0" style="width:334px;height:61px;"></div>
<div id="Layer1" style="position:absolute;text-align:left;left:50px;top:36px;width:368px;height:96px;z-index:14;" title="Go home!">
<div id="wb_Image1" style="position:absolute;left:11px;top:5px;width:344px;height:82px;opacity:0.00;-moz-opacity:0.00;-khtml-opacity:0.00;filter:alpha(opacity=0);z-index:0;">
<a href="./index.htm"><img src="images/SW-Logo.jpg" id="Image1" alt="" border="0" style="width:344px;height:82px;"></a></div>
</div>


[color=#008000]=========================== HTML FOR INPUT BOX FORM =========================

[color=#4000FF]<form>
<input type="text" id="Editbox1" onkeyup="showResult(this.value)" style="position:absolute;left:107px;top:139px;width:724px;height:41px;line-height:41px;z-index:15;" name="SearchBox" value="" autocomplete="off" placeholder="Start your search here" autofocus="autofocus" placeholder="Start your search here">
<div id="livesearch"></div>
</form>

=================================END FORM HTML =============================[/color]


[/color]<div id="wb_Shape6" style="position:absolute;left:787px;top:146px;width:53px;height:28px;z-index:16;">
<img src="images/img0038.gif" id="Shape6" alt="" style="border-width:0;width:53px;height:28px;"></div>
</div>
</body>
</html>

Thank you very much for taking the time. -- DrC

Beeeeney · October 9, 2012

It seems to work fine?

kjetterman · October 9, 2012

It worked for me too. Did you figure it out?

phpauthor · October 12, 2012

I'm glad it worked in your computer system. For ours, it seems that in the code about 8 lines up from the bottom that I needed to put position information in the <div>"id search" section -- not above. I'm infinitely curious why it worked for you without those instructions, but I guess the proof is in the pudding. Thank you very much! -- DrC

Sign In

Instant Search Results Appear To Be Lost In Space

Recommended Posts

phpauthor

Link to comment

Share on other sites

Beeeeney

Link to comment

Share on other sites

kjetterman

Link to comment

Share on other sites

phpauthor

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information