Disabling swipe left and right event - javascript

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

Related

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

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!

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;
}

Swipe event that work with live()?

I have elements on a page that are loaded dynamically, but I also need to be able to swipe on these divs.
I searched for jQuery swipe events, and found touchSwipe. This is nice because it's cross browser, but it does not allow me to use .on() or .live(), so the dynamic elements aren't accounted for.
Here's an example of what I mean, http://jsfiddle.net/wUkZq/
The only way I could get swiping to work on the dynamic elements was to attach the swipe event to the parent. Problem is, I don't want the parent to be swipeable. In the example, if you create a few elements with the a link, then try and swipe within .content, it will return the text of all elements, which is not what I'm wanting, as swiping should not be allowed in the parent.
Is there a better way to do this, or a better plugin? Ideally, I'd like to not use a plugin, but pure JS, but I can't find a good example of calculating when the person is actually swiping instead of some other event (i.e. scrolling).
How about simply assigning each swipeable element a specific class, then checking for that class in the swipe event handler? It's quite a common trick for such cases, I suppose. For example:
swipeLeft: function(event, direction, distance, duration, fingerCount) {
var $target = $(event.target);
if (! $target.hasClass('sw')) {
return false;
}
alert($target.text());
}
Here's a JS Fiddle illustrating the concept.

Trigger a click when handling a focus event

I'm trying to determine why something like this doesn't work:
$('a').focus( function() {
$(this).click();
});
Background:
I'm trying to create a form in which tabbing to various elements (e.g. textboxes, etc.) will trigger links to anchors in a div, so that relevant text is scrolled into view as the form is being filled out.
Is there a better way to do this?
$('yourInput').on('focus', function(){
$('yourAnchor').trigger('click');
});
should work just fine, however you are likely to loose focus on the input field as the new element has been 'clicked'. I would recommend using the jQuery scrollTo plugin instead. That would enable you to do something like this:
$('yourInput').on('focus', function(){
$('messageArea').scrollTo('yourAnchor');
});
This was scrolling occurs in a nice animated fashion and without triggering browser events.
Part of the reason the code you posted may be failing is that, 1. anchors do not always have a focus event, 2. clicking it right after focusing may be redundant and not causing the change you are looking for.

Preventing cursor change on link click in Chrome

Clicking on a link in Chrome (not Safari or Firefox) changes the cursor from pointer to arrow. Can this behavior be prevented? I.e., is it possible to still have the pointer after clicking, but while the cursor is still hovering over the link?
EDIT: Okay so I've done a little more testing. First of all, the only reason anyone would want the cursor to remain as a pointer after clicking on a link is if the link does not actually load another page but rather fires a JS event instead.
Test
// JQuery
$("a").click(function(event) { event.preventDefault(); }
With the above code, event.preventDefault (or returning false) will allow the cursor to remain a pointer after click. This will suffice for most uses, namely triggering a DOM manipulation and/or AJAX request.
The problem is with history.pushState():
Test
// JQuery
$("a").click(function(event) {
history.pushState(arg1, arg2, url);
event.preventDefault(); return false;
}
Here the pointer DOES change to an arrow. Any ideas on how to stop that from happening?
This sounds like a CSS issue. Look for code like the following:
::-webkit-any-link:hover,
::-webkit-any-link:active { cursor: pointer; }
This will affect all links (like a[href]) but only in WebKit. Perhaps something else is preventing Safari from doing this.
UPDATE GIVEN EXPANDED QUESTION:
Now that we know more about the problem, namely that the cursor changes back to a pointer after clicking on an element fires off a javascript, I would say that this is a Chrome bug.
Please file a report at http://bugs.chromium.org/
You could explicitly set your target element's CSS to include --
#element {
cursor: pointer;
}
See http://www.quirksmode.org/css/cursor.html#note if you have to support IE 5.5.
In the meantime I'm thinking this desperate workaround:
Browser detect Chrome
Apply this tutorial

Categories

Resources