Open Source Resources for Web Application Developers

Would you like to Create a Realistic Hover Effect With jQuery? It adds a rising hover effect to a set of icon links using jQuery’s animate effect. In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. And .stop() eliminates any queue buildup from quickly mousing back and forth over the navigation.

Requirements: jQuery Framework
Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/
License: License Free

• 7 Comments

Would you like to create a Simple Navigation with a Horizontal Subnav? It looks very similar to the Menu of Behance Network, which looks nice and professional.

We can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. Nice and simple! I am sure this will come in handy in your future projects.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
License: License Free

• 3 Comments

We have seen lots of Javascript Lightbox plugins. It is good to see someone who has created a valid markup Lightbox purely with XHTML and CSS for us.

ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.

Requirements: FF, Safari, Chrome, IE6, IE7 and IE8
Demo: http://www.growldesign.co.uk/projects/lb/
License: License Free

• 6 Comments

Lessn is an extremely simple, personal url shortener written in PHP with MySQL and mod_rewrite. The installation is very simple with full instruction in a readme file. Lessn is offered free, as is, sans support and without warranty (but is really not as scary as all that).

Open /lessn/-/config.php in a plaintext editor and create a Lessn username and password then enter your database connection details. Upload the entire /lessn/ directory to your server. For the shortest urls, place it at the root of your site and rename to a single character. And then visit http://yourdomain.com/x/-/ to Lessn a new url and grab the bookmarklets.

Requirements: PHP 4.4.8+ and MySQL 4.1.25+
Demo: http://www.shauninman.com/archive/2009/08/17/less_n
License: License Free

• 1 Comment

AnythingSlider is an attempt at bringing together the functionality of “featured content” slider, “start/stop slider“, “moving boxes“ and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is a plugin, which makes implementing it and customizing it much easier.

It supports Auto-playing (start playing or stopped). Pauses autoPlay on hover is optional. Each slide has a hashtag (can link directly to specific slides). Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/AnythingSlider/
License: License Free

• 1 Comment

Elastic jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight. The usage of Elastic is very straight forward. All you have to do is include the javascript file containing the plugin and use the elastic method.

Requirements: jQuery Framework
Demo: http://www.unwrongest.com/projects/elastic/
License: License Free

• 7 Comments

A while ago, we have featured a collection of CD/DVD Case Templates. They come in very handy if you some products like CDs or DVDs for your readers.

KomodoMedia has created a set of Sexy Music Album Overlays for us as well. With amazing APIs such as the ones offered by Last.fm, Twitter, Flickr and more, we can now showcase our favourite music album on our own sites too. These templates can be used on music related web applications too.

Requirements: -
Demo: http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/
License: License Free

• 0 Comments

LoveTextures gives you Creative Textures in hi-resolution for print and on screen. Their plan is to upload FREE textures on a monthly basis and to provide you with great quality stock images that will hopefully fullfill your needs, whilst they ensure that all photography is quality assured. Textures that you find on LoveTextures are 100% free for personal and professional use.

Requirements: -
Demo: http://www.lovetextures.com/
License: License Free

• 6 Comments

ColorSuckr can create color schemes based on photos for use in your artwork and designs. It extracts the 12 most common colors from your image.You can move the color results around the page, click on the color strip, hold and drag, let go to drop. You can also show and hide the color text by clicking the small grey dot next to the strip.

If you enter a web page url (e.g. http://theDesignInspiration.com/) instead of an image, ColorSuckr will scan the page and show you the images on it & you can choose from there. Make getting image colors even easier with the ColorSuckr Add-on for the Firefox browser. Install the add-on, then simply right click any image on a webpage and choose ‘Extract Image Colors’ from the menu to go straight to the ColorSuckr website with the image.

Requirements: -
Demo: http://colorsuckr.com/
License: License Free

• 2 Comments

Nettus has published a tutorial of “How to Create A Simple Web-based Chat Application“. In the tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.

The chat application includes a login and logout system, AJAX-style features, and will also offer support for multiple users. Also, you can work off this and build a multiple chat rooms, add an administrative backend, add emoticons, etc…

Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple…
License: License Free

• 5 Comments