Open Source Resources for Web Application Developers

Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then Thomas Reynolds has got something special for you. iPhone Style Checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes.

Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

Requirements: jQuery Framework
Demo: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
License: License Free

• 11 Comments

Many websites offer syndication formats such as RSS, JSON, or XML based services to allow for easy content delivery. But what happens when a website doesn’t offer one of these services? How do you syndicate content from a website that doesn’t offer a news feed?

Nettus has gaven us a a simple solution using JQuery’s AJAX functions and PHP’s cURL library that allows us to syndicate external content. This is a simple solution if you require content from an external website.

Although JQuery’s easy syntax and CSS-selectors give us the convenience of styling and selecting what we want from the client-side, this is not speed optimized. Remember you have no control over whether or not the content creator changes what tags and classes they use, it is always best to style general elements that will be commonly used.

Requirements: jQuery Framework
Demo: http://net.tutsplus.com/tutorials/php/how-to-syndicate-content…
License: License Free

• 1 Comment

jQueryforDesigners has added a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. They have published a tutorial which walk through the fundamentals of scrolling carousel, and how they have created jQuery Infinite Carousel.

The trick is building the DOM with the cloned nodes, because we’ve cloned the start of the list to the end of the list, when we scroll off the last items, it looks like we’ve looped back round. Once the animation completes, we change the scrollLeft position back to the real first items.

This scrollLeft isn’t visible to the user since the overflow is hidden, and so it creates the effect of being infinitely sliding from left or right.

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/infinite-carousel.html
License: License Free

• 3 Comments

The choice of free fonts is enormous, so the time you need to find them is usually the time you should be investing in your current projects.

SmashingMagazine has published Beautiful High-Quality Free Fonts For Your Designs, which presents you Chunk, Titilium, Amputa Bangiz, Serif Beta, Quatro, Rough Draft, Comfortaa and a couple of other high-quality free fonts. All of them look really professional, I am sure you will find them useful for your projects.

Requirements: -
Demo: http://www.smashingmagazine.com/2009/06/05/beautiful…
License: License Free

• 2 Comments

UNIQLO has just released a Calendar Blog Parts, which displays a beatiful Flash calendar with the weather forcast. You can select the country appears on the calendar. You can also set the Background Music On/Off. There are Small and Large size available at the moment.

UNIQLO Calendar Blog Parts has been tested on Internet Explorer 6+, Firefox 1.5+ and Safari 1.3.2+. You can easily integrate the calendar on your blog, Myspace, Facebook, iGoogle and etc… Simply paste the generated code on your site, you will get a pretty calendar as follow.

Requirements: Flash Required
Demo: http://www.uniqlo.com/calendar/
License: License Free

• 0 Comments

Currently, there are two commonly used techniques on displaying columns, the fixed columns and the liquid columns. With fixed columns, there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in. The downside of liquid columns is that we are restricted to having a fixed number of columns per row.

SohTanaka has thought of a solution: Smart Columns with CSS & jQuery would be able to benefit the situations is to take the good of both scenarios and mash it into one. Allow as many fixed columns to line up across the viewport. Take excess white space and evenly distribute them to each of the columns to complete the full row. This way the columns will always fit perfectly.

And also, It keeps a default fixed width as the base, so that the columns are reasonably within the intended columns sizes while maintaining enough flexibility to accommodate for the expandable viewport.

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

• 3 Comments

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

• 6 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