How to unbind() .hover() but not .click()? - javascript

I'm creating a site using Bootstrap 3, and also using a script that makes the dropdown-menu appear on hover using the .hover() function. I'm trying to prevent this on small devices by using enquire.js. I'm trying to unbind the .hover() event on the element using this code:
$('.dropdown').unbind('mouseenter mouseleave');
This unbinds the .hover of that script but apparently it also removes the .click() event(or whatever bootstrap uses), and now when I hover or click on the element, nothing happens.
So I just want to how I can remove the .hover() on that element, that is originating from that script, but not change anything else.
Would really appreciate any help.
Thanks!
Edit: Here is how I'm calling the handlers for the hover functions:
$('.dropdown').hover(handlerIn, handlerOut);
function handlerIn(){
// mouseenter code
}
function hideMenu() {
// mouseleave code
}
I'm trying to unbind them with this code.
$('.dropdown').unbind('mouseenter', showMenu);
$('.dropdown').unbind('mouseleave', hideMenu);
But its not working.
Please help!
**Edit2: ** Based on the answer of Tieson T.:
function dropdownOnHover(){
if (window.matchMedia("(min-width: 800px)").matches) {
/* the view port is at least 800 pixels wide */
$('.dropdown').hover(handlerIn, handlerOut);
function handlerIn(){
// mouseenter code
}
function hideMenu() {
// mouseleave code
}
}
}
$(window).load(function() {
dropdownOnHover();
});
$(window).resize(function() {
dropdownOnHover();
});
The code that Tieson T. provided worked the best; however, when I resize the window, until I reach the breakpoint from any direction, the effect doesn't change. That is, if the window is loaded above 800px, the hover effect will be there, but if I make the window smaller it still remains. I tried to invoke the functions with window.load and window.resize but it is still the same.
Edit 3: I'm actually trying to create Bootstrap dropdown on hover instead of click. Here is the updated jsFiddle: http://jsfiddle.net/CR2Lw/2/
Please note: In the jsFiddle example, I could use css :hover property and set the dropdow-menu to display:block. But because the way I need to style the dropdown, there needs to be some space between the link and the dropdown (it is a must), and so I have to find a javascript solution. or a very tricky css solution, in which the there is abot 50px space between the link and the dropdown, when when the user has hovered over the link and the dropdown has appeared, the dropdown shouldn't disappear when the user tries to reach it. Hope it makes sense and thanks.
Edit 4 - First possible solution: http://jsfiddle.net/g9JJk/6/

Might be easier to selectively apply the hover, rather than try to remove it later. You can use window.matchMedia and only apply your script if the browser has a screen size that implies a desktop browser (or a largish tablet):
if (window.matchMedia("(min-width: 800px)").matches) {
/* the view port is at least 800 pixels wide */
$('.dropdown').on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
}
else{
$('.dropdown').off('mouseenter, mouseleave');
}
Since it's not 100% supported, you'd want to add a polyfill for those browsers without native support: https://github.com/paulirish/matchMedia.js/
If you're using Moderizr, that polyfill is included in that library already, so you're good-to-go.

I still don't understand how you intend to "dismiss" the dropdown-menu once it is displayed upon mousing over the dropdown element partly because there's not enough code in your question, but that's sort of irrelevant to this answer.
I think a much easier way to approach the mousenter event handling portion is not by using off()/on() to unbind/bind events at a specific breakpoints, but rather to do just do a simple check when the event is triggered. In other words, something like this:
$('.dropdown').on('mouseenter', function() {
if($('.navbar-toggle').css('display') == 'none') {
$(this).children('.dropdown-menu').show();
};
});
$('.dropdown-menu').on('click', function() {
$(this).hide();
});
Here's a working fiddle: http://jsfiddle.net/jme11/g9JJk/
Basically, in the mouseenter event I'm checking if the menu toggle is displayed, but you can check window.width() at that point instead if you prefer. In my mind, the toggle element's display value is easier to follow and it also ensures that if you change your media query breakpoints for the "collapsed" menu, the code will remain in sync without having to update the hardcoded values (e.g. 768px).
The on click to dismiss the menu doesn't need a check, as it has no detrimental effects that I can see when triggered on the "collapsed" menu dropdown.
I still don't like this from a UX perspective. I would much rather have to click to open a menu than click to close a menu that's being opened on a hover event, but maybe you have some magic plan for some other way of triggering the hide method. Maybe you are planning to register a mousemove event that checks if the mouse is anywhere within the bounds of the .dropdown + 50px + .dropdown-menu or something like that... I would really like to know how you intend to do this (curiosity is sort of killing me). Maybe you can update your code to show the final result.
EDIT: Thanks for posting your solution!

Related

Disabling swipe left and right event

I am gonna disable swipe event (exactly right and left on slider part) on website mobile view.
This is my js code.
jQuery(document).on("swipeleft swiperight", '#sample_slider', function(e) {
e.stopImmediatePropagation();
e.preventDefault();
});
This doesn't work on #sample_slider element.
Or did point wrong element for swipe?
Use :hover css property and pass pointer-events:none; style to the element this should do the trick
In your someAction() function you will need to perform this
However, as a dev to dev using the #click event like this is the dumbest way to use Vue.. but considering that there might be a need in your app for this i think my solution should help you

Disable Double Tap To Click On Touchscreen iOS Devices

So, quite recently I've been working on a website that was given me to improve and make responsive, and one of the issues that I've been faced with is that there are many elements that are clickable, with a mixture of CSS and jQuery effects for hover states.
Now, firstly I'd prefer all of these hover states to be CSS, but the main issue I'm having is that on these hover states, certain elements are changing display and visibility css properties. I did some reading, and apparently if this is the case, on touchscreen iOS devices, this causes the first 'touch' to force the hover state, and then a second click is needed to actually click the element.
I'm trying to find a solution that doesn't require lots of markup and styling changes. Preferably a fix harnessing jQuery/JavaScript would be good.
I've tried the following:
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
});
However, this has issues when the user holds their finger down on a clickable element, and drags the page to scroll. When they release their finger after dragging, the window.location is still changed.
I'll add a jsFiddle later if necessary.
Thanks in advance.
EDIT:
Here's a jsFiddle that shows the issue. http://jsfiddle.net/0bj3uxap/4/
If you tap one of the blocks, you'll see it shows the hover state, you then need to tap again to actually fire the click event.
It seems to happen when an element is hidden, and then the hover state shows the element.
Looks like I found a solution.
https://github.com/ftlabs/fastclick
FastClick fixes this issue, and removes the 300ms delay issue with some mobile browsers.
Just include the library in <script> tags, and then initiate it using jQuery, or whatever you prefer:
$(document).ready(function() {
FastClick.attach(document.body);
});
Just to explain briefly why the issue occurs:
When an element is hidden, for example when it has a CSS property of any of the following:
display: none;
opacity: 0;
visibility: hidden;
And the hover state of the hidden element then shows the element, iOS doesn't fire a click event on the first touch, it forces the hover state (to show the element). The user then needs to touch the element again for a click event to fire.
I see why this has been added, but I think I'd rather iOS didn't do this, and then developers would just need to tailor their websites to not hide content that coud be vital.
If it helps anyone else: In my case I had a very similar problem, however it wasn't simply due to a :hover style on it's own. Instead, it was due to the fact that I was using JavaScript event listeners (touchstart, touchmove and touchend) to change visibility of elements on the page (no matter where).
In my case, I was simply adding a touch class to the <html> tag in order to detect that the device was capable of touch and should always display certain elements that typically only show on hover. My fix was two fold:
Move to a >300ms delay (i.e. the amount of time mobile browsers may typically wait before determining if this was a single vs. double click). In my case, I just settled on 500ms (see #2 below for why).
I then used a cookie to temporarily retain this setting so that these elements would be visible immediately and no touch event listeners would be required on subsequent page loads (thus a delay of 500ms on the first occasion shouldn't be a deal breaker).
Example code:
In this case, using jQuery + https://github.com/carhartl/jquery-cookie (modified to support maxAge).
function initTouchSupport() {
// See if touch was already detected and, if so, immediately toggle the touch classes.
if ($.cookie('touch-device')) {
toggleTouch();
return;
}
// Be efficient and listen once and, if ever detected, flag capability and stop listening (for efficiency).
var events = 'touchstart touchmove touchend';
$body.on(events, detectTouch);
function detectTouch() {
// Detected; retain for a short while (e.g. in case this is a laptop with touch capability and they switch
// to mouse control). That way there's no delay on the next several page loads and no chance of a double-touch bug.
$body.off(events, detectTouch);
$.cookie('touch-device', true, {
path: '/',
domain: getDomain(),
maxAge: 86400 // 86400 seconds = 1 day
});
setTimeout(toggleTouch, 500);
}
function toggleTouch() {
// Swap out classes now
$html.toggleClass('no-touch', false);
$html.toggleClass('touch', true);
}
}
I had a very similar issue in IOS having to double tab buttons etc I removed all the desktop styles which included some hover styles this made no difference. I put the hover styles back in which are not used in the mobile UI. In then end the issue was a css class called
.error-message
Correction it turns out this css has been used in our UI and it was linked to a mouseover event

Preventing queues with JQuery effect() with fixed position elements

The Situation
I am using the effect() function of JQuery UI. The type of effect doesn't really matter but for the purpose of this question lets use "bounce". This effect is called when a link is clicked, so my complete example code is as follows:
$('#button').click(function (e) {
e.preventDefault();
$('#box').effect('bounce');
});
Here is a demo
The Problem
The problem I have, or more the behavior I want to get rid of, is that when you click the link multiple times in quick succession then it queues up the animations. (See the demo, click the link 10 times fast, then release and watch it continue to animate)
The Requirement
I just want to prevent effects/animations from being queued. In other words, I am looking for clicks to be ignored if the box is already bouncing. Is there anyway I can do this?
The Failed Attempts
I have already done some research, and I tried a couple of method below but to no success:
$('#box').stop().effect('bounce');
stop() just doesn't seem to have any effect in this case.
$('#box').clearQueue().effect('bounce');
clearQueue actually works in the sense that the effects don't queue, however there are side-effects which causes the layout to mess up. I assume this is because it prevents the effect from returning the styles to their defaults. It may also be related to using a fixed position for the box.
This should do the trick.
$('#button').click(function (e) {
e.preventDefault();
if( !$('#box').is(':animated') ){
$('#box').effect('bounce');
}
});
Yes you are right, clearQueue makes position changes in div but i tried that and it looks like working
$('#button').click(function (e) {
e.preventDefault();
if ($("#box").is(':animated')) {
$('#box').effect = null
}
else {
$('#box').effect('bounce');
}
});
js fiddle example
Try this:
$('#button').click(function (e) {
e.preventDefault();
$('#box').stop(true).effect({
effect: 'bounce',
complete: function() {
$('#box').removeAttr('style');
}
});
});
stop(true) stops and clears the queue immediately but when stopped, effect() leaves inline styles after completion. They just need to be removed afterwards.
The benefit of this approach is that the clicks feel a little more responsive (for the lack of a better word). The box will seem to react quickly to user's clicks.
However, if you cannot afford to simply remove the style attribute upon completion of animation, say you have previously applied inline styles on your object, you can cache them beforehand and re-apply them upon completion, which is demonstrated in this fiddle.
Hope this helps.

Make one element disappear when another element disappears

Context: I am making a small jQuery library for modals (in-window popups): https://github.com/hypesystem/d_modal.js
When creating a new modal, it is possible to also fade the page. This is done by adding a div with a semi-transparent black background.
When the modal is removed I want the "fade" to disappear as well. But not just when the modal is .remove()'d - I want the fade to disappear in the same way as the modal on any action that makes the modal disappear: fadeOut(), hide(), etc.
Here is a jsFiddle to test in (if you have any ideas): http://jsfiddle.net/n5fqS/
What I'm looking for is one solution that handles all the cases.
there are many ways of hidding elements (removing content of div, changing css "display" property, fadeOut(), hide(), etc, etc) and Jquery does not have a universal event listener that would group all these events. I think you will have to manually trigger a "hide" event as a callback function in all the places where your first div is being hidden. For example:
$(".dismiss").click(function() {
$("#div-one").hide(function(){
$(this).trigger('hide');
});
});
Then you only have to have once the event handler:
$("#div-one").on('hide', function(){
//code that hides my second div
)};
Of course, you will have to manually add the trigger every place where relevant. So its not "the one solution".
you can use jquery dialog to achieve this functionality.
The short answer seems to be: jQuery does not emit events on hide.
In order to combat this, I have used the best solution I could find, and started an open project to enable sending of the required events: https://github.com/hypesystem/showandtell.js
This should cover, at the moment, the most common use-cases. Any feedback on this is appreciated.
try like this
$(".dismiss").click(function() {
$("#div-one").hide(function(){
$("#div-two").hide('slow');
});
});

How do I show a div, but make it completely un-interactive, in Chrome

I have a <div> overlayed onto my page, and that tracks the mouse. However, on occasion the user is able to move the mouse at the appropriate speed to enter the tracking <div>. Also, this <div> will sometimes prevent the user from clicking something else, that is below/behind.
What is the correct way to visually show this <div>, without it 'blocking' or interfering with the underlying DOM, or any of them for that matter? In particular, to stop it interfering with mouse events.
Good answers to this already, one you can consider also is the css:
pointer-events: none;
Which effectively makes events act on the items below the div, not the div itself.
Support for this on IE isn't great, but it's a nice way if you either don't need IE support, or if you have the time to do it properly and include a conditional fallback.
Check out this for support info: http://caniuse.com/pointer-events
you can place above it (with higher z-index) an absolute positioned div element, with an opacity value of 0
OR
you can use jQuery:
$(function(){
$('#divId').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
});
i personally prefer the opacity approach. but that's me.
hope that helped
Yuo can try to capture the event and prevent its default behavior using
event.preventDefault();
here a pseudo code, it works without jquery
var el = document.getElementById("yourdiv");
el.addEventListener("click", action, false);
function action() {
event.preventDefault();
return false;
}

Categories

Resources