2011-02-18 3 views
1

최근에 내 웹 사이트에 Google 검색 바를 추가했습니다. 검색이 활성화되지 않은 경우에도 탐색 아래에서 탐색을 차단하고 있음을 발견했습니다. 탐색 Z- 색인을 가져 오면 검색 결과 위에 표시됩니다. 검색 막대가 아래로 굴러 가지 않으면 버튼을 "클릭 할 수 있도록"어떻게 만들 수 있습니까?아래 개인 jQuery를 차단하는 Google 검색 바

<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> 

그리고 내 CSS :보기 페이지 여기 여기 http://etterengineering.com/SampleIndex.html

내 HTML입니다

#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 a { 
    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 a { 
    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;} 
+0

그래서 내가 알아 낸 그 포인터 이벤트 : 없음; 내 사용자가 아래층으로 클릭 연결을 할 수있게하지만 검색 드롭 다운을 클릭 할 수 없게합니다. 검색 드롭 다운이 작동하지 않을 때 검색 드롭 다운을 활성화 할 수 있지만 포인터 이벤트 코드를 사용하여 보이지 않을 때 레이어를 클릭 할 수있게하려면 어떻게해야합니까? – Stephanie

답변

0

귀하의 문제는 구글의 검색 창 아닙니다, 당신은과 사업부가 링크를 클릭하지 못하게하는 "cse"의 ID입니다. 문제의

사진 : click

CSS :

#cse {display:none;} 

googleSearch로 검색 상자에 ID를 할당합니다.

jQuery를 :

$(function() { 
    $("#googleSearch").focus(function() { 
     $("#cse").show(); 
    }); 
    $("#googleSearch").blur(function() { 
     $("#cse").hide(); 
    }); 
}); 
+0

div는 실제 검색 결과입니다. 그래서 불행하게도 나는 그것을 꺼낼 수 없다. 이 문제를 해결할 다른 방법이 있습니까? – Stephanie

+0

@Stephanie, 검색 결과가 없을 때 div를 숨 깁니다. –

+0

Google 포함 자바 스크립트에 액세스하지 않고 이것이 가능합니까? – Stephanie