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 may already be familiar with the name xcolor, which denotes my PHP color class. However, I've come to realize that performing color calculations on the server side is somewhat unconventional and infrequent, as colors are predominantly required in the user interface. Consequently, I embarked on developing version 2 of xcolor in JavaScript some time ago. This new iteration encompasses the entire feature set of the PHP version, along with a few supplementary methods. The primary focus of this class was on both speed and accuracy, ensuring it meets the demands of performance and precision. It has successfully passed all of my unit tests. Nevertheless, I encourage you to test the class yourselves and provide any feedback, whether it pertains to errors or suggestions for improvement. Additionally, I invite you to explore the creation of innovative applications utilizing the xcolor plugin.

The majority of color manipulation functions within this plugin draw inspiration from the principles found in common graphic programs. Initially, I began by scrutinizing color behaviors and subsequently incorporated more intricate methods, requiring additional research. Below is a brief excerpt of the API. For further details, please refer to the documentation and demo page, meticulously designed to offer examples alongside concise descriptions.

<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>

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>