Open Source Resources for Web Application Developers

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

Requirements: Internet Explorer, Firefox, Opera and Safari
Demo: http://zendold.lojcomm.com.br/icarousel/
License: MIT License

Would you like a scrolling ticker for your site? First of all look at Newsticker created by Bartelme. Since many web developers already use the Prototype JavaScript Framework, and he also wanted to use Scriptaculous for some nice animations for Newsticker. It transforms any given unordered list into a News Ticker. The news fade in and out and you can click on “x” to close it.

Gian Carlo Mingati has created a jQuery News Ticker called liScroll which is very easy to use. It transforms any given unordered list into a scrolling News Ticker automatically as well. If you want your list to scroll faster or slower than the default value, modify the travelocity param. The scrolling automatically pauses when you mouse over it. If you would like to pull your news items from a xml file, You should check out his xml-based newsticker with fade in and out effect and xml-based newsticker scrolling effect as well.

Matt Berseth has created a CNN Style Scrolling Ticker with the Marquee Toolkit Control. It supports both left-to-right and right-to-left scrolling directions. You can easily apply a CSS class to the item when it is moused over. And also it support dynamically repopulating the marquee after it has finished scrolling.

Demo: Bartelme Newsticker
Demo: Gian Carlo Mingati liScroll
Demo: Gian Carlo Mingati xml-based newsticker with fade in and out effect
Demo: Gian Carlo Mingati xml-based newsticker with scrolling effect
Demo: Matt Berseth Scrolling Ticker with the Marquee Toolkit Control

Nick La from WebDesignerWall shows us how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced list menu utilizing the CSS position property. You can view the working example here.

Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.

Requirements: -
Demo: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
License: License Free

When trying to conceive ways in which space could be saved on a web page Andy Sellick decided a sliding menu would work well as shown in the images below. He decided to use mootools due to the smoothness of their effects, however, this could just as easily be developed in script.aculo.us or other JavaScript libraries.

You can easily customise the look of the sliding menu by CSS. However there may be some CSS issues in Safari but as yet he haven’t had the time to fully test and fix potential bugs. The next pitfall to note is the lack of degradability with JavaScript turned off, however, this will be fixed very soon.

Requirements: Javascript Enabled and Mootools Framework
Demo: http://www.andrewsellick.com/examples/sliding-side-bar/
License: License Free

There are plenty of DHTML tabs scripts out there but most of them are either poorly coded, library/framework dependend or bloated with unnecessary functionality. So Grzegorz Wójcik has decided to come up with this simple, yet functional tab interface implementation. It is called Yetii, stands for Yet (E)Another Tab Interface Implementation. It has the following features.

• extremely lightweight, object-oriented code
• gracefull degradation in browsers without JavaScript
• you can specify initial tab
• you can customize class names
• you can turn on automatic tabs rotation
• you can have many tab interfaces on a single page

Requirements: No Requirements
Demo: http://www.kminek.pl/lab/yetii/
License: License Free

We love Mac, we love Fish Eye Menu. The idea behind a fisheye control is a strip of icons, being vertical or horizontally laid out that reacts to the user’s mouse as it approaches the icon. Here is a list of Nice Fish Eye Menu for you to dowload and use it in your web application.

CSS Dock Menu

Fish Eye Menu for Prototypejs

Fish Eye Menu for Mootools

DHTML Fish Eye Menu for Text

Fish Eye Menu Tutorial

CSSplay has released 15 professional horizontal menus. All using the sliding doors technique so that the menu items will fit the text. These menus work in all the latest browsers. Some of them are Mac style, and some of them are Windows Vista style. You can use them in both personal and commercial projects. You can use these menus as part of your application interface. You can also use it in your “Paid Projects” for your clients.

Requirements: No Requirements
Demo: http://www.cssplay.co.uk/menus/pro_horizontal.html
License: License Free

Phatfusion has showed us another way to build our menu, he has created a image menu with the aid of Mootools framework. It looks really good and easy to use. It is very similar to the menu design of Mootools Official Website. It has the following features.

• It allows onClick event keeps selected item open.
• Click open item to close.
• Specify a function for the onClick event.
• Auto open when the page loads.

Requirements: Mootools Framework
Demo: http://www.phatfusion.net/imagemenu/index.htm
License: MIT License

Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. It is about 2 KB ( 1.5 KB Minified). It is Unobstrusive which plays nice with Javascript turned off and uses its own namespace, so it won’t messed up with your codes. The menu styling can be easily defined in external CSS. It is also a Full A-Graded browsers support (Opera is supported through Ctrl + Left Click). It looks very tidy and suitable for web applications with context menu.

Requirements: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+
Demo: http://yura.thinkweb2.com/scripting/contextMenu/
License: License Free