Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Goodies’ Category

Wrapper is a cross-browser HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page.

It simply wraps a HTML/CSS content & displays it within Flash without any need to compile.

Flash HTML Wrapper

A serious advantage Wrapper offers is eliminating cross-browser issues. And any content that is Flashed is available to search engines as the code is still pure HTML.

The engine also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors.

For a standard website demo, click here & for a WordPress demo, click here (don’t forget to check the sources of both pages).

imgAreaSelect is a jQuery plugin that enables you to create selectable areas on images which is a widely used technique for cropping images.

Once an area is selected, you can get the x-y coordinates & apply any actions on that part of the image like cropping or implementing effects.

jQuery Image Select Plugin

The plugin is very flexible & offers options like:

  • aspect ratio
  • max height, max width
  • opacity
  • whether it can be resize or not
  • keyboard support & more..

There is also an image crop tutorial using imgAreaSelect & PHP that can be found here.

Simple Flash Mp3 Player is a minimalistic player from Flabell (who also created this advanced Flash mp3 playersee WRD post).

It is built with AS3, offers a play-pause button & a draggable volume bar. Once the player is initiated, it displays the song info to be played.

Basic Flash Mp3 Player

There is a sound visualizer at the backend which, besides the rhythm of the music, transforms with the level of sound too.

The music to be played is set via FlashVars in the HTML code. And, the player can be customized via XML files easily.

It is possible to create stylish textboxes with auto-complete feature, just like Facebook has, using plugins for jQuery & MooTools.

For jQuery:

jQuery Auto-Complete

Autobox is a jQuery plugin that makes creating textboxes with auto-complete support easier.

Values expected can be mentioned staticly or called dynamically via Ajax requests. Documentation for the plugin can be found here.


For MooTools:

Facebook-Like Inputs

TextboxList, a MooTools plugin, for creating auto-complete enabled Facebook-like inputs has a new version (see WRD post for the old version).

It can be feeded with data from any data-source easily, makes a binary search for a better performance & offers various options for maximum flexibility.

Kap Lab is presenting 5 impressive & free visualization components for Flex.

All components are AS3 based & some of them offer multiple layout options which makes them very flexible in means of presentation.

Flex Charts

The components are:

  • Diagrammer (for diagram creation, mind mapping…)
  • Visualizer (for displaying hierarchies like organizational schemas..)
  • Radar Chart (for data analysis, comparing data items…)
  • Treemap (for inventory management, social news mapping…)
  • Ring Chart (for displaying statistics)

Examples are provided for each component with the sources & there is a support forum where users share their experiences.

P.S. Download requires a free membership.

Protovis is a JavaScript library for visualizing data using the canvas element.

Custom views of data can be composed with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.

Protovis Canvas Charts

Although Protovis looks complicated, it is very easy to understand (specially for JavaScript users) & has a straight forward logic which offers a flexible way to create any type of visualizations.

To see more, you can check the API documentation (very well-documented) & examples built with it.

Open Video Player Initiative is a community project by companies like Adobe, Microsoft, Akamai & for sharing player code and best practices around video player development and monetization

It comes with 2 versions: for Flash & Silverlight.

Open Video Player

A ready-to-deploy video player and a configuration tool (for easier configurations) is provided besides the source code.

Video player can be totally customized from colors to buttons & features included.

Demos for the player can found here.

After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag'n drop & saving the new positions to the database was working".

Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

jQuery Drag'n DropjQuery Drag'n Drop DemoDownload

The Database:

We create a simple database as below:

jQuery Drag'n Drop Database

The most important column in the database is recordListingID which shows us the order of the records.

This feature can be applied to any table by adding such a column to it.


We'll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

Here it is:

<div id="contentLeft">
		<li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>


The JavaScript:

We will be using jQuery UI's sortable plugin.

 <script type="text/javascript">

	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
			$.post("updateDB.php", order, function(theResponse){


We made the unordered list inside #contentLeft a sortable item, used the serialize function of jQuery to create the array and posted it to updateDB.php.

The PHP:

After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:


$action 				= mysql_real_escape_string($_POST['action']);
$updateRecordsArray 	= $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

	$listingCounter = 1;
	foreach ($updateRecordsArray as $recordIDValue) {

		$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
		mysql_query($query) or die('Error, insert query failed');
		$listingCounter = $listingCounter + 1;

	echo '<pre>';
	echo '</pre>';
	echo 'If you refresh the page, you will see that records will stay just as you modified.';

You can see that this is the easiest part. We handled the array as $updateRecordsArray and used it inside a for each statement.

With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that's it.

jQuery Menu is a solid menu system that helps creating dropdown, iPod drilldown and flyout styled navigations easily.

It is the updated & much improved version of the iPod-like menu mentioned here (WRD post).

jQuery Menu System

The menu system uses a hierarchical unordered list for creating the menus & sub-menus.

It is ready with ThemeRoller which makes it very easy to customize the look and has ARIA (Accessible Rich Internet Applications Suite) support.

With various configuration options & ease of use, jQuery Menu is definitely a very helpful solution for creating menus.

Sockso is an open source music server application that lets you share the music files easily with everyone.

With a very simple setup, just running an executable file, the environment is instantly ready.

Sockso Music Server

The aplication is managed from a Java GUI. User can connect through a web-based interface and:

  • create playlists
  • listen to the music via a Flash-based player
  • download tracks, albums or playlists
  • upload new music files & more.

Sockso supports MP3, OGG Vorbis, Flac, and WMA files, If needed it can re-encode output streams to save bandwidth. To see all the features of the application, click here.

Uptime Robot