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);
Related
I have a code but i don't know why it does not working, even if it's a simple code of
if condition.
$(".btn-superimposed-wrapper").each(function () {
if (($(this).prev(".wp-block-group")) && ($(this).next(".wp-block-group"))) {
$(this).css({ "margin-top": "-8rem", "margin-bottom": "-6rem", "text-align": "center" });
}
});
i also tried with hasClass() :
$(".btn-superimposed-wrapper").each(function () {
if ($(this).prev().hasClass(".wp-block-group") && $(this).next().hasClass(".wp-block-group")) {
$(this).css({ "margin-top": "-8rem", "margin-bottom": "-6rem", "text-align": "center" });
console.log("PREV ;",$(this).prev())
console.log("NEXT ;",$(this).next())
}
});
i need to add the css style (above) to button when it have a div with class .wp-block-group before AND after.
But for example if i change the name of the div.wp-block-group in the html, it style apply the css as the condition is always true knowing that we have a condition with AND, i don't understand !
Consider the following.
$(".btn-superimposed-wrapper").each(function (i, el) {
if ($(el).prev().hasClass("wp-block-group") && $(el).next().hasClass("wp-block-group")) {
$(el).css({
"margin-top": "-8rem",
"margin-bottom": "-6rem",
"text-align": "center"
});
}
});
This will examine the previous and next elements and if they both have the Class, will return true.
Am trying to show a div on mouseenter event at the pointer of mouse. But instead its showing div at a little distance.
$(document).on('mouseenter', '.mediumListIconTextItem', function (e) {
// $("#school").append($("#show1"));
// $("#show1").css({'display' : 'block'});
alert(e.pageX);
alert(e.pageY);
$('#show1').css({
"top": (e.pageY),
"left": (e.pageX),
"background-color": "red",
"z-index": "10",
"position": "absolute"
});
$('#show1').show();
});
$(document).on('mouseleave', '.mediumListIconTextItem', function () {
// $("#show1").css('display','none');
$('#show1').hide();
});
Is there any other solution to show div at mouse enter event and at the given pointer location
I have a side bar which when you mouseover it slides over the content, when you mouseout it slides back. All working great.
I then have a button which when you click it, it locks the sidebar in place, pushing the content behind over. Locking the sidebar in place. Also works great..
My problem is that I wish for when the sidebar to be locked, to disable the hover, and keep it in the expanded state, then when you unlock it, to go back and re-enable hovering.
Fiddle
Thanks
$('.sec-sidebar-toggle').click(function (e) {
e.preventDefault();
if ($(this).closest('.sec-sidebar').hasClass('sidebar-locked')) {
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '38px'
}, 300).css({
'overflow': 'visible'
});
} else {
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '253px'
}, 300).css({
'overflow': 'visible'
});
}
});
//Hover
$('.sec-sidebar').mouseover(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '0px'
}, 300);
}).mouseout(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '-215px'
}, 300);
});
You can unbind the mouseover and mouseout events.
http://jsfiddle.net/3n1gm4/VEUe9/
$('.sec-sidebar-toggle').click(function(e){
e.preventDefault();
if( $(this).closest('.sec-sidebar').hasClass('sidebar-locked') ){
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '38px'}, 300).css({'overflow': 'visible'});
// ADD EVENT HANDLERS
setupHover();
} else{
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '253px'}, 300).css({'overflow': 'visible'});
// REMOVE EVENT HANDLERS
$('.sec-sidebar').unbind('mouseover');
$('.sec-sidebar').unbind('mouseout');
}
});
function setupHover() {
//Hover
$('.sec-sidebar').mouseover(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '0px'}, 300);
}).mouseout(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
});
}
setupHover();
I have wrapped the mouseout function in an IF statement to check whether the sidebar has the sidebar-locked class. If it does the following animation will not be executed.
if(!$('.sec-sidebar').hasClass('sidebar-locked')){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
}
Is this what you were hoping to achieve?
Here is the JsFiddle.
Note: The ! at the start of the IF statement is to say IF NOT. So, If not this class in the above example.
There are two easy solutions in my head.
1: You could check the classes of the sidebar if 'sidebar-locked' is present with .hasClass() in the mouseevents.
2: You could remove the mouse events completely by unbinding them when you lock it and rebinding them when you unlock it.
See jQuery API: unbind.
Sidenote:
Consider using the hover event instead of the two seperate mouse events.
You should to clear mouseover event handler, and reassign it back when it needs.
Remove an event handler.
In the following code, the user can hover over the area and a drop down box appears.
The user wants the box to disappear if the user clicks somewhere on the screen. Is there a way to accomplish this using JavaScript and jQuery?
Code below ... thank you in advance for your response.
<script type="text/javascript">
$(document).ready(function () {
$(".password").fancybox({
'width': 500,
'height': 260,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
// Login drop down
$(".signin").hover(function (e) {
e.preventDefault();
$(".signin_menu").show();
$(".signin").addClass("menu-open");
});
$(".signin_menu").hover(function (e) {
e.preventDefault();
$(".signin_menu").show();
$(".signin").addClass("menu-open");
});
Try adding this:
$('html').on('click', function() {
$('.signin_menu:visible').hide();
});
$('.signin_menu > *').on('click', function(event) {
event.stopPropagation();
});
If a user clicks on an element outside of the .signin_menu, the .signin_menu will be hidden.
The function .hover() can have more than 1 parameter (http://api.jquery.com/hover/)
If you put a second parameter, it will add a "hoverOut" handler.
Try this:
$(".signin").hover(function (e) {
e.preventDefault();
$(".signin_menu").show();
$(".signin").addClass("menu-open");
},function(e){
e.preventDefault();
$(".signin_menu").hide();
$(".signin").removeClass("menu-open");
});
$(".signin_menu").hover(function (e) {
e.preventDefault();
$(".signin_menu").show();
$(".signin").addClass("menu-open");
},function(e){
e.preventDefault();
$(".signin_menu").hide();
$(".signin").removeClass("menu-open");
});
The first function is HoverIn, the second HoverOut.
That way, the dropdown will disappear after you put your mouse out of the box.
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
})