background preloader

Swipe JS - a lightweight mobile web slider

turn.js - The page flip effect for HTML5 Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. Let's code <div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div></div> Features ✓ Works on iPad and iPhone. ✓ Simple, beautiful and powerful API. ✓ Allows to load pages dynamically through Ajax requests. ✓ Pure HTML5/CSS3 content. ✓ Two transition effects. ✓ Works in old browsers such as IE 8 with turn.html4.js Requirements jQuery 1.3 or above. Browser Support Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8 Devices ✓ All iOS (iPad, iPhone, iPod) ✓ Android (Chrome for Android) Improvements Turn.js 4 includes a set of significant performance improvements on its core. Complements Support About

Responsive Carousel Project: Now Open Source Posted by Scott on 08/09/2012 Topics: javascript jQuery mobile progressive enhancement In our responsive client work, we frequently find ourselves in need of a carousel component that is lightweight, fluid in layout, usable with different input modes (mouse, keyboard, touch), and extensible to the particulars of each implementation. The Responsive Carousel project is available on Github. How-to To use the responsive carousel, just reference the following required CSS and JS files, and add a class of carousel to any element in your page that contains a series of sibling elements: With the default build, slides switch immediately with "Prev" and "Next" buttons. Extensions & Demos If you’d like to create a build that includes certain extensions, your can add them to the JS files listed under concat in the /grunt.js file, and run grunt from a command line (you’ll need Grunt and Node.js installed on your machine for this to work). Additional information Issues, Ideas, and Contributions

Zoomooz.js Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on. You can also add some additional attributes for tuning the animation as data fields of the element: <div class="zoomTarget" data-targetsize="0.45" data-duration="600">This element zooms when clicked on. Target 1 Target 2 Target 3 Target 4

Getting Started Installation Later is available through both npm and bower for easy installation. The installation includes all of the files that you will need to use the library. Node.js is required for building, testing, and benchmarking the library. Using npm: $ npm install later Using bower: $ bower install later If you would prefer, you can also download the source along with compiled versions of the library in a single zip file. Download Example usage Later works in both the browser (IE7+, FireFox, Chrome, Safari) and Node.js environments. Node Example var later = require('later'); var sched = later.parse.text('every 5 mins'), occurrences = later.schedule(sched).next(10); for(var i = 0, i < 10; i++) { console.log(occurrences[i]); } Browser Example <script src="later.min.js" type="text/javascript"></script><script type="text/javascript"> var sched = later.parse.text('every 5 minutes'), occurrences = later.schedule(sched).next(10); for(var i = 0, i < 10; i++) { console.log(occurrences[i]); } </script> License

Backbone-relational Tutorial - Nested Models With Backbone.js Introduction Backbone.js Backbone.js allows to implement the whole MVC pattern on the client, leaving the server to do what he knows best: exposing a set of well-defined REST interfaces, which the client queries when he needs to fetch or update some information. No need to split the HTML rendering between the server templates and the client-side javascript. It's not only cleaner, it's also an excellent architecture to make responsive applications. No full page reload - the server sends a static HTML file upon the first request, then the JS client handles the interaction with the user, only remodeling the portions of the DOM that changes between pages. Backbone-relational However, when I recently started to learn about Backbone, I realized it doesn't help to handle relationships between models. If you're reading this, you've probably found out about backbone-relational after reading a few threads. Scope of the tutorial Warning: I'm new to Backbone, so don't expect a definitive resource. View

CLNDR.js How does it work? CLNDR takes your template and injects some data into it. The data contains everything you need to create a calendar. Here's what you get: Most notable is the days array, which contains an entire grid. <% _.each(days, function(day) { %><div class="<%= day.classes %>"><%= day.day %></div><% }); %> Automatic Mouse Events CLNDR looks for next and previous buttons in your template. <div class="clndr-controls"><div class="clndr-previous-button">‹</div><div class="month"><%= month %></div><div class="clndr-next-button">›</div></div><% _.each(days, function(day) { %><div class="<%= day.classes %>"><%= day.day %></div><% }); %> Event Sorting CLNDR takes an array of event objects and weaves them into the days array in your template. If you're looking to get all the events for the month in one array, you've got eventsThisMonth as well.

35 Great jQuery Calendar and Date Pickers Plugins With jQuery Calendar and Date Pickers it is quite simple to add cool calendar features to nearly any website. jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 41% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. I believe that jQuery is the best JavaScript library because it’s easy to use, flexible and has a lot of tutorials and plugins allowing you to integrate nearly any front end function into your site. Implementing a calendar in the web application is also made easy when using jQuery event calender and date picker plugins. Event calendars and date pickers are really useful for web applications and is a good way to communicate any kind of event relevant to the site or business publishing it. jQuery is also useful in many other areas and in particular jQuery carousel plugins can give a website a facelift. 1.

ECMAScript 5 compatibility script for older browsers Stellar.js - Documentation Getting Started Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The first step is to run .stellar() against the element: // For example: $(window).stellar();// or: $('#main').stellar(); If you're running Stellar.js on 'window', you can use the shorthand: $.stellar(); This will look for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls. Mobile Support Support in Mobile WebKit browsers requires a touch scrolling library, and a slightly tweaked configuration. Please note that parallax backgrounds are not recommended in Mobile WebKit, only parallax elements. Parallax Elements If you want elements to scroll at a different speed, add the following attribute to any element with a CSS position of absolute, relative or fixed: If a ratio lower than 1 is causing the element to appear jittery, try setting its CSS position to fixed. Parallax Backgrounds Configuring Offsets Confused? Confused?

Related: