Jump to content

phpauthor

New Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling

phpauthor's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. phpauthor
    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
  2. phpauthor
    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
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.