I have a spiffy css toggle control which I am trying to add swipe support for and I am using the TouchSwipe plugin. The problem is that I don't know how to only affect the element that called it. I have a bunch of toggles on the page and right now they are all triggered instead of just the one I and swiping on. (touchswipe plugin: http://labs.rampinteractive.co.uk/touchSwipe/demos/)
For example, this code:
/* Toggle */
$('.toggle2').click(function() {
/* code which switches between toggled on and toggled off */
}).disableSelection().swipe({
_this: $(this),
swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData){
if ($('.toggle2').hasClass('on'))
$('.toggle2').trigger('click');
},
swipeRight: function(event, direction, distance, duration, fingerCount, fingerData){
if ($('.toggle2').hasClass('off')) alert('n');
$('.toggle2').trigger('click');
},
threshold: 0
});
works, but it triggers ALL of my toggles on the page. I tried changing $('.toggle2') to $(event.target) to no avail. What am I doing wrong?
Although you're not sharing much of that in your question, looks like all your other toggles have toggle2 as their class (<div class="toggle2"></div>). Add another one to the one you're trying to swipe (<div class="toggle2 toggle-swipe"></div>), and use that for your swipe script:
$('.toggle-swipe').click(function() {
/* code which switches between toggled on and toggled off */
}).disableSelection().swipe({
// ...
});
Related
Introduction
I'm using Semantic-UI's sidebar functionality, which gives you a button that triggers a sidebar that pushes the content from the left (in this case).
I want to unfold that same sidebar by hovering with the mouse on the left side. I realize there are several ways to do it (as these often do. Maybe just checking the X position of the mouse would work but that's beside the point); I chose to create a transparent div on the left side and make its :hover pseudo-class to trigger the sidebar:
// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
// hover transparent div to trigger the sidebar too:
$('.sidebar-trigger').hover(function() {
$('.ui.sidebar').sidebar('show')
});
// hide() and show() the sidebar accordingly to use the sidebar:
$('.ui.sidebar').sidebar('setting', {
onShow: function() {
$('.sidebar-trigger').hide();
},
onHidden: function() {
$('.sidebar-trigger').show();
}
});
Problem
Now, it all works except for one occasion: when you don't stop moving the mouse as the sidebar opens. I've looked at $(document).on('transitionend', function(event) { ... } and that mouse effectively prevents the transition to finish.
Resources
I've put a blue background on my .sidebar-trigger and made a small video/gif so as to be clearer.
I moved the mouse like a crazy creature but with natural gestures the problem occurs as well.
I'm using Semantic-UI's guide on this thing: http://semantic-ui.com/modules/sidebar.html#/settings (I've also tried onVisible and onHide with no luck)
This is a OSX Yosemite 10.10.3 running Chrome 45.0.2454.101 (64-bit)
jsfiddle with the problem at hand
PS: It seems it might be an OSX Chrome bug?
I would try using one and mouseover:
$('.sidebar-trigger').one('mouseover', function() {
$('.ui.sidebar').sidebar('show')
});
Then, when it has finished animating, reattach the event:
$(document).on('transitionend', function(event) {
$('.sidebar-trigger').one('mouseover', function() {
$('.ui.sidebar').sidebar('show')
});
});
I think what is happening is that the hover event is getting called multiple times - every time the element is hovered, then goes over a child element, and then goes back over the hover element, and things are getting mixed up at some point. So you need to only call show if it's not already shown.
Here is a working example: Fiddle
I believe when the element was hovered, it was adding a classes 'uncover' and 'visible', and another called 'animating' which wouldn't fire until the mouse stopped moving. I changed the jQuery slightly to only add classes 'uncover' and 'visible', and it still animated okay. However, the body was pushing right too far by 175px, so I had to edit the class that was causing that (noted below) from 260px to 85px. This DOES get the menu acting properly though from my understanding.
$('.sidebar-trigger').mouseenter(function() {
$('.ui.sidebar').addClass('uncover, visible');
$('body').addClass('mleft175');
});
$('body').click(function() {
$('.ui.sidebar').removeClass('uncover, visible');
$('body').removeClass('mleft175');
});
and then add overriding class
.ui.visible.left.sidebar ~ .pusher
{
-webkit-transform: translate3d(85px, 0, 0);
transform: translate3d(85px, 0, 0);
}
Right now it is set to hide the menu when the body is clicked. Alternatively you can hide it when the mouse leaves the sidebar menu:
$('.ui.sidebar').mouseleave(function(){
$(this).removeClass('uncover, visible')
});
Ok, my first answer was (of course) way too much work for what it really needed. The onVisible seems to work perfectly. Was that not working for you? Demo HERE
Simply change 'onShow' to 'onVisible' in your sidebar setting:
$('.ui.sidebar').sidebar('setting', {
onVisible: function() {
$('.sidebar-trigger').hide();
},
onHidden: function() {
$('.sidebar-trigger').show();
}
});
As shown on the Semantic UI site, the onVisible fires when the animating starts. The onShow fires when the animating finishes. So what you were doing was hiding that blue / transparent bar when the animation was finally done (the .animating class noted in my previous answer), as opposed to when it starts. If you need further explanation please let me know.
I am using bootstrap carousel in my website. But I want its functionality little different. I want slides to change on mouseScroll (each slide on each time mouse scrolled).
How can I achieve it with Bootstrap Carousel?
$('#myCarousel').carousel({
interval: 3000
});
jsfiddle
$('#myCarousel').carousel('next') slides to next item as documented.
So you can bind scroll event to do that:
$('#myCarousel').bind('mousewheel', function() {
$(this).carousel('next');
});
Edit: you can get mouse wheel events and make carousel move to next or previous slide:
$('#myCarousel').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
$(this).carousel('next');
} else {
$(this).carousel('prev');
}
});
updated your jsfiddle
You can also bind it to all carousels instead of a specific single one by using a class selector: Use $('.carousel').bind(...) for that. If your requirement is to have all your carousels support the mouse wheel, not just a specific single one, the class selector is more convenient.
I'm using TouchSwipe jQuery plugin for mobile version of my site. I need to fire multiple click-events on one swipe, something like - on every 15px of swipe - one click. I've googled, but found no solution.
Thing is - I'm using carousel plugin for Joomla (sigplus), that, unfortunately, doesn't support finger swipe. I'm trying to emulate swiping function by making TouchSwipe pressing carousel buttons for user on swipe. At the moment I have such code:
jQuery(function($) {
$(".s2").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$( '.boxplus-next' ).click();
},
swipeRight:function(event, direction, distance, duration, fingerCount) {
$('.boxplus-prev').click();
},
triggerOnTouchEnd:false,
threshold:15
});
});
It works fine, but scrolls only one image in carousel per touch. Maybe it's possible to restart function after triggering?
Thanks
P.S. Sorry for my English
To trigger continuous events, you should use the swipeStatus event instead: http://labs.rampinteractive.co.uk/touchSwipe/demos/Swipe_status.html
You can then trigger next or back, based on the distance.
See this answer for more info: Multiple swipe events on an element with TouchSwipe
I am trying to use Matt Bryson's Jquery touchSwipe plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin) to advance through a group of radio buttons to show/hide content on a page.
I really just need it to go to the next radio button on left swipe and the previous radio button on right swipe, and am trying to generalize as much as possible so that it works with many button groups on the same page.
Ideally I'd like to attach it to the name of the button group and not specific IDs or Classes associated with the thing being displayed, but I can't seem to get it working. If anyone has any ideas about how this might be achieved I'd really appreciate it!
My code is below. The "you swiped..." line that's commented out is the original event from the demo and that does work...
$(function() {
//Enable swiping...
$("#log1").swipe( {
//LEFT SWIPE
swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
//$(this).text("You swiped " + direction );
$("input:radio[name=log1-slab-selector]").next(":checked")
},
//RIGHT SWIPE
swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
//$(this).text("You swiped " + direction );
$("input:radio[name=log1-slab-selector]").prev(":checked")
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
I found this related article (Select next/prev radio button with external button) which helped put me on the right track, and encouraged me to wrap my buttons in a ul&li.
Unfortunately it still wasn't working, but I figured out that there was just a non semantic DIV that was getting in the way of targeting the right li in the tree. DAR! Once everything was moved inside the li it worked great!
This code fixed the issue for me:
$(function() {
//Enable swiping...
$("div#log1").swipe( {
//LEFT SWIPE
swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
$(this).find('li:has(input:checked)').next('li').children('input').prop("checked", true);
},
//RIGHT SWIPE
swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
$(this).find('li:has(input:checked)').prev('li').children('input').prop("checked", true);
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:25
});
});
Here is a js fiddle showing the problem.
http://jsfiddle.net/4CLqY/4/
The swipe works fine on the red box but not on the new blue box which is created after pressing the new button. (swipe across red box with mouse for change)
Sorry if this a dupe but I have not found any solution online which solves my particular issue.
The code is from the touchSwipe site
javascript
$(function() {
//Enable swiping...
$(".test").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount) {
$(this).text("You swiped " + direction );
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
$(document).on('click','button',function(){
$('<div class="test" id="test2">Swipe me</div>').appendTo('body');
});
HTML
<div class="test">Swipe me</div>
<button>New</button>
You can reattach the swipe event to the new elements, because they don't exist when you add the initial event.
Try this fiddle.
I added a addSwipeTo function that takes a selector, and adds the event to the elements it matches.