We Keep Coding

Escape from preventDefault function

I have code, where on click to <a> div shows. It disable my scrollbar and when user click on disable button (img), I wanna escape from my preventDefault function, because when I want use scrollbar, it's again disabled.
As you can see, i give back default css, so website looks like before, but on mousewheel, my scrollbar is again disabled. I'm looking for reset this preventDefault or somehow delete this function, i don't know.
$('#region').click(function(e) {
$('#regions').append("<div class=\"regionWindow\"></div><div class=\"regionCancel\"><img class=\"cancelButton\" src=\"img/cancelButton.png\" /></div>");
$('.content').css({ "height": "100%", "background": "rgba(0,0,0,0.7)", "pointer-events": "none" });
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
$(this).css({ "overflow-y": "scroll", "position": "fixed", "width": "100%" });
}
});
$('.cancelButton').click(function(){
$('.content').css({"height":"","background":"","pointer-events":""});
$('#regions').remove('div');
$('body').css({"overflow-y":"","position":"","width":""});
});
});

You first need to define your event handler as a separate (named) function:
function myMouseWheelHandler(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
$(this).css({ "overflow-y": "scroll", "position": "fixed", "width": "100%" });
};
Then keep the .on() you have, but now with your named function:
$('body').on('mousewheel', myMouseWheelHandler);
And then you can remove it with .off():
$('body').off('mousewheel', myMouseWheelHandler);

set position, top and left for a draggable object

I have a draggable object set to position:relative but I need to change it from relative to absolute only when I drag it and I want the object to stay in its initial space.
I tried to set "drag" in this way:
$('obj').draggable({
cursor: 'move',
revert: true,
drag: function () {
var posizione = $(this).position();
var posizione_x = posizione.left;
var posizione_y = posizione.top;
$(this).css({
"left": posizione_x,
"top": posizione_y,
"position": "absolute"
});
},
stop: function () {
$(this).css("position", "relative");
}
})
or in this way:
$('obj').draggable({
cursor: 'move',
revert: true,
drag: function () {
var posizione_x = $(this).offsetLeft;
var posizione_y = $(this).offsetTop;
$(this).css({
"left": posizione_x,
"top": posizione_y,
"position": "absolute"
});
},
stop: function () {
$(this).css("position", "relative");
}
})
but it doesn't work.

I think you need .offset().left and .offset().top
Could you detail "does not work" (error in the console? what happend? how is positionned the element?)
And $('obj') target a <obj> tag, are you certain you element is well targeted?
Maybe you try to do something like that: http://jsfiddle.net/KyleKatarn/awjh79uw/1/

Image Overlay jQuery - Get Image to Stay on Click

I am using the following code to display an overlay image when the base-image is hovered over:
$(".roll").css("opacity","0");
$(".roll").show();
// on mouseover
$(".roll").hover(function () {
var s = $(this).siblings('img');
var w = s.css("width");
var h = s.css("height");
$(this).css("height",h).css("width",w).stop().animate({
opacity: .6 },
"fast");
},
// on mouseout
function () {
$(this).stop().animate({
opacity: 0
}, "fast");
});
This is what the HTML looks like:
<a class="image" href="#">
<span class="roll" style="display:none;"></span>
<img src="mypic.png" class="image">
</a>
How do I implement an "on click" event, so that when the image is clicked, the overlay remains instead of disappearing upon mouseout.
I've gotten started with the following, but not sure what else to do:
$('.roll').on("click", function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
// remove overlay here?
}
else if (!$(this).hasClass("selected")) {
$(this).addClass("selected");
// add overlay here?
}
});
Probably easy, but I'm not sure how to carry it out beyond the basic mouseover/mouseout.
Thanks!

you can prevent on mouse out function when img has not class selected like
//on mouseout
function () {
if (!$(this).hasClass("selected"))
{
$(this).stop().animate({
opacity: 0
});
}
}
Means you have to check in mouseover/out function that: your images has already clicked or not?
Onmouseover:if not already clicked(Selected) then add overlay
Onmouseout: if not already clicked(Selected) then remove overlay

Do you want the overlay image to receive the click event, or the base image? I'm going to assume the base image, but the implementation should be basically the same.
// declare a flag in the outer scope
var stickImage = false;
$(".roll").css("opacity", "0");
$(".roll").show();
// on mouseover
$(".roll").hover(function() {
var s = $(this).siblings('img');
var w = s.css("width");
var h = s.css("height");
$(this).css("height", h).css("width", w).stop().animate({
opacity: .6
}, "fast");
});
// on click, toggle the stickImage boolean
$(".roll").click(function() {
stickImage = !stickImage;
});
// on mouseout
function() {
// check to make sure stickimage is false before hiding
if (!stickImage) {
$(this).stop().animate({
opacity: 0
}, "fast");
}
});

Need to prevent mousehover over click in jquery

Hi have the following code:
$('img').on("mouseenter",function(){
//show overlay
});
$("#overlay").on("click",function(event) {
event.preventDefault();
//hide overlay
})
When i click on the overlay, it should close. But when i happen to be over an image it does not close.I receive both mouseclick and mouseenter events
How do i prevent this?
I am using jquery 1.10.2

When you are on image, it first goes in click event then mouseenter event. So, click event hides then mouseenter shows again. So, you can not hide layout when you are on the img. But, if you disable mouseenter event of img in a short duration, the problem will be solved in Chrome and FF.
As in jsfiddle change your js function as :
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'background-repeat':'no-repeat',
'background-attachment':'fixed',
'background-position':'center',
'z-index': 5000
}).on("click",function(e) {
hideOverlay();
unbindImgMouseEnter();
setTimeout(bindImgMouseEnter, 100);
}).hide();
bindImgMouseEnter();
});
function bindImgMouseEnter(){
$('img').on("mouseenter", showOverlay);
}
function unbindImgMouseEnter(){
$('img').off("mouseenter");
}
function showOverlay(){
$("#overlay").show();
console.log('showed');
}
function hideOverlay(){
$("#overlay").hide();
console.log('hidden');
}

Remove the mouseenter event, when you click the overlay.
$("#overlay").on("click",function(event) {
$('img').off("mouseenter"); // Remove the mouseenter event handler
event.preventDefault();
//hide overlay
});
Suggestion: better use .hover instead of mouseenter
$('img').on("hover",function(){
//show overlay
});
$("#overlay").on("click",function(event) {
$('img').off('hover');
event.preventDefault();
//hide overlay
})

jquery mouseleave issue when moving too slow

I am using the jQuery mouseenter and mouseleave events to slide a div down and up.
Everything works well except for the mouseleave which doesn't appear to fire ONLY if the mouse of moved off of the div quite slowly. If i move the mouse at a relatively normal or fast speed then it works as expected.
Can anyone explain this or provide any info on how to get around this?
Code:
$(document).ready(function() {
$('header').mouseenter(function() {
$(this).stop().animate({'top' : '25px'}, 500, function() {
$(this).delay(600).animate({'top' : '-50px'}, 500);
});
}).mouseleave(function(e) {
var position = $(this).position();
if (e.pageY > position.top + $(this).height()) {
$(this).stop().delay(600).animate({'top' : '-75px'}, 500) ;
}
});
});

Try to use hover instead mouseenter and mouseleave;
$(document).ready(function() {
$("#div").hover(function() {
$("#something").slideDown(400);
}, function() {
$("#something").slideUp(400);
});
});