Mobile Development

11 Javascript Plugins Optimized for Mobile Devices (With QRCode for Quick View!)

Written by Kevin Liew on 30 Aug 2011
42,536 Views • Shares
7 comments

Introduction

The popularity of mobile devices has increased dramatically within these few years. We have responsive website that transform itself to different screen size and now we have a bunch of javascript plugins built and optimized for mobile as well.

When I was searching for resources, I was having this issue that, whenever I want to view it in my mobile, I need to type the URL manually! I got this inspiration from Cubiq (one of the cool mobile optimized plugin developers), they use QRCode for the demo link, and I just have to scan it with my mobile phone! Saved me heaps of time. So, don't worry, I have put QRCode in every single demo, feel free to play it with your mobile phone:

RECOMMENDED: To see the demo on your mobile device, you can installe QR Reader, so you don't have to type in URL manually (if you're viewing this page with desktop/laptop).

In case you're wondering how I generate QRCode, I use - Kaywa QRCode Generator

  • Flexslider FlexsliderFlexislider is the new breed of slider which adapt itself with the width/size of the webpage. Cut it short, it's responsive. It's free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive!
    • Simple, semantic markup
    • Supported in all major browsers
    • Slide and Fade animations
    • Highly customizable slider options
    • Directional, keyboard, and touch swipe navigation
    • Ultra Lightweight (5kb minified)
    • Use any html elements in the slides
    • Built for beginners and pros, alike
    • Free to use under the MIT license
  • Mobile Pagination Mobile PaginationThe Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you'll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard. !
    • touch swipe navigation
    • Uses browser's history, bookmarking is supported
    • Supports Back and forward buttons
  • Pull-to-refresh Pull-to-refreshThis is a prototype/proof of concept which gives a good idea of how to implement pull to refresh in javascript. It uses no javascript libraries so you could easily port it over to your favorite. I haven't tried this but it seems to be a rough implementation. Worth to mention as you will able to know how to build and perhaps enhance it to perfection.
  • iScroll iScrolliScroll is the ultimate scrolling plugin you need for your mobile website. It's a complete rewrite and now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.
    • Pinch/Zoom
    • Pull up/down to refresh
    • Improve speed and momentum
    • Snap to element
    • Customizable scrollbars
  • MiniApps Shake, Touch and Slider Plugins iniApps Shake, Touch and Slider PluginsThese neat little plugins works on mobile web browsers using device acceleromter and touch-cable devices. WKShake is quite a cool implemetation and trigger an event once "shake" is detected, it works just like the undo feature in iOS deveices.
  • VideoJS VideoJSVideoJS is a HTML5 video player that compatible with wide arrray of platforms. It degrades gracefully back to flash player if there is an unsupported source.
    • Free & Open Source
    • Lightweight. NO IMAGES USED
    • 100% skinnable using CSS
    • Library independent
    • Easy to use
    • Easy to understand & extend
    • Consistent look between browsers
    • Full Screen & Full Window Modes
    • Volume Control
    • Forced fallback to Flash (even when there is an unsupported source)
  • Swipe Gestures Swipe GesturesThis little plugin detect swipe gesture. For example, you can make a 400x400px div with swipe gesture (left or right) and execute an event when the correct gesture is detected.
  • Touch Gallery Touch GalleryTouch-gallery brings the look and feel of native photo-viewing apps to your mobile browser. It is a lightbox gallery with touch support. For some reason, it works a little bit too slow
    • Fullscreen photo gallery for touch-devices
    • Optimized for Mobile Safari on the IPad of iPhone 4.
    • Work on Desktop Safari, Firefox 4, Opera and Chome. Limited support for IE (no transition)
  • Audio.js Audio.jsaudio.js is a drop-in javascript library that allows HTML5's tag to be used anywhere. It uses native where available and an invisible flash player to emulate for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.
  • PhotoSwipe PhotoSwipeImage gallery for mobile and touch devices. iPhone, iPad, Android, Blackberry 6 and Desktop all supported. PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.
  • Diapo Slideshow Diapo jQUery SlideshowDiapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation). Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing, jQuery HoverIntent, jQuery Mobile
    • Highly configurable
    • Support images, videos and complex HTML content
    • 20++ transition effects
    • Configuration for Mobile Devices - mobileNavigation, mobileNavHover, mobilePagination, mobileAutoAdvance
    • Open source MIT license
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

7 comments
Phong Thai @JavaScriptBank.com 5 years ago
wow, good ideas, thanks
Reply
eQRoeil 5 years ago
thanks for these resources.
iscroll doesn't work with forms

thanks for the qr codes
next time you can use extensions with chrome ( https://chrome.google.com/webstore/detail/bcfddoencoiedfjgepnlhcpfikgaogdg ) or firefox : you can create a qrcode in one click with the url of the website you are visiting... useful when there isn't a qr code.
Reply
darryl 5 years ago
Why the hell are there qcodes on all your images, are you mad?
Reply
eko 5 years ago
dude, you didnt read the article did ya? the purpose of qrcode is to save your time typing url on your phone. get it?
Reply
neu 5 years ago
lol need to read it all clear before drop any comment. btw thanks for putting this all together in one place.

neu
wpthemeslabs.com
Reply
airtonix 5 years ago
google googles is actually the better qrcode reader on android and iphone
Reply
David Maxey 3 years ago
I would absolutely love to read a recently updated iteration of this article about mobile responsive js code for devices. Particularly because within the 2 years since this article was released, many major improvements have been made, and some things have been declared no longer necessary. Willing to share and read the next version!!
Reply