My jQuery Playground

Probably the biggest problem of a high degree of specialization may be that learning outcomes can be long in coming if you do not even open up new areas of studies for yourself. So I was looking for a system that I've never used before. The second criterion was that I wanted to quickly achieve results to have something demonstratable at the end of the day. Thus, I have to announce two new jQuery plugins, which are really useful - at least, I hope you also see the benefits :-)

jQuery xcolor plugin

Some of you already know the name xcolor. It's the name of my color class written in PHP. But I thought, calculating colors on the server side is an untypical and seldom process, because colors are mostly needed in the user interface. For that reason, I've started developing v2 of xcolor in JavaScript a while ago. The full featureset of the PHP version is also implemented with the new version and a few additional methods. The main concern of the class was speed and accuracy. It also passed all of my unit tests, but you're asked to test the class and report errors or suggesions. You are also asked to develop cool applications using the xcolor plugin.

Most color manipulation functions of this plugin are based on ideas of common graphic-programs. I started analyzing the behavior of the colors and later added more complex methods which needed a bit more research. What now follows is a little sample of the API. For the rest, read the documentation and demo page, which I designed to provide an example besides short description.

<script type="text/javascript">

$(document).ready(function() {

	// Gets the red portion of the color
	var red = $.xcolor.red('#916412');

	// Gets the red portion of the color
	var blue = $.xcolor.blue('#aaa');

	// Mix the two colors
	var avg = $.xcolor.average(red, blue);

	// Get the color as hex value
	alert(avg);

	if ($("#text").isReadable()) {
		alert("Container #text is readable!");
	} else {
		alert("Please adapt the color of the container!");
	}

	// Animate a link hover with smooth color change
	$("a").hover(function() {
		$(this).animate({ backgroundColor: "red" }, 500);
	},function() {
		$(this).animate({ backgroundColor: "#fff" }, 300);
	});

</script>

For those of you, who want to use the library without jQuery, the source is also available. The only difference to the jQuery solution might be, that you have two classes, which are veiled inside of the jQuery interface. xColor is used as input parser and xColorMix is the real method collection. Internally $.xcolor is initialized like so:

$.xcolor = new xColorMix();

jQuery borderStyle plugin

I wrote at some point the method excludeLargestAmmount(), which searches for the largest ammount in an array, splits it out and leave the rest in the array. This way, the method is predestined to optimize border radii settings. borderStyle was my first jQuery plugin to become familar with the API. The plugin adds a new method borderStyle() to the jQuery selector to modify border styles. I also wrote a little parser to pass the arguments as string besides the general object handling. By calling the method without parameters, you'll get the border styles of the first selected element. Examples:

<script type="text/javascript">

$(document).ready(function() {

	// Set border attributes to the element with id #label
	$("#label").borderStyle("topLeftRadius: 33, bottomRightRadius: 50,normalRadius:10,style:dashed,unit:pt ;color:red");

	// Set border attributes using an object
	$(".colored").borderStyle({ width: 5, topLeftRadius: 10, style: 'dashed', color: 'blue' });

	// Set all border radii to 50px
	$("#box").borderStyle(50);

	// Retrieve all border styles of the first link in the document
	alert($("a").borderStyle());

});

</script>

You might also be interested in the following

• Camara support in HTML5 and JavaScript
• jQuery Pagination revised
• Handy PHP classes
• Derivation of Pagination Calculation

Sorry, comments are closed for this article. Contact me if you want to leave a note.