Bind and Unbind mousewheel on popup image event - JQuery - javascript

$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
I can stop mousewheel from scrolling the background when the popup image shows ... and I can do it by the following code.
So, I'm here trying to find a way to unbind and scroll the background again. After closing popup, all elements are blocked. The page doesn't scroll.
Any thoughts how to unbid it again?
Thanks.

Have you tried .unbind()?
$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
$(document).on("click", ".unbind_button", function() {
$("body").unbind("mousewheel", function() {
// do something
});
});

Related

Cannot open file dialog box present inside pop up screen using jQuery/JavaScript

I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.
Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});
Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file

Open/hide div that is already open by clicking link

I have made a nav that opens when you click at the .products link and closes if you click anywhere on the screen. But it seems that if you click on the .product link when it is already open, it will not close. How can I do this?
$('#subnav').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('.products').length ) {
$("#subnav").show();
}else if ( ! $(e.target).closest('#subnav').length ) {
$('#subnav').hide();
}
});
Demo
js
$("#subnav").hide();
$(".products").click(function (e) { //the usual behavior on click on .prducts
$("#subnav").toggle();
e.stopPropagation();
});
$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
e.stopPropagation();
});
$(document).click(function () { //ensures the #subnav will hide on click on document
$("#subnav").hide();
});
You need a click event on the document to hide the block and a click event on the button to show the block. And in the event of the button, you need to stop the propagation of the document's event.
Like that :
$("div").hide();
$("button").bind("click",function(e){
e.stopPropagation();
$("div").toggle(200);
});
$(document).bind("click",function(){
$("div").hide(200);
});
Assuming your code looks like that :
<div></div>
<button>open</button>
See example : http://jsfiddle.net/oqgpceod/1/
Aditionnaly you may add this code to prevent the block from hiding when you click on it :
$("div").bind("click",function(e){
e.stopPropagation();
});
Fiddle: http://jsfiddle.net/r2h57jhu/
$(document).ready(function () {
$('#subnav').hide();
$(document).click(function(e) {
$('#subnav:visible').hide();
});
$('.products').click( function (e) {
$('#subnav:not(:visible)').show();
e.stopPropagation();
});
});

Javascript pop up hide when click outside and show if links are clicked

need help.. this is my fiddle.
it shows a pop up on first load..
the problem is when i click on the pop up it hides..how do i prevent this.. also when i click on a link it should show the pop up again and when i click outside of the pop up it will hide..
Script
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$("#popupBoxClose").click( function () {
alert('hello');
unloadPopupBox();
});
$("#popup_box").click( function () {
e.stopPropagation();
});
$('#global_wrapper').click( function() {
unloadPopupBox();
});
$('.secure').click( function() {
loadPopupBox();
});
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').show();
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
You aren't passing the event to the click handler, try updating this event handler, note the e passed as a parameter to the function:
$("#popup_box").click( function (e) {
e.stopPropagation();
});

Swipe, swipeleft, swiperight events do not trigger on image

I want use jQuery mobile's swiperight event in combination with an image, which doesn't seem to function.
HTML:
<div id="one"><img src="http://jquerymobile.com/wp-content/uploads/2012/09/jquery-mobile-logo-03.png"/></div>
<div id="two">works</div>
JS:
$("#one").on("swiperight", function() {
alert("does not work");
});
$("#two").on("swiperight", function() {
alert("works");
});
JSFiddle
I'm quite sure only desktop browser have this issue as mobile browsers usually don't drag images on swipe.
The solution suggested here prevents dragging your image in all browsers:
$('img').on('dragstart', function(event) {
event.preventDefault();
});
So here is your new working fiddle: http://jsfiddle.net/4CbEQ/1/
You need to prevent image dragging, here's a working example: http://jsfiddle.net/Gajotres/SgUZK/
$(document).on('pagebeforeshow', '#index', function(){
$('img').on('dragstart', function(event) { event.preventDefault(); });
$("#one").on("swiperight", function() {
alert("does not work");
});
$("#two").on("swiperight", function() {
alert("works");
});
});

mouseOut effect with a mask

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});
Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);
If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);

Categories