Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Stars: ✭ 8,518 (+3320.88%)

Mutual labels: hybrid-apps, cordova

X Ray

X-Ray is a script that lets users toggle password visibility in forms.

Stars: ✭ 40 (-83.94%)

Mutual labels: no-dependencies, vanilla-js

Mailtoui

A simple way to enhance your mailto links with a convenient user interface.

Stars: ✭ 162 (-34.94%)

Mutual labels: no-dependencies, vanilla-js

Slider

Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap

Stars: ✭ 2,046 (+721.69%)

Mutual labels: swipe, touch

Metro Ui Css

Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!

Stars: ✭ 6,843 (+2648.19%)

Mutual labels: no-dependencies, html5

Vanilla Emoji Picker

Modern emoji picker. Super light 2kb gzipped, simple and no frameworks 😻

Stars: ✭ 20 (-91.97%)

Mutual labels: no-dependencies, vanilla-js

View All Similar Projects ➔

swiped-events

A 0.7k script that adds swiped-left, swiped-right, swiped-up and swiped-down events to the DOM using CustomEvent and pure JS. Based on the StackOverflow thread Detect a finger swipe through JavaScript on the iPhone and Android

Usage

Add swiped-events.min.js to your page and start listening for swipe events. Events bubble, so you can addEventListener at document level, or on individual elements.

swiped

document.addEventListener('swiped', function(e) {
  console.log(e.target); // element that was swiped
  console.log(e.detail.dir); // swipe direction
});

swiped-left

document.addEventListener('swiped-left', function(e) {
  console.log(e.target); // element that was swiped
  console.log(e.detail); // event data { dir: 'left', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
});

swiped-right

document.addEventListener('swiped-right', function(e) {
  console.log(e.target); // element that was swiped
  console.log(e.detail); // event data { dir: 'right', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
});

swiped-up

document.addEventListener('swiped-up', function(e) {
  console.log(e.target); // element that was swiped
  console.log(e.detail); // event data { dir: 'up', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
});

swiped-down

document.addEventListener('swiped-down', function(e) {
  console.log(e.target); // element that was swiped
  console.log(e.detail); // event data { dir: 'down', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
});

Configure

You can optionally configure how swiped-events works using the following HTML attributes:

Attribute	Description	Type	Default
`data-swipe-threshold`	Number of pixels a user must move before swipe fires	integer	20
`data-swipe-timeout`	Number of milliseconds from `touchstart` to `touchend`	integer	500
`data-swipe-ignore`	If true, swipe events on this element are ignored	boolean	false

If you do not provide any attributes, it assumes the following:

<div data-swipe-threshold="20"
     data-swipe-timeout="500"
     data-swipe-ignore="false">
     Swiper, get swiping!
</div>

To set defaults application wide, set config attributes on a parent/topmost element:

<body data-swipe-threshold="100" data-swipe-timeout="250">
    <div>Swipe me</div>
    <div>or me</div>
</body>

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

Development

The project includes everything needed to tweak, including a node webserver. Run the following, then visit http://localhost:8080 in your browser.

You can test on a desktop using Device Mode in Google Chrome.

git clone https://github.com/john-doherty/swiped-events
cd swiped-events
npm install
npm start

Update .min files

To create a new version of the minified swiped-events.min.js file from source, tweak the version number in package.json and run the following:

npm run build

Star the repo

If you find this useful, please star the repo. It helps me priorities which OSS issues to tackle first 🙌

History

For change-log, check releases.

License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 249

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (4) 🔗