When we are developing web applications, we always need some kind of dialog boxes to inform the users the status of the system. Leigeber has put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success.

JavaScript dialog box library is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files. The Divs are dynamically added to the DOM when the function is called. The function currently relies on a content wrapper to calculate the page height however you could use the body height but the background overlay would only cover the currently visible content. The variable for the wrapper ID as well as the speed and timer settings are available at the top of the JS file. The script is tested working in IE 6/7, Firefox 2/3, Opera and Safari.

Requirements: -
Demo: http://sandbox.leigeber.com/dialog/dialog_box.html
License: License Free

• 3 Comments

It is time to have some icons again. This time, Icojoy is sharing some of the really nice mini icons. These icons are free to use in any kind of project unlimited times. The icons come in 6 different file types, .ico, .icns, .tif, .gif, .bmp, .png. Some of the icons are designed for blogs, dating, player and social networks as well.

Requirements: -
Demo: http://www.icojoy.com/blogs/3/
License: License Free

• 8 Comments

Masked Input Plugin is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

A mask is defined by a format made up of mask and placeholder characters. Any character not in the placeholder character list below is considered a mask character. Mask characters will be automatically entered for the user as they type and will not be able to be removed by the user. The following placeholder characters are predefined:

* a - Represents an alpha character (A-Z,a-z)
* 9 - Represents a numeric character (0-9)
* * - Represents an alphanumeric character (A-Z,a-z,0-9)

It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera. The file size is very small with only 7.3k and 2.8k for the Packed version.

Requirements: jQuery Framework
Demo: http://digitalbush.com/projects/masked-input-plugin
License: License Free

• 7 Comments

If you are using Mac OS X, you should have come across Growl. Growl is a notification system for Mac OS X, it allows applications that support Growl to send you notifications. Notifications are a way for your applications to provide you with new information, without you having to switch from the application you’re already in. I think this feature is really useful for our web applications as well. Daniel Mota has created Growl 2.0 with Mootools, so that we can easily integrate this effect into our web applications.

Requirements: MootoolsFramework
Demo: http://icebeat.bitacoras.com/mootools/growl/
License: License Free

• 12 Comments

Coda is one of the new web development tools for the Mac - and it’s popular amongst designers and developers. Panic (the developers of Coda) are also known for their sharp design. Now, we can have a fancy popup bubble tooltips with jQuery. Remy Sharp from jQueryforDesigners has showed us how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect.

This effect could be perfected by changing the initial reset (popup.css()) code to read from the trigger element and approximate it’s position. In the example, jQueryforDesigners has hardcoded it because he only has one on the page - but you may want to use this effect several times across your page.

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/coda-bubble.html
License: License Free

• 5 Comments

Yes, we all love Google Analytics. However, it does not stop us looking at other good alternatives. W3Counter is your free, hosted website analytics solution for answering the key questions about your website: who’s your audience, how they find your site, and what interests them. There’s no installation, no configuration, and tracking starts as soon as you copy-and-paste a snippet of code into your website. Here is a list of features you can find on W3Counter, but not on Google Analytics.

Follow Your Visitors
Since W3Counter’s service is truly real-time, you can follow visitors as they browse your website. See who’s online at any time and their entire path from referring source to the page they’re currently viewing. Plus, view detailed activity for visitors that have recently left your site as well.

Visitor Identification
Label your visitors, as easily as installing a plugin on a WordPress blog or adding a few lines of JavaScript to your membership or customer-based website. Your labels will appear in your reports of online and recent visitors, where you can view all the past activity of each member or customer on your website.

Web Stats Widgets
Share your web stats with the world. Embed them in your website or blog with 7 different widgets including visitor maps, top pages, top searches, weekly visit graphs and a live feed of the most recent people on your site. You can even pull up a click overlay of your site without logging in to W3Counter.

Tracking Feedburner Feed Stats
You can track your Feedburner Feed Stats easily with W3Counter. It shows Circulation, Hits and Reach for your Feedburner account by using Feedburner API. It also shows us a beautiful line chart for your RSS Stats as well.

Many small website owners remain on the free plan. However, free accounts are limited to websites receiving under 5,000 daily page views.

Requirements: -
Demo: http://www.w3counter.com/stats/2
License: License Free

• 7 Comments

Font Cubes is where you can find the a lot of free PC fonts and free Mac Fonts from the best font artists in the world. You can download any fonts easily by clicking the “Download” button. Registering as a member will allow you to access Font Cubes’s unique font management system. By registering, you could keep track on your favourite fonts by fontmarking them and asside of that, you could also use the system to keep track of font you have used in your project as well. However, the fonts listed in Font Cubes are the font author’s property. Please contact the authors for further consultation regarding the use of the listed fonts for.

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

• 6 Comments

ColorToy 2.0 is a Flash based color scheme generator and picker. It generates complementary color schemes based on your inputted color values or randomly. There are three ways to use ColorToy.

1. Enter a RGB value. e.g. 211,21,52 and hit “Submit RGB”. ColorToy 2.0 will then generate your complementary color scheme.
2. Enter a HEX value e.g. #c0ffee and hit “Submit Hex”. ColorToy 2.0 will then generate your complementary color scheme based on your HEX value.
3. Hitting “Random” will generate a random color and associated complementary color scheme. Go on, give it a click.

You can also check out the collection of other useful Color Scheme Generators we have mentioned on WebAppers a while ago.

Requirements: -
Demo: http://www.defencemechanism.com/color/
License: License Free

• 1 Comment

Woopra is a web-tracking & analysis tool. It is mainly targeted for small to medium websites ranging from few hundreds up to tens of thousands of daily page views. Essentially, it is targeted for blogs interested in the most minuscule details of every single action. In addition, Woopra provides a precise real-time streaming of every single activity on the website. Woopra also features a clean interface, including many graphical visualization components, such as charts, maps, panels… Along with many other clean and advanced options that make Woopra an ideal solution for webmasters who desire to discern all the aspects of their website. Here are the main features of Woopra.

Live Tracking
Webmaster will be immediately updated with all the actions taking place on his website. Woopra makes tracking seamless with its inherent live technology.

Rich Interface
Woopra provides an intuitive interface to display complex data sets (such as maps, charts, etc…) , without discarding the balance between design and function, creating elegant data visualizations.

Activity Search
Woopra log shows you all the events on your website in chronological order, offering an outstanding tool to go back in time and identify all the actions that took place.

Instant Messaging
Woopra enables you to engage your visitors by starting a conversation with them; a friendly popup will appear on the web page to establish the chat. Also, Woopra provides your visitors with a special link on the page, to be able to start a conversation.

Notifications
By putting valuable information around real-time data, Woopra provides an on-demand notification component highlight operational data and apply intelligence to make the data actionable and to spot special events.

Developer Tools
For developers and enthusiast users, Woopra provides a full featured API that allows extracting a website’s data into several common web 2.0 formats, making it useful for use within your own application.

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

• 14 Comments

Jayhan present you the vector dotted world map free for download. It comes with three different dot sizes which is fine, medium and large to cater for different purpose and needs. This dotted world map is based on the world map resource from Deviant Art, and Jayhan overlay a dotted pattern on top and slowly remove the unwanted dots to form the shape of the world. It took Jayhan several days to accomplish this. UK was missing in the map. However, Dotted world map vector V1.1 has now included UK as well.

Requirements: -
Demo: http://www.jay-han.com/2008/01/06/dotted-world-map-vector…
License: License Free

• 3 Comments