Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Touch’

Swiper is a beautiful content slider that is built for mobile and works pretty fast as it uses hardware accelerated transitions (if available).

The slider is lightweight, uses no JavaScript frameworks and has support for “touch events” whose interaction ratio can be customized.

It responds to changes in orientation, has support for vertical + horizontal sliding and comes with built-in pagination control (bullets).

Swiper

Each swipe event brings the next/prev slide but it can be set in free mode as well where the content will be scrolled as much as you swiped.

Swiper can present multiple items at once (carousel), loop infinitely and feature any HTML content.

There is an API that allows controlling the pagination and provides callbacks on major events.

It also works on desktop browsers (mouse events are accepted) and can be extended with plugins.

Lately, I was in a search for a jQuery range slider, jQuery UI’s slider widget was the first that I thought of.

It had all the features I needed: working as a single or range slider, default values and man/maxvalues. However, the smallest download size for it was still ~40kb. Too much for a slider.

Tried many others, they were good but almost each of them was missing a feature I needed (that you may not need).

jQuery Range Slider - noUiSlider

And I found noUiSlider. It had all the things I was looking for and with a size of 2.7kb.

There is support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values.

Also, it works on touch devices and can be customized with CSS completely. Just a perfect widget for any UI.

Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts.

It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too.

jQuery Swipebox

The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.

Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar)

SwipeView is a simple-yet-effective JavaScript library for creating infinite (looping) carousels.

The carousel is built for the mobile browsers and has multiple advantages for the mobile platform. It is:

  • memory conservative as it uses only three elements at any given time
  • running smooth as it takes advantage of hardware acceleration
  • bandwidth friendly with its 1.5kb minified/gzipped footprint.

It is standalone, only works for horizontal sliders, can be used for any HTML content and, as expected, there is touch support.

SwipeView

Are you looking for a slider that is completely customizable, works cross-device/browser and built with modern standards in mind? Then Royal Slider is a very good option.

Royal Slider is a jQuery plugin for displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features.

The slider is very customizable with 50+ options, 4 skins with PSD files, 9 pre-built templates (and more coming) and full CSS styling.

RoyalSlider

It works in all major browsers, the output is responsive down to mobile (touch friendly) and works fast, thanks to CSS3 animations (with JS fallback).

The slider also loads fast independently from the number of slides as there is lazy-loading (only next few items are loaded).

Royal Slider offers various options for browsing sliders including thumbnails, tabs, bullets, keyboard, prev-next buttons or swipe.

There is support for YouTube and Vimeo videos and any other providers can be added with ease.

Royal Slider

Every slider created is SEO-friendly, items can be deep-linked and it creates a low-markup to create one.

Also, it has native fullscreen support, has lifetime free support and updates.

P.S. Royal Slider is the best selling slider in CodeCanyon.

jQuery UI, the widgets library of jQuery, doesn't ship with support for touch events in any of its widgets and interactions.

Touch Punch is a small hack which brings touch events to the library by using simulated events to map touch events to their mouse event analogs.

Touch Punch

It is a plug 'n' play solution, just insert the file into your web pages and there is nothing more to setup.

The hack works in all the widgets and in most scenarios, however, considering it is a simple hack, make sure you test any complex usage.

When developing any mobile projects, it is so important to keep the size of each asset as small as possible for offering a good experience to end users.

QUOjs is a JavaScript library that is focused on mobile web projects, has a small footprint (13kb minified) and includes all the essentials.

There are functions for HTML document traversing, event handling, Ajax interactions and mobile environment detection.

It has support for all the major touch events, the API is jQuery-like and works cross-browser.

QUOjs

Hammer.js is a JavaScript library for adding touch gestures support to any website so that users can interact with them easier on touch devices.

It requires jQuery, only 2kb sized and supports tap, double tap, hold, drag and transform.

Hammer.js

The library is implemented pretty easily:

  • just bind Hammer.js to a container HTML element
  • every touch event performed on that element returns a callback with an array of details including:
    • event
    • position
    • touches
    • scale
    • rotation

For drag gestures, it can also return extra info like the angle, direction and distance.

Hammer.js works -almost- on all modern browsers and, to sum up, "you can touch this" : ).

Desktop users are experienced enough to know how they can interact with a website, use shortcuts and get the most out of the browser.

For touch-enabled interfaces, things are different. There is a new question: "which gestures are supported by the app/website?".

Cue is a free (public domain) gestural icon system that aims to build a standard visual language of touch-based interactions.

Cue - Gesture Icons

There are icons for actions like swipe, drap, touch, tap and hold, spread and more.

Each icon comes in a labeled and unlabeled version and the set is in .PNG, .SVG Omnigraffle Stencil and InDesign formats.

Kivy is an open source library for creating applications that work in multiple platforms using the same source code.

The library focuses on innovative user interfaces, like multi-touch apps, and can natively use most inputs protocols + devices like WM_Touch, WM_Pen, Mac OS X Trackpad and Magic Mouse, Mtdev, Linux Kernel HID, TUIO. There is also a multi-touch mouse simulator included.

Kivy

It is built with Cython (C extensions for Python) and, in order to create apps, Python knowledge is required.

The platforms currently supported are Linux, Windows, Mac OS X and Android.

Kivy has functions to handle animation, caching, gestures, drawing and much more. There are also many built-in user interface elements like button, camera, grid, slider or tree view.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com