Lightweight & Highly Customizable Ajax Events Calendar

dhtmlxScheduler is a web-based event calendar which provides simple in-browser scheduling solution. With smooth Ajax-enabled interface dhtmlxScheduler allows users to add, modify or delete events without refreshing the web page.

Intuitive drag-n-drop behavior gives the possibility to change events date and start/end time by simply dragging the event boxes. The calendar events can be displayed in Day/Week/Month views.

dhtmlxScheduler is very lightweight (about 19KB gzipped), cross-browser and highly customizable. Each aspect of the calendar interface can be configured through JavaScript API. Developers can easily add/update events, change date format, time scale or calendar language.

Although dhtmlxScheduler is a pure JavaScript solution, it can be easily connected to the backend database with the help of dhtmlxConnector, a PHP extension that enables data communication between client-side interface and server-side datasource.

You can also use your own server-side code written in any language (PHP, Java, ASP, etc.) to bind scheduler content to the database. dhtmlxScheduler is distributed under GNU GPL and commercial licenses.

Requirements: -
Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler…
License: GPL and Commercial Licenses

How to Create a Tabbled Content Rotator with jQuery

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

Gmail / Facebook Style Chat Application with jQuery

Everyone loves the Gmail and Facebook inline chat modules. This Gmail/Facebook Style jQuery Chat Module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.

You can see the chat box displays at the bottom right hand corner of the screen. You can keep the chat boxes open and stores state (data) even when pages are browsed/refreshed. It will display “Sent at…” after 3 minutes of inactivity. You can also minimize and close chat boxes easily.

This chat script can be used for free under LGPL-style license for non-commercial purposes. However, you need to purchase a license for commercial purposes.

Requirements: jQuery Framework
Demo: http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/
License: LGPL License

Choose jQuery or MooTools Javascript Framework?

Most people getting started with JavaScript these days are faced with the challenging task of picking a library to use, or at least which one to learn first. Aaron Newton of Clientcide saw numerous posts that boil down to “MooTools or jQuery?”

He has published “jQuery vs MooTools” aims to help you make that choice. He tried to highlight the differences in philosophies between the two codebases and highlight their advantages and disadvantages.

jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability. jQuery is easy to get started and see quick results but can turn into code that’s harder to reuse and maintain, while MooTools takes longer to learn and requires you to write more code upfront before you see results, but afterwards is more reusable and more maintainable.

Both frameworks keep their cores rather lean, leaving it to you and others to write plug-ins and extensions. MooTools takes a more holistic approach and gives you tools to write anything you can imagine beyond the scope of the DOM, but pays the price by having a steeper learning curve.

MooTools extensibility and holistic approach gives you a superset of jQuery’s features, but jQuery’s focus on a slick DOM API doesn’t preclude you from using the native inheritance methods of JavaScript or from using a class system like MooTools if you want it.

Do you think so? Which framework do you choose?

Source: jQuery vs MooTools

How to Build a Dynamic Flash Gallery with Slider Control

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

Axiis - Open Source Data Visualization Framework

Axiis is an open source data visualization framework designed for beginner and expert developers alike. Axiis gives developers the ability to expressively define their data visualizations through concise and intuitive markup.

Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations. Axiis was designed to be a granular framework, allowing developers to mix and match components and build complex output by compositing together basic building blocks.

Axiis is an open source project, under an MIT license. This means you can use it for personal projects, commercial work, and pretty much anything you can think of with no restrictions.

Requirements: Degrafa Graphics Framework & Adobe Flex 3
Demo: http://www.axiis.org/examples.html
License: MIT License

Giving Away 10 Sets of 275 Premium App Icons

We would like to celebrate the success of WebAppers over the past two years. Without your support, WebAppers cannot survive. We would like to say Big Thank You to all of our readers.

And also, we have contacted Function, and asked if they can give away few copies of their New Beautiful Premium App Icons ($20 /pack). They are very kind, and happy to give away 10 sets of 275 New Premium App Icons to WebAppers readers for Free!

How to Participate

In order to have a chance to get those amazing icons, you can simply leave a comment under this post. And then, we will randomly draw 10 winners on 1st June 2009.

Free Social Media Icons for Everyone

Few days ago, Function has also released a set of Free Social Media Icon Pack for everyone as well. All of them look shiny and beautiful. You can download them directly now. I am sure you will find them useful for your blog or web application.

Create Your Own Patterns Online for Free

Repper is a free-to-use pattern creator that turns your images into eye-catching designs. First of all, you can load a random example image or upload your own image. Resize & drag the box to change the pattern. And then save your design and download the pattern to your computer.

Patterns generated with the Repper tool are freely available to everybody under the Creative Commons Attribution-Noncommercial 3.0 Unported License. This means that you can use it for your own personal projects for free.

Requirements: -
Demo: http://repper.studioludens.com
License: Creative Commons License

Useful Web Caching Tutorial for Webmasters

Recently, I have been doing research on Web Caching. And I have found Caching Tutorial for Web Authors and Webmasters , which is a detailed, informational document published by Mark Nottingham.

A Web cache sits between one or more Web servers and a client or many clients, and watches requests come by, saving copies of the responses — like HTML pages, images and files — for itself. Then, if there is another request for the same URL, it can use the response that it has, instead of asking the origin server for it again.

Web Caching can reduce latency, because the request is satisfied from the cache instead of the origin server, it takes less time for it to get the representation and display it. This makes the Web seem more responsive.

And also, Web Caching can reduce network traffic, because representations are reused, it reduces the amount of bandwidth used by a client. This saves money if the client is paying for traffic, and keeps their bandwidth requirements lower and more manageable.

You can also get more information about the type of web caches, how web caches work, how to control them, tips for building a cache-aware site and etc…

Source: Caching Tutorial for Web Auhors and Webmaters
License: Creative Commons License

Hand-Picked The Best Fonts for Download

Font^ex has spent plenty of hours to compile a list of hand-picked fonts for you. This is an amazing resource for everyone who would like to be presented with amazing free fonts to Download. They are adding some premium fonts on Font^ex soon. The site is profesionally designed. With the help of jQuery, the site becomes more interactive as well.


Source: http://www.fontex.org/

Tokenizing Autocomplete Text Entry with TokenInput

TokenInput jQuery Plugin allows users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen something similar on Facebook or TextboxList by Devthought.

There is an intuitive UI for selecting multiple items from a large list, the layout is fully in controlled with CSS, and easily customisable. Also, the result caching reduces server load. Users can select items using the mouse or keyboard. TokenInput jQuery Plugin is released under GPL2.

Requirements: jQuery Framework
Demo: http://loopj.com/tokeninput/demo.html
License: GPL2 License

Sexy Page Peel Effect Tutorial & jQuery Plugin

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. SohTanaka has made a tutorial: Simple Page Peel Effect with jQuery & CSS. All they are doing is expanding the image on hover, then retracting to its default size on hover out.

You may also interested in The Sexy Curls jQuery Plugin if you like this tutorial. The page corner can be set to curl automatically. The plugin is released under the MIT license. That means you can do whatever you like with it.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/peeling-effect/
Demo: http://www.elliottkember.com/sexy_curls.html
License: MIT License

Web Design Inspiration from 35 Korean Flash Websites

The Design Inspiration has published an article of Top 35 Inspirational Korean Websites. As a web designer, we would like to design something that really standout. By doing that, we need to widen our eyes by looking at different kind of design style, so that we can get infinity and variety of inspiration.

Oriental websites and European websites are so different, because the designers have different culture and experience. You should be very familiar with US and European design style by now. It is a good idea to get some inspiration from Korean style websites as well.

Source: Top 35 Inspirational Korean Websites

Download Free Seamless Vector and Pixel Patterns

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

Create Your Own Manga-Style Avatar Online for Free

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

Resources for Developing a Site for iPhone

The iPhone is a fantastic phenomenon. It’s a communications device, a multimedia platform and much more all rolled into one single tool. Everyone wants in on this device. With millions of iPhones out there, it makes sense to have your content, or application available on that platform, but how do you go about doing this?

WebDesignerDepot has published How to Get Started with iPhone Dev, which is an introduction to the various ways of getting content and applications onto the iPhone. It is by no means a full guide, but it can point you in the right direction and give you an overview of what is involved in the process.

Source: How to Get Started with iPhone Dev

Fancy Form Styling and Advanced Form Functionality

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

How to Create an Image Rotator with jQuery and CSS

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. DesignMag has published a tutorial teaching us how to Create an Image Rotator with jQuery and CSS. It will help you understand how the image rotator works and helps you create your own from scratch.

Do keep in mind these jQuery driven image rotators do not degrade in the best fashion. When you disable JavaScript, each thumbnail must be clicked on to get the larger image (which opens in the same window).

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

Create a Beautiful Sliding Menu with BySlideMenu

BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want using images and/or text. It works horizontally or vertically. Menu can be pinned or not, by mouseover or click. It’s totally free. You can download it, modify it and use it in any commercial project as long as you respect the license. It’s Open Source!

If you like this plugin, you should take a look at Phatfusion Image Menu as well.

Requirements: Mootools Framework
Demo: http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu
License: MIT License

Free Syntax Highlighting Class Developed with MooTools

Lighter.js is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework’s features. Using it can be as simple as adding a single script to your webpage, selecting the elements you wish to highlight, and Lighter.js takes care of the rest. Lighter.js has been tested on Safari 2+, Internet Explorer 6+, Firefox 2+ and Opera 9+.

Requirements: MooTools Framework
Demo: http://pradador.com/code/lighterjs/
License: MIT License

Preview, Upload, Modify Files & Folders with FileManager

MooTools FileManager allows you to (pre)view, upload and modify files and folders via the browser. You can browse through files and folders on your server easily with Mootools FileManager. The user interface is very intuitive. You can view detailed Previews of Images, Text-Files, Compressed-Files or Audio Content. Also, you can Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files.

MooTools FileManager is integrated with FancyUpload, so that you can upload files directly. As a bonus, you can use it as a FileManager in TinyMCE as well. The Script has been tested in Firefox 3+, Safari 4, Opera and IE6+. It is released under the MIT-License, I am sure you can get a great use out of it.

Requirements: MooTools Framework
Demo: http://og5.net/christoph/Scripts/FileManager/Demos/
License: MIT License

Download Free Buttons in PNG and PSD Format

The author of Button-Download.com has been keeping the buttons he made in the past. Now he has released all of them to us. All of the buttons are in PNG and PSD format, so that you can edit the buttons as you like. You are free to use these buttons your personal and commercial projects. To make your life easier, you can also download these buttons all at once by clicking the “All Download” button as well.

Requirements: -
Demo: http://www.button-download.com/
License: License Free

FullCalendar - Full-Sized, Drag & Drop Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

FullCalendar is great for displaying events, but it isn’t a complete solution for event content-management. Beyond dragging an event to a different day, you cannot change an event’s name, time-of-day, or other associated data. It is up to you to add this functionality through FullCalendar’s event hooks.

Requirements: jQuery and jQuery UI Framework
Demo: http://arshaw.com/fullcalendar/
License: MIT, GPL License

PHP Quick Profiler - Firebug for PHP

Code reviews play an integral part in the development process for making quality software. We can find out security holes, memory leaks, poor queries and heavy file structures from code reviews. Unfortunately, these reviews are also very time consuming.

We spend a lot of time echoing queries, memory stats and objects to the browser just to see how they are being used in the code. To reduce this repetition, Ryan Campbell has invested some time creating the PHP Quick Profiler (PQP). It’s a small tool (think Firebug for PHP) to provide profiling and debugging related information to developers without needing them to add a lot of programmatic overhead to their code.

Now, we only need to toggle one config setting to true and we can have access to an automated tool to help create a faster and more consistent review experience. Since anyone can use it, PQP also gives the initial developer an idea of where their code stands before the review.

Requirements: -
Demo: http://particletree.com/examples/pqp/
License: License Free

Create Fancy Thumbnail Hover Effect with jQuery

Soh Tanaka has written a tutorial about making a Fancy Thumbnail Hover Effect with jQuery. Basically all they are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment with css), and padding when we hover over. During this animation, they also switch the value of the z-index, so that the selected image stays on top of the rest.

It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.

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

How to Find Inspiration From Your Environment

As a designer, we all have experienced the hard time of finding new ideas and inspirations. That’s why Nick La from WebDesignerWall has chosen to talk about this topic in his presentation at the FOWD conference. In this post, he has done a recap of the keynotes – Finding Inspiration From Your Environment. Read on to find out how his work habits and environment influence his design.
Next time you are outside, try to pay more attention to you environment, you may find a lot of interesting things that you can incorporate into your design. Enjoy your life and design more beautiful things!

Source: http://www.webdesignerwall.com/general/finding-inspiration/

Ext Core - Intuitive Cross Browser Javascript Library

Ext Core is a cross-browser JavaScript library for building dynamic web pages. It is lightweight with high performance. The code is clear and maintainable. Ext Core is intuitive with easy to use API as well. You can easily build Carousel, Lightbox, Menu, JSONP, Simple Tabs with Ext Core.

The Carousel example provides a widget for browsing a set of objects. It can be configured to meet any of your specific requirements - auto-play, animations, custom navigation dynamic content and more. The Lightbox example provides a widget used to overlay images on the current page.

The Menu example provides a widget that converts an existing list of links on the page to either a horizontal or vertical menu. The JSONP example shows how you can fetch JSON data from a different domain. It includes a class you can use to connect to any possible web service that supports the JSON format. The Simple Tabs example shows how you can create powerful navigation with only a few lines of code using Ext Core.

Requirements: Internet Explorer 6+, FireFox 1.5+, Safari 3+, Opera 9+
Demo: http://extjs.com/products/extcore/
License: MIT License

ProFolio - Simple & Elegant Porfolio for Artists

ProFolio is an elegantly designed portfolio for artists, designers, photographers, or anyone that has creative visual pieces to share. It was designed to be professional, elegant, clean & simple. You will see the background of the page with the unobtrusive portfolio navigation to the left. Simple click on portfolio to view the artist’s work, and the other items will fade as small previews of the artwork fades into focus.

ProFolio is built with HTML instead of Flash so that search engines can add your portfolio to their indexes. It works in Firefox 2+, Internet Explorer 7+, Safari. ProFolio is also easily customized, extremely simple to install. However, it’s free for a limited time only.

Requirements: Firefox 2+, Internet Explorer 7+, Safari
Demo: http://profolio.sticktacular.com/
License: Free for a limited time

Resize Your Images Automatically with Fluid Images

Ethan Marcotte has raised an issue about Fluid Grids, that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?

He has wriiten a little script that makes Fluid Images. In short, it cycles through your document, swaps out the images for a transparent GIF, and applies the AlphaImageLoader property to each one. Then, whenever the window’s resized, the script automatically recalculates the proper, proportional height and width of the image, and resizes the spacer graphic accordingly. You can see it in action, and download the script.

Requirements: -
Demo: http://unstoppablerobotninja.com/entry/fluid-images/
License: License Free

Using Open Source Projects to Build an SSL Accelerator

SSL acceleration is a technique that off-loads the processor intensive public key encryption algorithms used in SSL transactions to a hardware accelerator. These solutions often involve a considerable up front investment as the specialized equipment is rather costly. o3 Magazine though looks at using off the shelf server hardware and open source software to build a cost effective SSL accelerator.

Ultimately there are two ways to do SSL Acceleration or SSL off-load. It can be done on the server side by installing an SSL Accelerator card, which has special custom processors designed to perform the public key encryption algorithms in hardware rather than software.

The other way to do SSL acceleration is to install a device in front of the web servers, this is typically an appliance or switch with comparable hardware to the SSL accelerator card. These devices often provide other features such as load balancing. They typically have higher transactions per second and thruputcapacity than a single server with an SSL accelerator card.

The Open Source SSL Accelerator requires a dedicated server running Linux. A multi-core or multi-processor system is highly recommended, with an emphasis on processing power and to a lesser degree RAM. The only software requirement is Nginx (Engine-X) which is an Open Source web server project. Nginx is designed to handle a large number of transactions per second, and has very well designed I/O subsystem code, which is what gives it a serious advantage over other options such as Lighttpd and Apache.

os Magazine has concluded that Nginx once again has shown that it is a versatile open source project. For the cost of a server and a few hours work, any system administrator can increase the capacity of their existing server farm by building an Open Source SSL Accelerator. Reducing the complexity of certificate management, reducing the number of certificates needed and reducing the overall load per request on the existing server farm, this solution offers a cost-effective way of breathing new life into an existing server farm.

Source: Open Source SSL Acceleration

Coding Anytime and Anywhere with PHPanywhere

PHPanywhere is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online. It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.

PHPanywhere works in a browser, you can start coding right away, no need for installing anything. Best of all you can work from anywhere. You can also share your work and allow others to work on your projects on PHPanywhere easily.

Requirements: -
Demo: http://phpanywhere.net/
License: License Free

Professional and Free Patterns on Milleseicentopercento

There are some pretty patterns for you again. Milleseicentopercento looks very simple with a full page of professional patterns. Simply right-click on the pattern and save it as an image file. You can easily decorate your background with these nice patterns. All of these patterns are released under Creative Commons License.

Feel free to view other free patterns on our Textures and Patterns Section.

Requirements: -
Demo: http://www.noqta.it/dromoscopio/
License: Creative Commons License

What Do you look for in a Quality Design?

Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. There’s quite a few ways to spot quality within web designs.

Function has put together a few pointers, and collected some examples to explain just how they look for quality within a website design. It Includes Spacing, Pixel Perfect Detail, Typography, Organization of Elements and etc… The post is extremely well-written and informative with some really good examples. It is one of the best posts I have read for a long time.

Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

Source: http://wefunction.com/2009/04/quality-within-web-design/

How to Create Skype-like Buttons with jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you mouseover on it, the icon on the left “jumps” for a few times. The animation looks really attractive.

Janko is going to show you how to create the Skype-like Buttons using jQuery and some simple CSS. The code is tested in Firefox, Safari and IE7.

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

Showing How Each Sorting Algorithm Operates

Sorting Algorithm Animations show 8 different sorting algorithms (Insertion, Selection, Bubble, Shell, Merge, Heap, Quick and Quick3) on 4 different initial conditions (Random, Nearly Sorted, Reversed and Few Unique).

These visualizations are intended to show how each algorithm operates and the advantages and disadvantages of each of them. It has concluded that there is no best sorting algorithm.The worse-case asymptotic behavior is not the deciding factor in choosing an algorithm. And also, the initial condition affects performance as much as the algorithm choice.

Source: http://www.sorting-algorithms.com/

More Powerful & Flexible Facebook-like TextboxList

We have mentioned TextboxList a while ago, which is something similar to Facebook List Input. Now New TextboxList has been rewritten from scratch, and it’s more powerful and flexible than ever.

It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).

Requirements: Mootools 1.2.x
Demo: http://devthought.com/projects/mootools/textboxlist/
License: License Free

GalleryView - Flexible and Attractive Content Gallery

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize. Two sets of navigation graphics are supplied to support both light and dark colored galleries.

The back and forward buttons are semi-transparent to work with any color background. GalleryView allows for users to create their own themes easily by creating only three new graphics for the pointer, back button and forward button.

Requirements: jQuery Framework
Demo: http://www.spaceforaname.com/jquery/galleryview/#demos
License: License Free

Fancy Apple.com-Style Search Suggestion jQuery Plugin

The layout of Apple.com is simple and beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly. Marco has recreated the effect by creating a Fancy Apple.com-style Search Suggestion Plugin.

It makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website.

Requirements: jQuery Framework
Demo: http://qpoit.com/marcofolio_demo/apple_search/
License: License Free

Screen Recordings Made Easy with GoView

GoView made screen recordings easy. You can start recording your computer’s screen and audio with just two clicks. Snipping out unwanted segments is as simple as using a pair of scissors. You can also insert title slides to add polish and act as section dividers. After all, your recording is instantly ready to be viewed an share online. It’s quick. It’s easy. And it’s free.

Requirements: Firefox 2.0+, Internet Explorer 6.0, 7.0
Demo: http://goview.com/
License: License Free

Polaroid Photo Viewer with CSS3 and jQuery

Marco has created a Polaroid Photo Viewer with CSS3 and jQuery by combining the CSS3 Box Shadow and Rotate properties. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s randomly rotated to the left or the right.

Sadly, CSS3 and HTML5 aren’t the standards yet. Not all modern browsers will be able to show off the full effect. It only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. If you are interested in creating a Polaroid Gallery, you can also look at the Drag and Drop Polaroid Photo Gallery in Flash?

Requirements: Safari and Google Chrome
Demo: http://demo.marcofolio.net/polaroid_photo_viewer/
License: License Free

Create a Nice & Clean Sliding Login Panel in jQuery

WebKreation has showed us how to create a Sliding Login Panel using Mootools. Recently, he has improved both the design and functionalities of the script and released a Nice and Clean Sliding Login Panel in jQuery this time. The panel overlaps content instead of pushing the content down. Although the script is really simple with the basic jQuery “SlideUp” and “SlideDown” effect, the design of the panel looks really neat and pretty. You may find it useful on some of your projects.

Requirements: IE6, IE7, Firefox, Safari, Opera and Chrome
Demo: http://web-kreation.com/demos/Sliding_login_panel_jquery/
License: License Free

jQuery iPod Drilldown and Flyout Styles Menu System

The iPod Drilldown and Flyout Styles Menu System can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.

It provides easy navigation of complex nested structures with any number of levels. They also built in the ability to customize a menu’s appearance, including active and hover states, by passing in classes as options.

Requirements: jQuery Framework
Demo: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
License: MIT, GPL License

Run All Windows Browsers Simultaneously From the Web

The Xenocode Browser Sandbox allows all popular Windows browsers to be run simultaneously, directly from the web. Web designers, system administrators, and other users can now evaluate Internet Explorer 8, 7, and 6, Mozilla Firefox, Apple Safari, Opera, and Google Chrome directly from the web in a risk-free manner.

Unlike traditional software applications, Xenocode WebApps do not require any software to be installed and allow multiple application versions to run side-by-side on any version of Windows.

You can also test your website in different browsers with Browsershots.

Source: http://www.xenocode.com/browsers/

Display Easily Accessible Tabular Data with DataTables

DataTables is a jQuery plugin for building tables. It was designed for progressive enhancement of tabular HTML data, giving the end user a wide range of options for customising the display of that data as they wish. It is very easy to integrate DataTables directly into your web-site or web-application.

The core features of DataTables includes Ajax auto loading of data, Variable length pagination, Multi-column sorting, Single column filtering, Type detection for dynamic data, Smart handling of column widths, Fully internationalisable, Themeable by CSS and it is Free!

Requirements: jQuery Framework
Demo: http://www.sprymedia.co.uk/dataTables-1.4/example_zero_config.html
License: GPL, BSD License

Growl for Rails Built on Prototype and Scriptaculous

Growl4Rails is a javascript component that provides the UI for growl-like notifications in your Rails web application. Jim Fiorato has recently added the ability to show multiple growls at once, as well as improved support for IE. You can also specify the duration and max number of growls to show.

If you are not using Rails, you can also get the Growl for jQuery and Growl for Mootools instead.

Requirements: Rails 2.1+, Prototype 1.6+, Scriptaculous 1.7+
Demo: http://github.com/jfiorato/growl4rails/tree/master
License: MIT License

Javascript Dependency Management for Ruby on Rails

Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files. It takes any number of source files and preprocesses them line-by-line in order to build a single concatenation.

Specially formatted lines act as directives to the Sprockets preprocessor, telling it to require the contents of another file or library first or to provide a set of asset files (such as images or stylesheets) to the document root. Sprockets attempts to fulfill required dependencies by searching a set of directories called the load path.

If you use and contribute to open-source JavaScript frameworks and libraries that use Sprockets, like Prototype and script.aculo.us, the build processes for those scripts can be integrated directly into your application. That makes it possible to track the latest development versions of your framework and library dependencies by adding their repositories to your Sprockets load path.

Requirements: Ruby on Rails Framework
Demo: http://getsprockets.org/
License: MIT Licenses

Chevereto - Open Source One-Click Image Hosting Script

Chevereto is an open-source image hosting script that allows you to mount your own one-click image hosting on your server. It is very simple to use, you will love it by their appearance.

It allows you to resize images, verify its integrity and integrate it with url shorteners like TinyURL. And also, you can install Chevereto quickly, requires no database and is configurable.

Requirements: PHP
Demo: http://demo.chevereto.com/
License: GPL Licenses

dfGallery 2.0 - Free Flash Gallery with Custom Themes

Few months ago, we have seen one of the best free flash galleries - dfGallery. There are a lot of great features. It allows integration of most popular photo sharing sites like Flickr , Picasa , Photo Bucket and Fotki along with background music.

Now, dfGallery 2.0 has just released. The reason for this gallery to be cool is not just its UI but the way it is built and architected. They have an amazing theme engine built to support custom themes with multiple skins for each. The administration console built on CodeIginter lets you manage multiple galleries and albums of different types.

This is just the alpha release and they expect lots of feedback to get this to its best possible.

Requirements: Flash
Demo: http://dezinerfolio.com/demo/dfgallery/dfg2/test_embed.html
License: Apache License 2.0

FancyZoom in Prototype with Small Changes

Some time ago, we have featured FancyZoom which is designed to view full-size photos and images inline without requiring a separate web page load. After few months, Orderedlist rewrote it in Prototype with some small changes.

First, He didn’t like that it used AJAX. FancyZoom in Prototype tends to lean towards the side of rendering everything and then showing and hiding, rather than loading stuff with AJAX.

Second, Cabel built his from scratch with no use of any JavaScript libraries. That is cool and all, but he almost always have Prototype and Scriptaculous included. Cabel’s version without Prototype is two scripts that weigh in at 36k. Orderedlist’s version with prototype is only 12k.

Third, Cabel’s implementation only works for images and it loads them via AJAX (to save initial page weight). He thinks that the zoom interaction is pretty interesting so he didn’t want a version limited to just images. FancyZoom in Prototype supports pretty much any html you can throw in a div (images, text, flash, etc.).

Fourth, and final, is that he liked Apple’s rounded corners, as opposed to the original fancy zoom’s square edges.

Requirements: Prototype Framework
Demo: http://orderedlist.com/demos/fancy-zoom/
License: License Free

jQuery Navigation Control to Manage Alphabetical Lists

jQuery ListNav Plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z.

Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

ListNav works great on long lists. It supports multiple lists on the same page. And it has been tested on IE6, IE7, Firefox 2 and 3 (Windows and Mac), Safari (Windows and Mac).

Requirements: jQuery Framework
Demo: http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
License: MIT, GPL License

SitePoint CSS, HTML & JavaScript Online References

The SitePoint online CSS and HTML references have been available for some time now, and have already become a valued source of free information for web designers and developers around the world. Recently, Sitepoint has announced a shiny new look to the SitePoint Reference Site and the highly anticipated first release of JavaScript Reference Information.

The look and feel of the old reference site has been completely replaced with a brand new slick, easy-to read design, including interactive examples, improved navigation, page layout and much more…

Source: SitePoint CSS, HTML & JavaScript Online References

JS Charts - Free Javascript Chart Generator

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs. It’s compatible with most web browsers. And it is It’s free to use and watermark-free.

Requirements: Firefox 1.5 +, IE 6, Safari 3.1 +, Opera 9 +
Demo: http://www.jscharts.com/examples
License: Creative Commons 3.0 License