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.
Related
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
Background:
I'm writing a component that opens up a sub-menu on click. I can't know where this component will be placed on the page or how far it will be nested in areas that may have the overflow property set.
Given that the overflow may clip the sub-menu I am instead making the sub-menu itself be attached to the body giving it an absolute position and linking it via code to the original component. This takes care of the overflow issue.
Problem:
However if a user scrolls the sub-menu remains in place, rather than moving with its linked component, so I need to be able to listen to any and all scroll events that occur on the page so I can reposition the sub-menu appropriately.
If there's an easy way to listen to all scroll events or if there's another better way to do this component I would appreciate any input.
I've played around with JSFiddle and set up a sandbox but I haven't had any success nor have I found an answer on this site or anywhere else for that matter; though perhaps I was using the wrong search terms, I can't imagine that I'm the first to have this question.
EDIT
To address the close vote, I'm not asking help to debug an issue without providing code nor am I asking something that won't help anyone in the future. I'm asking how I would go about listening to all event of a certain type not matter where the may occur, which I find globally applicable, though perhaps that's subjective.
EDIT
$(window).on('scroll', function(){ /**/ });
is not an option as it only listens to the window scroll, not any nested scrolls.
$('#ex1 #ex2').on('scroll', function(){ /**/ }); is not an option as it requires the person who is implementing the code to be aware of any current or possible future areas on the page that may scroll.
You should be able to attach a document-level listener with a third parameter of true to capture the scroll events on all elements. Here's what that looks like:
document.addEventListener('scroll', function(e){ }, true);
The true at the end is the important part, it tells the browser to capture the event on dispatch, even if that event does not normally bubble, like change, focus, and scroll.
Here's an example: http://jsbin.com/sayejefobe/1/edit?html,js,console,output
You need to see whether scroll is happening to window level or to an element level. Usually in your case '*' should suffice.
$('*').scroll(function() {
alert('scroll');
});
Here is updated link: http://jsfiddle.net/wAadt/1
How about listing on all elements and the window?
$('*').add(window).scroll(function() {
console.log('scroll');
});
The best way to do it would be to find out which elements are scrollable, then attach listeners to them. You could run this function on any page change to make sure you've always got all the scrollables.
This is a benefit over using listeners on every element (as the other solutions would do) in terms of performance: every time the page updates so do the listeners. With lots, this quickly affects performance and memory use.
The updated fiddle: http://jsfiddle.net/ArtOfCode/wAadt/8/
The code:
$("*").each(function() {
if($(this).css("overflow") == "auto" || $(this).css("overflow") == "scroll") {
$(this).scroll(function() {
console.log("scroll");
});
}
});
(thanks to #pebbl for the help)
You could then wrap this in a function and run it on change:
function addListeners() {
$("*").each(function() {
if($(this).css("overflow") == "auto" || $(this).css("overflow") == "scroll") {
$(this).css('border', '1px solid red').scroll(function() {
console.log("scroll");
});
}
});
}
$("body").on("change",function()
addListeners();
}
Admittedly it is a bit convoluted but it addresses the issue with as few event listeners as possible.
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;
}
Hi I have a dynamically create table which acts as a pick list using check boxes. I Want these check boxes to be mutually exclusive. So upon checking a box I need to clear any other checked boxes.
$(document).on("keydown", "#list_Instructors input.allocate",function(event){
alert("hit");
$("#list_Instructors input.allocate").removeAttr('checked');
$(event.target).attr('checked', 'checked');
});
This sort of works but there is a huge delay between clicking and anything happening which is no good. I have tried all sorts of combinations with no success.
Is there is simple explanation as to why this is creating a delay.
Your problem is you bind on method for whole DOM which is really BAD.
So always try to bind that to the closest div (closest parent element) which your controls are exist.
And second thing is always cache your selectors for better performance.Like below
var dataTable=$('#dataTable');
dataTable.on("click", function(event){
alert($(this).text());
});
About Event performance from Jquery API says like below.
Attaching many delegated event handlers near the top of the document
tree can degrade performance. Each time the event occurs, jQuery must
compare all selectors of all attached events of that type to every
element in the path from the event target up to the top of the
document. For best performance, attach delegated events at a document
location as close as possible to the target elements. Avoid excessive
use of document or document.body for delegated events on large
documents.
What you might be seeing is that until the alert box is dismissed, the code afterwards is not executed. The alert command is a blocking one.
Perhaps you can use console.log() for debugging purposes of this feature. This will not block your code and it will be executed on the keydown event.
You need to use $(this) instead of going through another lookup. Also as stated above try to bind to the closest parent element if possible, for example a container div. With that said this should speed you up a bit:
$(document).on('keydown', '#list_Instructors input.allocate', function (event) {
//alert("hit");
console.log('hit');
$(this).removeAttr('checked');
$(event.target).attr('checked', 'checked');
});
But you should try to replace document with a container div or another parent element
I would like to know if there is a jQuery event that I can use to determine when a particular DIV's top property has changed.
For instance, I have invisible content above a DIV. When that content becomes visible, the DIV is shifted down. I would like to capture that event and then use the offset() function to get the X/Y coordinates.
The easy answer is that there are no events in the DOM for detecting layout updates.
You have a couple options the way I see it:
Poll, nasty but it may work depending on your update frequency requirements.
Tap into whatever event causes the invisible DIV to change size and do whatever you need to do in that handler
I shall correct myself.
I took a look at the DOM and noticed the DOMAttrModified event and found this JQuery Plug-In that you might be able to leverage to do what you want.
As the article mentions, it works great in IE and Firefox but seems to have problems in WebKit.
I thiiink you should be able to do:
$(document).ready( function (){
$("#mydiv").bind("movestart", function (){ ...remember start position... });
$("#mydiv").bind("moveend", function (){ ...calculate offsets etc... });
});
$("#someId").resize(function () {
// your code
});