Home/ Questions/Q 8063095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T10:54:23+00:00

<HTML> <BODY> <table id=header-table> <tr> <td id=globalSearchCell class=last-child style=padding-bottom: 0.5em; vertical-align: bottom;> <input class=search-submit-button

  • 0
<HTML>
    <BODY> 
        <table id="header-table">
            <tr>
                <td id="globalSearchCell" class="last-child" style="padding-bottom: 0.5em; vertical-align: bottom;">
                    <input class="search-submit-button" id="global-search-submit-button1" type="image" src="image goes here" />           
                </td>
            </tr>
        </table>

        <div id="ShowGlobalSearchTable" style="text-align :right; float:right; display:none;margin-right: 10px">
            <table class="search-box">
                <tr>
                    <td class="search-text-input-container">
                        <input class="search-text-input" id="global-search-criteria" name="criteria" type="text"  maxlength="100"/>
                    </td>
                    <td>
                        <input class="search-submit-button" id="global-search-submit-button" type="image" src="image URL comes here" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="global-search-popup" class="popup-panel">
                            <img id="global-search-progress" src="image url comes here" style="width:16px; height:16px" />
                            <div id="global-search-popup-content" style="text-align:left;"></div>
                        </div>      
                    </td>     
                </tr>    
            </table>                                       
        </div>
    </BODY>
</HTML>

On clicking on Image id : global-search-submit-button1 I need to be able to toggle (show/hide) DIV with id="ShowGlobalSearchTable"

On clicking anywhere inside the DIV with ID : "ShowGlobalSearchTable" should not close this DIV.

Clicking anywhere on the body should close the DIV. But clicking on the Image Id : "global-search-button1" should toggle the DIV with ID = "ShowGlobalSearchTable".

I tried the following javascript below using Jquery but it is not working, can you suggest changes to my Jquery code below: 

$(function () {             
    $('#global-search-submit-button1').click(function () {              
        $('#ShowGlobalSearchTable').toggle();               
    }                   
    $(document).mouseup(function (event) {              
        var target = $(event.target);               
         if (target != $("#global-search-criteria").get(0) && target != $("#global-search-submit-button").get(0) && target != $("#ShowGlobalSearchTable").get(0) && target != $(".search-text-input-container").get(0)) {                            
             $('#ShowGlobalSearchTable').css("display","none");                          
         }                   
    });     
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Demo: http://jsfiddle.net/lucuma/ed6q2/2/

        $(document).ready(function(event) {
    $('#global-search-submit-button1').click(function(event) {
        event.stopPropagation();
        $('#ShowGlobalSearchTable').toggle();
    });

    $(document).click(function(event) {
        var container = $("#ShowGlobalSearchTable");
        var btn = $("#global-search-submit-button1");

        if (container.has(event.target).length === 0 && btn.has(event.target).length === 0) {
            container.hide();
        }


    });
});​
    • 0