Open Source Resources for Web Application Developers

InputNotes jQuery Plugin automatically adds notes below textareas and input fields based on regex patterns. The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML. It has been tested on IE 6 and 7, Firefox 3.5, Safari 4, Google Chrome, Opera 9.6.

Requirements: jQuery Framework
Demo: http://fredibach.ch/jquery-plugins/inputnotes.php
License: License Free

• 0 Comments

Codrops has shown us how to create a Beautiful Background Image Navigation with jQuery. The main idea is to have three list items that contain the same background image but with a different position.

The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/
License: License Free

• 2 Comments

Codrops has created an Interactive Photo Desk with jQuery and CSS3 that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

If we drag a picture, it get’s “picked up” first, making it appear a little bit bigger. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball. When using the shuffle function, the photos get rotated and spread over the desk randomly.

Requirements: jQuery Framework & CSS3
Demo: http://tympanus.net/Development/PhotoDesk/
License: License Free

• 3 Comments

Tutorialzine has written a simple jQuery tooltip plugin called Colortip. It converts the title attributes of elements within your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jquery.js.

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip…
License: License Free

• 7 Comments

Broken links and 404 Errors are a problem that have plagued almost all websites since the dawn of the internet. There’s nothing attractive about clicking a link hoping that it’ll take you to your destination only to find out that the page doesn’t exist.

Addy Osmani has written a new jQuery Plugin called Catch404. Through the magic of jQuery we are going to catch 404 errors without your users even having to leave the page and then suggest some other options they have got using an inline jQuery Modal window. The benefit of Catch404 is that you can offer your users a better experience when errors are encountered on your site.

Requirements: jQuery Framework
Demo: http://www.addyosmani.com/resources/catch404/catch404.html
License: GPL License

• 4 Comments

Anologue is an approach to ad hoc, linear dialogue in realtime. With anologue you can quickly and easily engage in an anonymous (or not) linear dialogue with any number of people (within reason). There is no accounts or installations required. Your “chat room” is created by the time this link loads.

Best of all: Anologue is open source. built with php 5.3.1, using the most non-heinous, totally rad lithium framework, couchdb, jquery, a few other scripts as well as some classy, original and established iconography for ui; all coming together for the conversational goodness you’re about to experience.

Requirements: PHP 5.3, CouchDB, rad-dev account
Demo: http://anologue.com/add
License: BSD License

• 5 Comments

Nick La was trying to style CSS3 border-radius to image element and he realized that Firefox doesn’t display border-radius on images. Then he figured a way to work around it – wrap a span tag around with the original image as a background-image.

And also, Darcy Clarke has written a piece of  jQuery code which does the magic tag wrapping automatically. You can view the tutorial on CSS3 Rounded Image With jQuery.

Source: CSS3 Rounded Image with jQuery

• 1 Comment

Beautiful Photo Stack Gallery with jQuery and CSS3 tells us how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

Requirements: PHP Framework, jQuery Framework
Demo: http://tympanus.net/Tutorials/PhotoStack/
License: License Free

• 1 Comment

Alex Marandon has written a comprehensive guide about How to build a web widget (using jQuery). It covers only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.

The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP.

Source: http://alexmarandon.com/articles/web_widget_jquery/

• 1 Comment

Mac-like Icon Dock (v2) is a “Mac OS X” style icon dock, built entirely in XHTML/CSS and with smooth animation using jQuery/JavaScript. As from the demo, and unlike many other icon docks, the navigation works with no JavaScript. This is very important as the website should still be accessible with JavaScript disabled.

Each icon can have a scalable image and a title. As the image is dynamically resized, it is up to the browser to smoothly render the icon. You can also have a look at jqDock or other Fish Eye Menus.

Requirements: All Browsers except IE6
Demo: http://www.aplweb.co.uk/jQuery/Mac_Dock_v2/
License: License Free

• 0 Comments