We Keep Coding

How to implement touch event in javascript that can be used as scroll on desktop?

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

Open navigation drawer on swipe (Material Design Lite)

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();

How do I get the TouchSwipe event target

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({
// ...
});

Adding swipe event to dynamically loaded content with jquery

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.

Mouse Scroll Events

I'm working on some code that detects when you are scrolling the mouse up or down. I want the user to scroll left and right, instead of up and down. My code detects the mouse movements and whether it is up and down. My question is, is there code in jQuery or Javascript that allows the user to scroll left or right based on when an event happens, aka the mouse scrolling up or down?

jQuery.mousewheel + jQuery.scrollTo.
.mousewheel(function(e, d, dx, dy) {
  $(this).scrollTo((dy<0?'+':'-')+'='+10*Math.abs(dy)+'px', 0, {axis: 'x'});
e.preventDefault();
});​
Demo.

Tie a function to your user mouse up movement and use jQuery's scrollTo plugin. Here's a tutorial detailing it: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Hope this helps!