Gerren Design

Getting connected like never before

Sun, 14 Mar 2010 12:00:00 -0500

Long ago, in a website far, far away I downloaded and installed the Facebook Connect Commenters Plugin for Movable Type. I have to say, I was not impressed by it. Besides letting users log in and comment using their Facebook account it really doesn't leverage any of the other features of Facebook Connect. In particular, the Facebook Connect Commenters Plugin has a JavaScript file called signface.js, in which it looks like there is a half written script to post back to a user's wall. What's the point of that? Did someone just give up?

So, I set out to finish the Facebook Connect Commenters Plugin. I wanted FB users to be able to come to my site and comment without having Log in. I wanted comments to feel faster and closer mimic the comment system that Facebook uses. Lastly, and most importantly I wanted FB users to be able to quickly easily post their comments back to their Facebook wall like I did in the image below. If you want these things too, then today is your lucky day...

Galvanized to paint

Fri, 31 Jul 2009 21:59:49 -0500

Over the last two years I really haven't finished much artwork. I've been doing mostly freelance web design. This weekend though I was inspired to put my brush into action by my friend Kevin who was showing me some of his work. It reminded me just how much I miss painting.

Scud: The Disposable Assassin

Thu, 02 Jul 2009 11:57:05 -0500

What is a disposable assassin? It a solid gold killer robot you buy out of a vending machine that explodes after it kills it's target. What is a comic book? It is an ongoing or encapsulate story revolving around a protagonist. For ten long years Scud only met the former definition. In 1994 artist Rob Schrab started Scud, but in 1997 issue number 21 ended in a cliffhanger. No further issues were printed...

I gave up hope, I stopped looking.

Then, it happened I was randomly in a comic book shop and discovered that in 2007 Rob Scharb came back to Scud, and finished the series with four final issues. I highly recommend anyone who followed this in the 90s to pick up these comics.

How to make custom Select Boxes

Sun, 28 Jun 2009 12:23:11 -0500

Making forms look good is often one of the most challenging parts of being a web designer. Select boxes specifically are very difficult. They look completely different in different browsers. Lucky, there are plenty of ways to replace them with hidden input fields. However, recently I've had to deal with 3rd party custom tags that generate dynamic select boxes. The only way to style these is by allowing them to load and then use the DOM to manipulate or replace them. I couldn't find any example of his online, so I was forced to figure out how to do it myself. I hope the code below will help someone else out.

Sample:

The code:

$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
	
	var curSel = $(this);
	// get the CSS width from the original select box
	var gddWidth = $(curSel).css('width');
	var gddWidthL = gddWidth.slice(0,-2);
	var gddWidth2 = gddWidthL - 28;
	var gddWidth3 = gddWidthL - 16;
	// build the new div structure
	var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
	//get the default selected option
	var whatSelected = $(curSel).children('option:selected').text();
	//write the default
	var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 +  'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
	// create a new array of div options from the original's options
	var addItems = new Array();      
	$(curSel).children('option').each( function() {           
		var text = $(this).text();  
		var selVal = $(this).attr('value'); 
		var before =  '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + gddWidth3 + 'px;">';
		var after = '</a></li>';           
		addItems.push(before + text + after);
	});
	//hide the default from the list of options 
	var removeFirst = addItems.shift();
	// create the end of the div selectbox and close everything off
	var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
	//write everything after each selectbox
	var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
	$(curSel).after(GDD);
	//this var selects the div select box directly after each of the origials
	var nGDD = $(curSel).next('div.selectME');
	
	$(nGDD).find('li:first').addClass("first");
	
	$(nGDD).find('li:last').addClass('last');
	//handle the on click functions - push results back to old text box
	$(nGDD).click( function(e) {
		 var myTarA = $(e.target).attr('rel');
		 var myTarT = $(e.target).text();
		 var myTar = $(e.target);
		 //if closed, then open
		 if( $(nGDD).find('li').css('display') == 'none')
			{
					//this next line closes any other selectboxes that might be open
					$('div.selectME').find('li').css('display','none');
					$(nGDD).find('li').css('display','block');
					
					//if user clicks off of the div select box, then shut the whole thing down
					$(document.window || 'body').click( function(f) {
							var myTar2 = $(f.target);
							if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
					});
							return false;
			}
			else
			{      
					if (myTarA == null){
						$(nGDD).find('li').css('display','none');
								return false;
							}
							else {
								//set the value of the old select box
								$(curSel).val(myTarA);
								//set the text of the new one
								 $(nGDD).find('span.gselected').text(myTarT);
								 $(nGDD).find('li').css('display','none');
								 return false;
							}
			}
	//handle the tab index functions
	 }).focus( function(e) {

$(nGDD).find('li:first').addClass('currentDD');
		 $(nGDD).find('li:last').addClass('lastDD');
		 function checkKey(e){
			//on keypress handle functions
			function moveDown() {
				var current = $(nGDD).find('.currentDD:first');
				var next = $(nGDD).find('.currentDD').next();
				if ($(current).is('.lastDD')){
				return false;
				} else {
					$(next).addClass('currentDD');
					$(current).removeClass('currentDD');
				}
			}
			function moveUp() {
				var current = $(nGDD).find('.currentDD:first');
				var prev = $(nGDD).find('.currentDD').prev();
				if ($(current).is('.first')){
				return false;
				} else {
					$(prev).addClass('currentDD');
					$(current).removeClass('currentDD');
				}
			}
			var curText = $(nGDD).find('.currentDD:first').text();
			var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
		   switch (e.keyCode) {
				case 40:
					$(curSel).val(curVal);
					$(nGDD).find('span.gselected').text(curText);
					moveDown();
					return false;
					break;
				case 38:
					$(curSel).val(curVal);
					$(nGDD).find('span.gselected').text(curText);
					moveUp();
					return false;
					break;
				case 13:
					$(nGDD).find('li').css('display','none');
					}     
		}
		$(document).keydown(checkKey);	
	}).blur( function() {
			$(document).unbind('keydown');
	});
});
});

Update

8-4-2009

I've made a few improvements to the script based on user feed back and created a demo that you can now download;

Download the Jquery Select Box Demo

Sherlock Holmes Movie

Wed, 20 May 2009 16:05:49 -0500

The Sultan of Gamers

Tue, 19 May 2009 15:13:42 -0500

It's so beautiful...I'm speechless. As a life long geek I can tell you one of the most difficult issues to deal with is "where are we going to play?". It seems like there is never enough space, and dinning room tables just don't cut it. They are always too high, or too low, and dice are always getting lost underneath them. You always have a mess of papers and book in front of you that ends up cluttering up the game area. Plus, drinks end up getting spilled all over the place. Finally, someone came up with a brilliant and tasteful way to alleviate these issues.

Built in desk stations, book shelves, slide out cup holders, built in dice towers and channels, fig. storage chambers, pencil and dice corals... And last but not least, an enormous dropped playing table that is transparent so you can draw on it with dry erase markers and not screw up you maps below it. *sigh* if only I had the space to put it somewhere I might consider buying one. Despite it's over-whelming price tag of $8,000+

You can learn more about the Sultan Gaming table at GeekChicHQ.com, or click on read more to see a brief video showing the features of the Sultan Gaming Table.

Heffer-Weizen

Thu, 14 May 2009 17:09:59 -0500

Recently my co-worker Chris and I were discussing the finer points of brewing your own beer. He asked me to help him come up with a label for his beer bottles. I didn't have a lot of time to work on it, just 20 minutes, but this is what we came up with:

And now, a toast to two-headed cows everywhere...

Breaking Bad

Thu, 14 May 2009 17:07:04 -0500

I started watching this show a few weeks ago, one night I couldn't sleep and watched the latest 3 episodes. Since then I've become completely addicted. The story is about a high school chem teacher who finds out that he is quickly dieing of lung cancer. He quickly realizes that he'll be leaving his family behind with nothing. So, in an effort to make some money to leave them when he dies he starts secretly cooking Meth. Which he sells with his partner, a former student of his.

Mike's Wedding

Mon, 11 May 2009 06:05:56 -0500

Download all of the photos: Mikes Wedding

Swine Flu

Thu, 30 Apr 2009 17:08:22 -0500

I haven't really been paying attention to this news story, even though I'm sure that I should be. After all two kids on the same train line as me have confirmed cases of Swine Flu. Then again... I didn't die from SARS, the Bird Flu, or West Nile. I guess the guys over at the CDC are good at their jobs.

RSS feed test

Tue, 21 Apr 2009 13:56:26 -0500

lets find out.

The Final Level Up

Thu, 09 Apr 2009 13:54:42 -0500

Dave Arneson, lesser known co-creator of D&D, died today. He and Gary Gygax invented the first true role-playing game "Dungeons and Dragons" back in the early 70s. D&D had a huge influence on my life as a kid, and on my artwork as an adult. Bruce Baugh wrote an article about it here.

New Sketches

Tue, 07 Apr 2009 12:33:56 -0500

If you haven't noticed already, I've been posting new sketches lately. They are all from a huge new project I'm working on. I can't go into the details of it much, but but keep tuned. I'm producing some of my best artwork to date and I'll be posting it all as it develops. Just keep an eye on the drawing board on my homepage, or visit my portfolio section to see it all.

The Creative Process

Sun, 15 Mar 2009 13:03:43 -0500

Weekend in Hungary

Mon, 09 Mar 2009 05:35:41 -0500

Despite that I just called everyone on Skype that will read this, I'm going to write it down anyway...you know for posterity or something. This weekend wasn't bad. Work has been frustrating and I've really missed Shari a lot. Most of this trip has been a real pain in the butt, but at least the weather cleared up and I got to walk around a bit.

Saturday Derek and I went to the museum of fine arts in Hero Square. I got to see one of my favorite El Greco paintings, and a great Gustave Moreau exhibit. I realize not everyone knows what I'm talking about (dad), so I posted some pictures below.