I'm using Material Design Lite to create a UI for an app in a web view however I have come across a problem where I can't deploy the navigation drawer on swipe.
I am using this jquery code to recognise the swipe event
$(function() {
$("#test").swipe( {
//Generic swipe handler for all directions
swipeRight:function(event, direction, distance, duration, fingerCount) {
$(this).text("Event Triggered" );
},
});
});
From here I'm not sure how to open up the navigation drawer. I would prefer to have the entire screen "swipeable" especially the left edge. How can I go about opening the navigation bar when this swipe handler is triggered?
I was trying to add this effect in the demo material design lite, http://www.getmdl.io/templates/dashboard/index.html. So the solution I found was to simulate the click event of the hamburger button, through the class "mdl-layout__drawer-button" that is generated by material design lite.
$(function() {
$("#test").swipe( {
//Generic swipe handler for all directions
swipeRight:function(event, direction, distance, duration, fingerCount) {
$(".mdl-layout__drawer-button").click();
},
});
});
To open/close sidenav document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
Related
I have animation with ScrollMagic library and I am also using GSAP. This is description of animation on scroll in steps. Every number is one scroll:
Add class overflow-hidden to body, to disable scrolling.
Move credit-cards
Move remove some images
Start doing transform: translate(x,y) rotateZ(zdeg)
Stop scrolling and make image that was translated sticky
So this works good with mouse on mousewheel event. The question is:
What is the best way to implement touch scroll with very same effect when user comes from iOS or Andorid. (When user comes to my website from android, iPhone, iPad etc.)
I know that there is touchmove event.
var image = document.getElementById('image-phone');
if(step == 1){
//do first step
}...
//mousewheel event
window.addEventListener('mousewheel', function (e) {
//this is implemented
});
//touchnmove event
window.addEventListener('touchmove', function (e) {
//should I use this event
});
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({
// ...
});
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.