Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Default click anywhere else to close not working #14

Open
ryangrush opened this issue Sep 7, 2012 · 8 comments
Open

Default click anywhere else to close not working #14

ryangrush opened this issue Sep 7, 2012 · 8 comments

Comments

@ryangrush
Copy link

I hate to bother you with what is probably a mistake on my part, but I can't figure out what's missing. The click over is functioning fine for the most part but the click anywhere else to close is not wanting to work here.

http://jsfiddle.net/nosfan1019/FBU7w/
@lecar-red
Copy link
Owner

Hi,

it appears that jsfiddle suppresses events inside the results box but if you wrap it with a div, you can see the behavior working:

http://jsfiddle.net/CuMcK/

HTH,

Lee

@ryangrush
Copy link
Author

That makes sense. Thanks for looking at for me.

@ryangrush ryangrush reopened this Sep 24, 2012
@ryangrush
Copy link
Author

I had this on the backburner when you responded, finally back to working on something with this again though. The containing

works but is not ideal. Does my containing
have to span the entire page for a user to exit out of the modal, or am I doing something wrong?

That doesn't sound right by the looks of your examples page.

@lecar-red
Copy link
Owner

that sounds very odd. Do you have a non js fiddle example that I could look at?

The global close handler is attached to the body element so unless you set global_close to false then it should close when clicking anywhere on the page.

@ryangrush
Copy link
Author

Thanks for the quick reply :)

Here is a simple example (using TBS 2.1.1 btw)

<!DOCTYPE html>
<html>
<head>
    <title>Clickover</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" />

    <script src="javascript/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/lecar-red/bootstrapx-clickover/master/js/bootstrapx-clickover.js" type="text/javascript"></script>  

<style>

body {
    padding: 100px;
    background: #eee;
}


</style>

</head>
<body>

<a class="btn btn-primary" data-content="click over content.">See Example</a>



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

    $('.btn').clickover();

});

</script>




</body>
</html>

If I click anywhere within the top ~200px of the body it will close it (body { padding: 100px } ), but anywhere below and it doesn't want to work.

@lecar-red
Copy link
Owner

Interesting, I wonder if the body isn't pushing all the way to the bottom of the browser page. You could try adding jquery body event to test this.

Quick example:

$(function() { 
  $('body').on('click', function(e) { alert("Body was clicked"); }); 
});

@ryangrush
Copy link
Author

That looks to be the problem. Again if its below the ~200px it doesn't trigger the alert.

Probably won't be too much of an issue in practice though.

@divinoro
Copy link

Hi, I think i have similar issue - when body is not as high, as viewport of browser, "click everywhere" is not really everywhere :)

My suggestion is to bind event to document instead of body (line 75):

$(document).on( this.attr.click_event_ns, function(e) {
if ( !that.tip().has(e.target).length ) { that.clickery(); }
});

Then unbind on line 113:

$(document).off( this.attr.click_event_ns );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ryangrush @lecar-red @divinoro