Customizable Layout using Drag & Drop with Saving Ability

Are you amazed by features like drag and drop, customizable content and AJAX? Learn how you can combine them to create a customizable website layout, saving preference using cookies.

DevHeart has written a very nice tutorial teaching us how to create aCustomizable Layout using Drag and Drop. The approach includes using jQuery along with the jQuery UI Sortable plugin for drag and drop functionality and the jQuery Cookie plugin for storing item positions.

 

Requirements: jQuery Framework
Demo: http://devheart.org/articles/jquery-customizable-layout…
License: License Free

Easy to Use Ajax Auto Suggest jQuery Plugin

AUSU Ajax Auto Suggest jQuery Plugin has the usual functionality with a little extra flexibility: multiple instances, passing custom parameters, the id and the value are returned, keyboard-controlled, and a few others… Almost anything you need from an autosuggest plugin you can do with the built-in options! The CSS file is small and very easily changed.

It has been tested on mordern browsers (Firefox 3, Internet Explorer 8, Opera 11, Safari 5 & Chrome). It has also been tested on IE7 & IE6 without any issue.

 

Requirements: jQuery Framework
Demo: http://oslund.ca/demos/ausu/
License: License Free

Falling Snow Effect with CSS Keyframe Animations

Merry Christmas and Happy new year to you all! The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. Do you like snow? How about putting some snow on your website with a couple of simple lines of code?

Design Shack has shared a super simple CSS technique that you can use toMake It Snow on Your Website with CSS Keyframe Animations. It will only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

 

Requirements: CSS Keyframe Support
Demo: http://designshack.net/tutorialexamples/letitsnow/index.html
License: License Free

NikeBetterWorld Parallax Effect jQuery Plugin

A couple of months ago, Ian Lunn has created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level.

Now Ian Lunn has written a tutorial that took the original jQuery Parallax script he wrote and recreated a webpage with Nikebetterworld Parallax Effect. And also, he has turned the tutorial into a jQuery Plugin, you can download and fork it on Github.

 

Requirements: jQuery Framework
Demo: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
License: GPL, MIT License

Android Style Date-Picker Widget for jQuery Mobile

Mobi Pick is an Android-style datepicker widget for jQuery Mobile. It uses the date library XDate and allows progressive enhancement for date input fields using Modernizr. It is free for download and released under MIT license.

If Mobi Pick does not suit your porject, you can also take a look at other datepicker and calendar components we have mentioned before.

 

Requirements: jQuery Mobile
Demo: http://mobipick.sustainablepace.net/
License: MIT License

A Suite of JavaScript Audio Codecs

Web browsers are becoming more and more powerful, and new APIs like the Web Audio API and Audio Data API are making the web an ever more interesting and dynamic place.

At ofmlabs they are invested in improving the state of audio on the web, and with JSMad showed that decoding audio purely in JavaScript is possible thanks to these APIs and the hard work of browser makers and spec authors.

And now they have done it again. Introducing alac.js, a port of the recently open sourced Apple Lossless decoder to JavaScript. Now it is possible to play MP3 and Apple Lossless even in browsers without native support. Check out the suite of JavaScript audio codecs to hear JavaScript rocking out!

 

Requirements: -
Demo: http://codecs.ofmlabs.org/
License: GPL, Apache 2 License

Instabir: A jQuery Plugin For AB Testing

AB testing is great for fine-tuning almost anything in web pages (design items, content, etc.) to find out which ones convert the best.

Instabir is a jQuery plugin for quickly implementing AB testing with a few lines of code.

It works by simply applying 2 different designs, content, etc., hiding one of them and defining these HTML elements, plugin displays only one of them randomly and records the activities into a MySQL database.

 

There is a PHP file provided for handling the requests and recording them to the database.

Instabir also has a paid service which records all the activities itself and can present the results visually.

Requirements: PHP, PHP PDO, MySQL
Compatibility: All Major Browsers
Website: http://www.instabir.com/
Demo: http://www.instabir.com/demos
Download: http://www.instabir.com/non-hosted-ab-testing

ember.js: JavaScript Framework for Ambitious Web Applications

Ember.js is a JavaScript framework for creating ambitious web applicationsby eliminating boilerplate and providing a standard application architecture.

Ember.js, like some other modern JavaScript frameworks, works a little differently. Instead of the majority of your application’s logic living on the server, an Ember.js application downloads everything it needs to run in the initial page load. That means that while your user is using your app, she never has to load a new page and your UI responds quickly to their interaction.

One advantage of this architecture is that your web application uses the same REST API as your native apps or third-party clients. Back-end developers can focus on building a fast, reliable, and secure API server, and don’t have to be front-end experts, too.

 

Requirements: JavaScript Framework
Demo: http://www.emberjs.com/
License: License Free

AMPPS: Local Web Server Environment With Single Click Installation Of Popular Apps

AMPPS is a software for quickly installing Apache, MySQL, PHP, Perl and Python and creating a web server environment.

What differentiates it from other similar solutions is the built-in Softaculous package which makes 1 click installations of popular web apps possible.

 

There is a huge list of installable apps (250+) including WordPress, Joomla, Magento, phpBB and much more.

Using the AMPPS panel, the server resources can be configured and all the installations can be managed.

It has versions for Windows + Mac OS X and also installs phpMyAdmin + SQLite manager for controlling databases.

Compatibility: Windows and Mac OS X
Website: http://www.ampps.com/
Download: http://www.ampps.com/download

Flow Slider: Mouse-Controlled jQuery Image Slider

Flow Slider is a jQuery image slider plugin which reminds us the once-popular Flash sliders that respond to mouse interactions.

It works by converting an unordered list into a slider and can be browsed by hovering to the right or left side of it.

The plugin can be completely customized in means of design and functionality. There are options for transition type and speed, acceleration, starting position and much more.

 

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.flowslider.com/
Demo: http://www.flowslider.com/example.html