Open Source Resources for Web Application Developers

PatternCooler is a a free Seamless Pattern Background Design Resource. You can add your own colors to contemporary and retro pattern designs, or browse from thousands of pre-colored patterns in the seamless pattern background library.

All artworks on this site can be used freely for blogs, MySpace profiles, Twitter, mobile phone wallpapers, scrapbooking, personal artwork, and non-commercial web projects.

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

• 2 Comments

Janko shows you how to implement Advanced Docking using jQuery. He taught us how to create multiple docking and undocking functionality with jQuery and unordered lists.

When user hovers an item on vertical menu, its submenu will slide in from left to right and overlay the content. When user move the mouse pointer outside the panel, it will slide back. If user clicks on “Dock” link, panel will fix in the current position while content moves to the right of the panel in order to be seen. Lastly, if users “undock” the panel, it will slide back.

But that is not all. Multiple panes are able to dock in the same time. If one panel only is docked it should be 100% height. With each new panel docked, height will be recalculated so that all panels have the same height value. If there are docked panels and user wants to slide in another panel temporarily, it will overlay docked panels.

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/AdvancedDocking/
License: License Free

• 3 Comments

jQuery Masonry is a layout plugin for jQuery. Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Masonry will work with all structural elements: div’s, lists, p’s, spans.

There are no setting or options within in the plugin. Instead, all spacing properties can be set with CSS. The only property required for Masonry to work is for the width of the child elements. Child elements should be should have equal width in order to avoid any overlapping.

Requirements: jQuery Framework
Demo: http://desandro.com/resources/jquery-masonry
License: License Free

• 3 Comments

Like taste and smell, color is a sense that is processed by our brains in multiple dimensions. Yet traditional methods of choosing colors on computers are limited to obscure sliders and flattened two-dimensional viewers. With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.

ColoRotate has an intuitive interface that eliminates the need to memorize or jot down color combinations or numbers. Indeed, you can traverse across an open three-dimensional color space and choose (or design) the color palette that fits your needs.

Source: http://www.colorotate.org/

• 3 Comments

MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific functionality with just a few simple parameters. David has shown us 4 examples of using ScrollSpy.

Example 1: “Top the Top”
When you scroll down a defined number of pixels, you get a “Scroll to Top” link in the lower right hand part of the screen. When you’re back at the top, ScrollSpy is directed to hide the link.

Example 2: “The Show”
When you click the link, the window scrolls to the right. During the scrolling process, ScrollSpy shows and hides content blocks based on where in the scrolling process the window is.

Example 3: “Team Colors”
This displays a different background color depending on where you are in the page.

Example 4: “Position Pointer”
This displays imagery in different positions on the page based upon where the user scrolls.

Requirements: MooTools Framework
Demo 1: http://davidwalsh.name/dw-content/scroll-spy.php?
Demo 2: http://davidwalsh.name/dw-content/scroll-spy.php?page=1
Demo 3: http://davidwalsh.name/dw-content/scroll-spy.php?page=2
Demo 4: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
License: License Free

• 4 Comments

Raymond Selda has published a tutorial about how to Create a Tabbed Content Rotator using jQuery and the interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.

After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.

Requirements: jQuery Framework
Demo: http://www.raymondselda.com/demo/tabbed-rotator/
License: License Free

• 1 Comment

Flashtuts has published: Build a Dynamic Flash Gallery with Slider Control. In the tutorial, you will learn how to create a flash gallery which displays all image files in a given directory, with a slider that is used to browse easily through the images.

The flash gallery is still low on functionality. The loaded images all need to be the same size and do not have a larger preview. You could add a resizing function and an option to view a larger preview of the image when clicked. Furthermore, an option to browse left or right with buttons or with a keyboard event could be added.

Requirements: Flash Required
Demo: http://besofresh.com/flashtuts/full.html
License: License Free

• 3 Comments

Pattern8 was created to make it easier to find high quality free seamless patterns. It offers free vector and pixel patterns you need. It keeps things simple and allows searching by color.

You can use Pattern8 files for personal and commercial work. You can also use Pattern8 files in your own design work. That includes web design, t-shirts, business cards, greetings card, stationery, posters, flyers, branding etc.

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

• 1 Comment

Face
Your
Manga is a Flash Web Application that allows 
you 
to 
create 
an 
Avatar
 for 
yourself 
or 
 your 
friends 
in
 an
 absolutely 
free, 
easy
 and
 quick 
way. You
 will 
be
 able 
to 
use 
it 
with 
the 
most
 common 
Instant 
Messaging 
Programmes, or even on website, Forum, Blog and wherever you want in the virtual world.

With FaceyourManga you can create your own pretty and funny Avatar without needing any artistic skills. Once you have completed the Avatar, enter your nickname, birth date and e-mail address. You will receive an e-mail containing the Avatar immediately.

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

• 5 Comments

CSSTricks has created a Website Change Request Form, in order to show off some fancy form styling and advanced form functionality. The form is fully functional, submission can only happen when the required fields are filled out properly. Submission is handled via AJAX, no page refresh needed.

jqTransform is used to help with the styling of the form elements. It completely replaces radio buttons and check boxes with custom graphics, and wraps textareas and text-based inputs in nice styling as well. The submission of all the form elements is SERIALIZED, via jQuery Form Plugin, so adding and changing form elements is easy.

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

• 0 Comments