Hey all i am trying to figure out why my search box results shows up just fine in IE, Safari but not FF or Chrome. Here is my code for the search box: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> //******************************************** // Search Function //******************************************** var count = 0; function set2Show() { //document.getElementById("productLine_wrap").style.visibility = "visible"; //document.getElementById("contactInner").style.visibility = "visible"; $('#suggestions').fadeOut(); } function delayType(theValue) { count = count + 1; $('#suggestions').fadeOut(); setTimeout("searchGo(" + count + ",'" + theValue + "')", 1000); } function searchGo(currCount, currValue){ if(currCount == count){ count = 0; lookup(currValue); } } google.setOnLoadCallback(function() { $("input").blur(function(){ $('#suggestions').fadeOut(); //document.getElementById("productLine_wrap").style.visibility = "visible"; //document.getElementById("contactInner").style.visibility = "visible"; }); }); function lookup(inputString) { if(inputString.length == 0) { $('#suggestions').fadeOut(); //document.getElementById("productLine_wrap").style.visibility = "visible"; //document.getElementById("contactInner").style.visibility = "visible"; } else { $("#loading").bind("ajaxSend", function(){ $(this).show(); document.getElementById("inputString").disabled = true; $('#inputString').fadeTo("fast", 0.5); }).bind("ajaxComplete", function(){ $(this).hide(); document.getElementById("inputString").disabled = false; $('#inputString').fadeTo("fast", 1); }); $.post("fetchSearch.asp", {queryString: ""+inputString+""}, function(data) { $('#suggestions').fadeIn(); $('#suggestions').html(data); //document.getElementById("productLine_wrap").style.visibility = "hidden"; //document.getElementById("contactInner").style.visibility = "hidden"; }); } } </script> <style type="text/css"> /* COMMON CLASSES */ .break { clear:both; } a img { border:0 } /* SEARCHRESULTS */ #searchresults {border: 1px #000 solid; width:250px; background-color:#FC6; font-size:10px; line-height:14px; text-align:left; z-index: 99;} #searchresults a { display:block; background-color: #FFE2C6; clear:left; height:56px; text-decoration:none; } #searchresults a:hover { background-color: #FFF;} #searchresults a img { float:left; padding:3px 4px; } #searchresults a span.searchheading { display:block; font-weight:bold; padding-top:1px; color:#000; border-top: 1px dotted #000; } #searchresults a:hover span.searchheading { color:#000; } #searchresults a span { color:#000; } #searchresults a:hover span { color:#000; } #searchresults span.category { font-size:11px; margin:5px; width:250; color:#000; } #searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;} #searchresults span.seperator a { background-color:transparent; display:block; margin:1px; height:5px; color:#000; } #loading {position:absolute;width:16px;height:11px;z-index:3;left: 70px;top: 7px;display: none; z-index: 1000;} #suggestions {position:absolute;width:16px; height:11px;z-index:60;left: -72px;top: 23px;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <body onfocus="set2Show();"> <div id="searchBox" align="center"> <div id="loading"><img src="ajax-loader.gif" alt="" width="16" height="11" align="left" /></div> <ul id="searchForm"> <li><span class="fieldbox"> <input type="text" name="inputString" maxlength="27" id="inputString" value="" onmousedown="set2Show();" onkeyup="delayType(this.value);" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;font-weight:bold; vertical-align: text-top; text-transform:lowercase;"/> </span></li> </ul> <div id="suggestions"></div> </div> </body> </html> Code (markup): I can not seem to find out why it doesnt want to display in FF or Chrome... Any help would be great! David
Firebug sz there are undefined variables. Do you have proprietary MSFT jscript instead of sticking to javascript? cheers, gary
From Firebug's console: $ is not defined set2Show()test.html function onfocus(event) { set2Show(); }(focus ) [Break on this error] $("input").blur(function(){\ntest.html $ is not defined [Break on this error] $('#suggestions').fadeOut();\ntest.html[ Code (markup): Errors occur on lines 16 and 35. cheers, gary
Oh, yeah, comment those out. //******************************************** // Search Function //******************************************** var count = 0; function set2Show() { //document.getElementById("productLine_wrap").style.visibility = "visible"; //document.getElementById("contactInner").style.visibility = "visible"; $('#suggestions').fadeOut(); } function delayType(theValue) { count = count + 1; $('#suggestions').fadeOut(); setTimeout("searchGo(" + count + ",'" + theValue + "')", 1000); } function searchGo(currCount, currValue){ if(currCount == count){ count = 0; lookup(currValue); } } google.setOnLoadCallback(function() { $("input").blur(function(){ $('#suggestions').fadeOut(); //document.getElementById("productLine_wrap").style.visibility = "visible"; //document.getElementById("contactInner").style.visibility = "visible"; }); }); function lookup(inputString) { if(inputString.length == 0) { $('#suggestions').fadeOut(); //document.getElementById("productLine_wrap").style.visibility = "visible"; //document.getElementById("contactInner").style.visibility = "visible"; } else { $("#loading").bind("ajaxSend", function(){ $(this).show(); document.getElementById("inputString").disabled = true; $('#inputString').fadeTo("fast", 0.5); }).bind("ajaxComplete", function(){ $(this).hide(); document.getElementById("inputString").disabled = false; $('#inputString').fadeTo("fast", 1); }); $.post("http://www.june3rdsoftware.com/client/3sx/new/fetchSearch.asp", {queryString: ""+inputString+""}, function(data) { $('#suggestions').fadeIn(); $('#suggestions').html(data); //document.getElementById("productLine_wrap").style.visibility = "hidden"; //document.getElementById("contactInner").style.visibility = "hidden"; }); } } Code (markup): David
Good grief... It was because i did not have the file on my server. I guess it wouldnt get the data without it being on the same server as well.... 2 hours wasted.... David