I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.
There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});
Related
I know there is a onselect event which works on input and textarea elements.
I want to show a popup like google dictionary does when something is selected on body element.
What are some possible options ?
Blue area is what I mean by selection .
You could try JQuery's mouseup command - it will be triggered when you release the mouse button press at the end of your selection.
Someone else's example on JSFiddle: http://fiddle.jshell.net/g59KM/12/
$(document).ready(function() {
$('#textarea').mousedown(function() {
$("#alerts p").append("<span style=\"color:blue;\">Mouse down. </span>");
});
$(document).mouseup(function() {
$("#alerts p").append("<span style=\"color:red;\">Mouse up. </span>");
})
});
...which illustrates my point - select any of their text then when you release the mouse an event will be called, which you could use.
The JQuery instruction: is here
I'm attempting to prevent a user from clicking a link and it going to another page while any input is focused. Sometimes the only available space around the input and the keyboard is a link and some users click the link accidentally. I'm trying to make it so when they click the link it blurs the input (closes the keyboard) and prevents the page from following the link. Then let them click the link again if they want to go to another page after the input is no longer in focus.
html
<input type="text">
Example
I've tried the following...
jQuery
$('a').on('click', function (event) {
if ($('input').is(":focus")) {
console.log('focused');
event.preventDefault();
}
});
(nothing gets logged)
Also tried this...
if ($('input').is(":focus")) {
$('a').on('click', function (event) {
event.preventDefault();
$('input').each(function(){
$(this).trigger('blur');
});
});
}
Neither one prevent the page from going to whatever link was clicked...
I don't think you can do this. You can disable the click event on the links while input is focused, and enable it back again when blur occurs on the input elements. However, while if user clicks on a link while focused on the input element blur event will occur first (which would enable clicking) then click even occurs and links acts as normal.
You could try disabling the links while input elements have focus, then you can enable them on the first click and restore normal operation.
$("input").on("focus", function() {
$("a").on("click", function (event) {
event.preventDefault();
$("a").off();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
example
I think I found a solution.
HTML
Example.com
jQuery
$('input').on('focus', function () {
$('a').each(function(){
$(this).addClass('cant-click');
});
});
$(document).on('touchend', function (e) {
if (!$(e.target).closest('input').length) {
$('a').each(function(){
$(this).removeClass('cant-click');
});
}
});
CSS
a.cant-click { pointer-events: none; }
When the input takes focus, every link gets this class. When anything on the page is clicked that is not an input, it removes this class from every link.
I have some list items and each contains a small box next to it. Upon clicking on the box ,some info is shown. I want to hide the box if a click is outside the box. But i do not know exactly how to do it. There are already some posts similar to this question but all of them are using jQuery but i have to get this done using pure javascript
I tried to do following way: http://jsfiddle.net/kn8hw4tf/1/
Thanks
Listen for clicks anywhere on document, and react to them.
Listen for clicks on the box, and invoke event.stopPropagation() so they don't hit the listener on document.
document.getElementById('test_id').addEventListener('click', function getDetails(evt) {
var id = this.getAttribute('id');
alert("Clicked on " + id);
evt.stopPropagation();
});
document.addEventListener("click", function (e) {
alert("Clicked outside");
});
I'm using simple DropIt jquery dropdowns - http://dev7studios.com/dropit/
I want to have the submenu box stay open unless clicked outside of the box (.dropit-submenu)
I'm planning to have a form input in dropdown but whenever i click input inside dropdown the whole dropdown closes...
line 40 of js is showing this
// Close if outside click
$(document).on('click', function() {
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
There is a trick if you want to use, on div which is popping up you can write onclick="return false;" so this will not go to call jquery other call and after your form submission you can hide the same div.
// Close if outside click
$(document).on('click', function(e){
if($(e.target).closest('.dropit-submenu').length){ return true; }
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
In my program an area called 'validDrop' is highlighted for the user to drag and drop items into.
A new area is highlighted when the button, 'minibutton' is clicked.
I want to tell the program to only allow the button to be clicked if the current area (validDrop) is styled by 'wordglow2' and 'wordglow4'.
I have tried this, Why won't it work?
if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
$('.minibutton').click(true);
} else {
$('.minibutton').click(false);
}
Because hasClass doesn't take more than one parameter, and because .click either triggers a click or binds a click listener, it doesn't set clickability.
Depending on what .minibutton is, you could do something like:
var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);
If it's not a type that can be disabled, you might consider something like this:
$('.minibutton').toggleClass('disabled', !valid);
And bind the click listener like so:
$(document).on('click', '.minibutton:not(.disabled)', function() {
// click action here
});
As ThiefMaster points out in comments, $(validDrop).is('.wordglow2.wordglow4') is a functionally equivalent way of checking that the drop has both classes.
You can alsou use .bind() and .unbind() to add and remove click event to your button as in my example http://jsfiddle.net/Uz6Ej/