PHP forum, your PHP coding community

A community in which webmasters can ask for help with topics such as PHP coding , MySQL , IT jobs, web design, IT security.

Skip to content

Instant search mystery

Javascript coding ..

Moderators: macek, egami, gesf

Post Reply
DrChocolate
New php-forum User
New php-forum User
Posts: 2
Joined: Mon Oct 08, 2012 2:23 pm

Instant search mystery

Postby DrChocolate » Mon Oct 08, 2012 2:49 pm

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:

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.
Top
User avatar
egami
php-forum GURU
php-forum GURU
Posts: 2196
Joined: Wed Oct 06, 2010 11:19 am
Location: Happy Valley, UT

Re: Instant search mystery

Postby egami » Tue Oct 09, 2012 7:05 am

Show us your PHP code to do the DB lookup.
Top
DrChocolate
New php-forum User
New php-forum User
Posts: 2
Joined: Mon Oct 08, 2012 2:23 pm

Solved

Postby DrChocolate » Wed Oct 10, 2012 8:21 pm

Dear egami, I just came back to report a solution and saw your request. I appreciate your interest -- I had made a mistake in positioning the wrong element in the HTML code below -- thus leaving the results hanging in space.

I have two other minor problems that have popped up that I can't wrap my brain around (probably part of the JAVA script -- it's too late for me to be coherent.

Those of us who are still learning the basics really rely on folks like you with an interest in helping out. Thanks.

Dr C
Top
Post Reply

Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 1 guest

Powered by phpBB® Forum Software © phpBB Limited
We recommend mod_ruid2 web hosting , traduzioni rumeno italiano and antispam for cPanel.