Moment.js is a lightweight javascript date library for parsing, manipulating, and formatting dates. It was designed to work in both the browser and in NodeJS. All code will work in both environments. All unit tests are run in both environments.
Instead of modifying the native Date.prototype, Moment.js creates a wrapper for the Dateobject. To get this wrapper object, simply call moment()with one of the supported input types. Moment.js is freely distributable under the terms of the MIT license.
Requirements: Javascript Framework
Demo: http://momentjs.com/
License: MIT License
Would you like to create a template with a fullscreen grid of images and content areas? The idea is to have a Draggable Image Boxes Grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton. To make the grid draggable, they used jQuery.kinetic by Dave Taylor. The jQuery plugin allows smooth drag scrolling and it’s just what we need in our grid.
Requirements: Javascript Framework
Demo: http://tympanus.net/Tutorials/DraggableImageBoxesGrid/
License: License Free
jQuery Countdown is a jQuery plugin that sets a div or span to show a countdown to a given time. The countdown functionality can easily be added to a division with appropriate default settings, although you do need to set the target time.
You can also use images instead of text. It’s possible to count up instead of down. You can stop or pause (lap time) the countdown and resume. It supports Callbacks per tick and/or on expiry. And best of all, it supports over 40 localisations.
Requirements: jQuery Framework
Demo: http://keith-wood.name/countdown.html
License: GPL , MIT License
Tutorialzine has written a great tutorial: Create an iOS-like Home Screen using CoffeeScript. CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good. It makes OOP easy and introduces a number of useful additions such as comprehensions, new syntax for functions and scope handling, along with numerous small improvements.
But don’t fall pray to the hype surrounding it just yet – CoffeeScript isn’t going to replace JavaScript any time soon, as it sacrifices some of the agility that JS provides in attempt to make development easier. The CS way might not be the best fit for your project.
Requirements: CoffeeScript
Demo: http://demo.tutorialzine.com/2011/10/ios-homescreen…
License: License Free
jQuery Timelinr is a simple plugin helps you to give more life to the boring timelines. It supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, auto-play and etc… You can also customize the style with CSS easily.
Requirements: jQuery Framework
Demo: http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
License: License Free
The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. However, most of them required JavaScript support. CSS Ninja has written a tutorial in order to teach us how to create a Pure CSS Collapsible Tree Menu.
Based on testing, this will work in any CSS3 selector supporting browser. It has been tested on Firefox 1+, Opera 9.6+, Safari 4+, iPhone/iPod Safari, Chrome 1+, Android and IE9+.
This technique will cater for a large amount of sub folders and files. It’s governed by your screen real estate and even then it’ll apply scroll bars to the document when the tree structure gets too long or wide.
You can also check out Fully Interactive jQuery File Tree, Javascript Treeview Component, and Treeview jQuery Plugin we have mentioned before.
Requirements: CSS3 selector supporting browser
Demo: http://www.thecssninja.com/css/css-tree-menu
License: License Free
SimpleModal is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.
SimpleModal is not a lightbox although the possibility to hide parts of its layout may partially make it similar. It is written in Mootools. It is available free for download, and released under MIT License.
Requirements: Mootools framework
Demo: http://simplemodal.plasm.it/
License: MIT License
Speaker Deck is the best way to share presentations online. Simply upload your slides as a PDF, and they will turn them into a beautiful online experience. You can view them on SpeakerDeck.com, or share them on any website with an embed code.
They also automatically scale your slides to the embedding website’s layout for you. No more broken formatting, plugin dependencies, or ugly embed frames. You can sign up now for free, and make your presentations better with Speaker Deck.
Requirements: –
Demo: http://speakerdeck.com/
License: License Free
Cube is an open-source system for visualizing time series data, built on MongoDB, Node and D3. If you send Cube timestamped events (with optional structured data), you can easily build realtime visualizations of aggregate metrics for internal dashboards. For example, you might use Cube to monitor traffic to your website, counting the number of requests in 5-minute intervals.
Cube supports filters for aggregating a subset of events: you might filter requests for a specific path, host, or user-agent. Or perhaps plot the count of slow requests (>500ms) over time. You can also evaluate arithmetic expressions, even combining multiple event types, say to compare requests to signups for conversion tracking.
Requirements: Javascript Framework
Demo: http://square.github.com/cube/
License: Apache License
PhotoSwipe is a HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. It is inspired by the iOS photo viewer and Google images for mobile. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.
PhotoSwipe supports mobile handsets running WebKit based browsers, i.e. iOS, Android and Blackberry 6. It also runs on the desktop and has been tested on Chrome, Firefox, Safari and Internet Explorer 8 and above and in a limited capacity on Windows Phone 7 (Mango).
Requirements: Javascript Framework
Demo: http://www.photoswipe.com/
License: MIT License
