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

When I was searching for these 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.

• Demo
• Enlarge
• Reload
• New window

Quick tip: 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).

• iPhone: QR Reader
• Android: QuickMark
• Blackberry: QR Code Sanner Pro

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

Pull-to-refresh

This 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

iScroll 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

Flexslider

Flexislider 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

Swipe Gestures

This little jQuery plugin detects 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

JavaScript Touch 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)

VideoJS

VideoJS 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)

Audio.js

audio.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

Image 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.

Mobile Pagination

The 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

MiniApps Shake, Touch and Slider Plugins

These 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.

Diapo Slideshow

Diapo 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

Author

Phong Thai is a Web Developer, Web Coder for 20 years with PHP, JavaScript, CSS. He is the creator of JavaScriptBank.com - provide thousands of free JavaScript code examples, web development tips and tricks, helpful blogging guides.

Follow him on twitter@js_bank or connect with him on facebook@jsbank if you want. His websites for your knowledge: javascriptON.com, inOneSec.com, www.gomymobi.com

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New