I adapted and inserted the w3school's PHP/AJAX code for instant search (located at http://www.w3schools.com/php/php_ajax_livesearch.asp ) into our site. Our problem is obvious -- 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 code on the w3school's site 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 marked them blue and surrounded them with a title and lots of equal signs.
- Code: Select all
<!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 Web Builder 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;
}
================================ 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>
[/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>
=========================== 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]<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 your time -- I'm all ears.
