I finished my first jQuery Plugin today and I’d like to think I did a pretty darn good job. The plugin allows you to provide a way for your users to visualize products in different colors. The plugin is light and uses only two images to achieve the effect and is very flexible and can use any color you wish. You can check out the plugin’s page, look at the source code, or keep reading for more background.

The Idea

The idea came about when I had to find a solution for this exact problem at work. A client wanted a way for the customers to view their furniture in different colors, but didn’t have photographs for each color. Now, I could have Photoshopped each image with new colors, but that isn’t very flexible and requires much more work. I couldn’t find any other plugin that did what I wanted and so I was went ahead and made my own.

The Technique

The basic concept of the plugin is to have two images, laid on top of one another. One image, on bottom, would be the full photograph of the product, no editing. It was important that the photograph was a plain color, close to white, because it would make it easier to change colors. The next image is a transparent mask. The image is just all the parts of the photo you don’t want colored with the parts you want colored cut out.

Next, I just had to make a way for the user to set the background color of the mask image to an RGBa value. The mask only shows the background color where it is transparent and since we use RGBa, we get a nice alpha overlay on top of the full photo. This is, essentially, the trick.

Some Small Discoveries On The Way

When I first began writing the plugin, I wanted the product image to display and underneath a color swatch allowing the user to click through each color. I built each swatch using anchor tags and at first I was assigning each color an id and setting the background color in the CSS. After a few colors, I thought there must be a faster way. I realized that since I was holding the color values for the mask in the anchors rel attribute, I could use that same rel attribute to generate all the colors.

$(swatches).each(function(){
	var color = "rgba(" + $(this).attr('rel') + "," + o.swatchTransparency + ")";
	$(this).find('span').css('background', color);
});

Taming the IE Beast

Of course I would run into some issues with the beloved Internet Explorer. Apparently, IE6, 7, 8, and 9 don’t support RGBa colors. This made things a bit more difficult. After some research, I found that there was a workaround and so I had to use some conditionals to accommodate for our ugly friend.

if($.browser.msie) {
	color = $(this).attr('rel');
	var colors = color.split(",");
	color = colorToHex(colors);
	$(mask).css({'background': 'transparent', 'zoom': 1, 'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#80' + color + ',endColorstr=#80' + color + ')'});
}

But again, IE does not like RGB values for this filter so I had to use a method to convert the RGB values into Hex.

//rgb to hex
function colorToHex(color) {
	var red = parseInt(color[0]);
	var green = parseInt(color[1]);
	var blue = parseInt(color[2]);
	var rgb = blue | green | red;
	return rgb.toString(16);
};

The colors might not match up perfectly with the RGBa counterparts, but its close enough.

From Here On Out

Writing my first jQuery plugin was a lot of fun. I’m always looking for another challenge. I will probably try to adapt this plugin to use for products with multiple areas that can have different colors. I think it should be possible with multiple mask layers, but we’ll have to see, so stay tuned. Check out the plugin’s page for instructions on how to use it and a working demo. The plugin is licensed under an MIT license, so you’re free to do whatever, but I always appreciate a link back or a donation. Hope you enjoy the plugin.

Hey everyone! Here’s a project I’ve been working on for the past two weeks and what better time to let it go live than right after good ol’ Ricky resigns.

Santorum Mad Libs

More about the project after the jump.

Why This?

A little while back, a few of my roommates and I were talking about Rick Santorum and how everything he says is hilarious. My one friend jokes, it’s like he talks in Mad Libs. And there it was, a great idea. I’ve been looking for a small little project like this I could use my database and PHP skills and this was perfect. What better way to prove how ridiculous Santorum is then challenging the people to make his quotes even wilder than they are. In the end, the truth was stranger than fiction.

The Database

The database was simple enough. It is one table with three columns, an id (the primary key), lib (the quote), and the date of the quote. I thought of many different ways to store the quotes, but I came to the conclusion that the best way to store the quotes, with the missing word would be to put it all in one string, encasing the missing word in a delimiter. Here is an example:

"The {noun} {verb-ed} the cat"

The Code

Now onto implementation. I wanted the site to be simple. Right when a user visits the site, they are prompted with input fields for the missing words. They input their relevant words, hit submit, and the funny happens. To do this, I would have to call in a random quote from the database, easy enough. Just write a function that counts the quotes and returns a random id.

// returns count of libs in database
function getNumOfLibs() {
	$sqlstr = mysql_query('SELECT * FROM libs');
	return mysql_numrows($sqlstr);
}
// returns random lib id
function getRandomLib() {
	$num = getNumOfLibs()-1;
	return rand(0,$num);
}

Once we’ve gotten our random quote, we need a way to parse through the quote to pull out the missing words. Within the madLib class, I have a default constructor with an array property containing all the possible parts of speech for the missing words. Then I have three functions that will get the missing words. This first function that I found in the comments of php.net returns an array of the positions of all the occurrences of a given string.

function strpos_recursive($haystack, $needle, $offset = 0, $results = array()) {
	$offset = strpos($haystack, $needle, $offset); // the haystack is the quote we're searching, the needle is the string we're looking for
	if($offset === false) {
		return $results;
	} else {
		$results[] = $offset;
		return $this->strpos_recursive($haystack, $needle, ($offset + 1), $results); // recursively call the function with an incremented offset
	}
}

The next two functions I wrote that get the positions of all the missing words in the word and then a function that uses the position to get the missing word.

// returns an arry of all tags in lib
function getTags() {
	$text = $this->text;
	$positions = $this->getTagPositions($text);
	foreach ($positions as $key=>$value) {
		$i=$value+1;
		$word = '';
		while($text[$i]!='}'){
			$word = $word.$text[$i];
			$i++;
		}
		$this->tagsPos[$key] = $word;
		$this->tags[$key] = $this->defaultTags[$word];
	}
}

// returns array of tag positions
function getTagPositions($t) {
	$delim = '{';
	return $this->strpos_recursive($t,$delim);
}

After the user submits their input, most of the work is done. All the words are sent with a $_GET and we then rebuild the new quote with their input on a display page.

What’s next?

Not sure how much further I’ll take this project. It was really just a quick thing I wanted to whip up, however, it would be nice if I could modify the code to handle the ability to use a user’s input more for a missing word more than once in the quote, making for a more cohesive story. Stay tuned for any updates and if you got some better ideas for the implementation, let me know, I’m always eager to hear alternatives.

View The Source

You can check out the source on the GitHub page.

Currently working on a little project that I think has some potential. Look for it to go viral in the next week or so. I’m sure it’ll spread if you catch my drift.

I’ve been seeing quite a few websites (this one included) and tumblr blogs employing this technique. Of course, it is reminiscent of those old HTML frames found in abundance on old Geocities sites. These days with standards and CSS we can recreate those good old frames while keeping our website nice and clean.

The HTML

The basic layout uses 3 divs, a sidebar, the content area, and a container to wrap everything together. Nothing else to do here really.

<div id="container">
	<div id="side">
		Side Stuff
      	</div>
	<div id="content">
		Content
	</div>
</div>

The CSS

Now we can head on over to our stylesheet. First off, the container needs to be positioned absolutely and have the width set at 100%. That will stretch across the viewport.

#container {
	position:absolute;
	width:100%;
}

Next we can move on to our sidebar. Since the sidebar will be stationary have position:fixed and make it float: left. You’ll also want to set the width of the sidebar.

#side {
	position:fixed;
	float:left;
	overflow:hidden;
	top:0;
	left:0;
	width:305px; /* set a width */
}

And now for our content area. The margin-left will be the same as the width of your sidebar. Keep in mind that if you assigned padding to the sidebar, you’ll have to account for it in the margin. The width here is not entirely necessary and you could even place an inner div within content to contain the width.

#content {
	margin-left:305px; /* same as width of sidebar */
	height:100%;
	width:700px; /* width of content area */
}

Live Demo

View a live demo

Going Further

As seen on this very site, I have a background for my sidebar that stays fixed. To achieve this, you’ll want to assign a background-image to the container and have it repeat-y as well as be fixed.

#container {
	background:url(images/container_bg.jpg) repeat-y fixed;
	position:absolute;
	width:100%;
}

Great song too, can’t wait for a tour and possibly more…

I love conspiracies.

The Plug-in

Basically, the plug-in speeds up coding pages by replacing an unstructured list like this:

[html]Home
About Us
Portfolio
Contact[/html]

And turns it into this:

[html]
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="about-us.php">About Us</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
[/html]

All you need to do is highlight the text and run the plug-in and you get a nice little unordered-list navigation.

The Source

The plug-in is written in Ruby and is very simple. You could easily go in and modify how the list items are made and what the links should look like if my format doesn’t work for you. You’ll also notice that it replaces the word “Home” with index for the link.

[ruby]
#!/usr/bin/ruby

nav = "<ul id=’$$IP$$’>\n"
$stdin.each_line do |line|
line.rstrip!
url = line.gsub(" ", "-").gsub("Home", "index").gsub("\t", "")
nav = nav + "\t<li><a href=\""+ url.downcase + ".php\">" + line.split(" ").each{|word| word.capitalize!}.join(" ") + "</a></li>\n"
end

nav = nav + "</ul>\n"

puts nav
[/ruby]

Download

Download the plug-in and drag it into the Plug-ins folder located in Library > Application Resources > Coda.

Download QuickNav.zip (8kb)