css - Personal Google search bar blocking jQuery underneath -
i added google search bar website. how found blocking navigation underneath when search not active. if bring navigation z-index displayed on search results. how make buttons "clickable" when search bar not rolled down. view page here http://etterengineering.com/sampleindex.html
here html:
<div id="cse-search-form" style= "z-index:999999; top:0px;"></div> <div id="cse-search-form" style="width: 100%;"></div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'en', style : google.loader.themes.shiny}); google.setonloadcallback(function() { var customsearchcontrol = new google.search.customsearchcontrol('012677673255316824096:sean13fvlei'); customsearchcontrol.setresultsetsize(google.search.search.filtered_cse_resultset); var options = new google.search.drawoptions(); options.setsearchformroot('cse-search-form'); customsearchcontrol.draw('cse', options); }, true); </script> <div id="cse" style="width:43%; z-index:999997; top:40px; height:650px;"></div>
and css:
#cse-search-form { position:absolute; z-index:999999; width:270px; left:680px;} #cse{position:absolute; z-index:999997; left: 530px; overflow:auto;overflow-x:hidden; pointer-events:none; } #dropdown { margin: 0; padding: 0; height: 1em; } #dropdown li { float: left; list-style: none; } #dropdown li { display: block; width:12em; padding: 3px 0px; background-color: transparent; white-space:pre; font-size:.8em; letter-spacing: -.4px; text-align:center; z-index: 24000; font-family: verdana; color: #424242; position: relative; top:105px; left: 0px; text-decoration: none; } #dropdown li a:hover {color:#000000;} /* sub drop down organization */ #dropdown li ul { display: none; width: 18em; letter-spacing: 1em; text-align:center; } /* sub drop down hover */ #dropdown li:hover ul { display: block; position: absolute; margin: 0; padding: 0; } #dropdown li:hover li { word-spacing: .025em; letter-spacing: -.05em; font-size:.8em; font-family: verdana; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#adadad)); background: -moz-linear-gradient(top, #ffffff, #adadad); } #dropdown li li a:hover {color:#ff0000;}
your problem not google search bar, have div id of "cse" preventing clicking of links.
picture of issue:
css:
#cse {display:none;}
assign id search box such googlesearch
.
jquery:
$(function() { $("#googlesearch").focus(function() { $("#cse").show(); }); $("#googlesearch").blur(function() { $("#cse").hide(); }); });
Comments
Post a Comment