CODEWITHSUNDEEP
javascriptjquery
124697
124697

Reputation: 21893

I need help with these two functions

The first one displays the div, the second one hides the dive up on clicking anywhere else in the document. the problem i have is, when i click the button to show the div, it also counts as a document click so it hides the div. how can i it make not hide the div when i click to show the div

<script type="text/javascript">
    function test22(){  

        var links = document.getElementById('links_safari');
        if(links.style.display == "none"){

            document.getElementById('links_safari').style.display="";
            var content = $('#links_safari').html();             
            var words = content.split(',');             
            for (var i = 2; i < words.length; i += 3) { 
                words[i] += '<br>'; 
            }
            content = words.join(' ');  
            $('#links_safari').html(content); 

            $('#links_safari').css("margin-top", -322);
            $('#links_safari').css("margin-left", 180);
            safariPopupStatus++;
        }
        else{
            links.style.display="none";

        }
    }



</script>

<script type="text/javascript">
    $(function (){

        $(document).click(

            function (e){
                var links = document.getElementById('links_safari');

                links.style.display="none";
                }  
        )
    })
</script>

Upvotes: 0

Views: 70

Answers (4)

Umair Jabbar
Umair Jabbar

Reputation: 3666

lets suppose the id of your button is showBtn the code now will be

$(document).click(

            function (e){
                if($(e.target).attr('id')=='showBtn') return

                var links = document.getElementById('links_safari');
                if(links.style.display != "none") // why not check here ?
                  links.style.display="none";

                }  
        )

Upvotes: 2

justkt
justkt

Reputation: 14766

Create a separate click handler for your button. It should look like:

$("#buttonID").click(function(e) {
    test22(); // to show
    e.stopPropegation();
});

stopPropegation will keep the event from bubbling up to the document level, preventing the handler from being called there.

You can and also probably should put the show code from test22() into your button handler and have the document handler just handle hiding.

Upvotes: 0

Matej Baćo
Matej Baćo

Reputation: 1332

You must stop click event propagation. Check out http://api.jquery.com/event.stopPropagation/

Upvotes: 0

DhruvPathak
DhruvPathak

Reputation: 43235

Have a simple check in your "click" function :

<script type="text/javascript">
    $(function (){

        $(document).click(

            function (e){
                var links = document.getElementById('links_safari');
                if(links.style.display != "none") // why not check here ?
                  links.style.display="none";
                else
                   links.style.display="";

                }  
        )
    })
</script>

Upvotes: 0

Related Questions