A friend of mine was asking about the effect I use for the social media icons in the sidebar here. I told him that's personal and I would prefer he not bring up such iniquitous filth in the polite company of my daughter. When I realized he was talking about my website, I figured I would apologize by writing up a quick article about it and some of the caveats I ran into.

There's actually not really much to the effect. I've made use of sprites, a small amount of CSS, and just a simple Javascript function aptly named socialCritters to achieve a nice UI element effect. There are a few things to keep in mind, however, so let's get to it, yea?

The Sprite

As you can see, a very simple image with each of the icons I use (and a few I am not yet using), evenly spaced for easy access via background-position.

Unfortunately I no longer have the name of the artist that designed these icons (which I usually keep in the directory with the icons themselves). If anyone does know, please contact me so I may give proper attribution.

The HTML

<a href="#" class="global-social" style="background-position: -106px 13px;">RSS 2.0</a>
<a href="#" class="global-social" style="background-position: -70px 13px;">FaceBook</a>
<a href="#" class="global-social" style="background-position: 2px 13px;">Delicious Bookmarks</a>
<a href="#" class="global-social" style="background-position: -34px 13px;">Digg Profile</a>
<a href="#" class="global-social" style="background-position: -214px 13px;">Follow me on Twitter</a>

Herein lies the caveat. It would seem as though Internet Explorer has issues with certain styles retrieved via MooTools' getStyle() method, background-position being one of them. Luckily there's an easy fix, specify the style inline. Normally I would completely advise against this, but as it is crucial to the functionality of this code, and not something likely to be effected by a global stylesheet change, it should be okay this once.

The CSS

.global-social {
	width: 36px;
	height: 32px;
	cursor: pointer;
	font-size: 0.0em;
	background: url(/library/media/icons/social/social_bar_icos.png) no-repeat;
	padding-bottom: 6px;
	border-bottom: 1px solid #111;
	border-bottom-color: rgba(155,155,155,0.2);
	margin-left: 10px;
	display: block;
	float: right;
	text-indent: -10000em;
	-moz-box-shadow: 0 2px 0 -1px #151515, 0 5px 0 -3px #393939, 0 5px 2px -3px rgba(57,57,57,0.7);
	-webkit-box-shadow: 0 2px 0 #151515, 0 5px 0 -3px #393939, 0 5px 2px rgba(57,57,57,0.7);
	box-shadow: 0 3px 4px -4px rgba(230,230,230,0.6);
}

Simple enough, right? Creates a block level element with the proper width and height, sets the background image and applies a few effects with the border and box shadow css attributes.

The Javascript

This code requires Mootools, of course. Make sure you grab 1.2.4 or 1.2.1-3 and grab the getSiblings element method from David Walsh's site.

function socialCritters() {
	$$('a.global-social').each(function(_el) {
		var bpX = $(_el).getStyle('background-position').split(" ")[0];
		_el.set('morph', {'duration':200,'link':'cancel'})
		.store('bpx', bpX)
		.addEvents({
			'mouseenter': function() {
				// Call FX.Morph and change background-position keeping the correct X offset
				this.morph({'opacity':1, 'background-position': this.retrieve('bpx') + ' 9px'});

				// Get this element's siblings and set their background-position to their defaults
				// also tone down their opacity for a more dramatic effect.
				$each(this.getSiblings('a'), function(_elem) {
					_elem.morph({'opacity':0.3, 'background-position': _elem.retrieve('bpx') + ' 13px'});
				});
			},
			'mouseleave': function() {
				// Same as mouseenter, 'cept backwards.
				this.morph({'opacity':1, 'background-position': this.retrieve('bpx') + ' 13px'});

				// make sure all elements are returned to their default positions.
				$each(this.getSiblings('a'), function(_elem) {
					_elem.morph({'opacity':1, 'background-position': _elem.retrieve('bpx') + ' 13px'});
				});
			}
		});
	});
}
window.addEvent('domready', function() { socialCritters(); });

So what's going on here? First we use the Mootools $$ function to get an array of the HTMLElements we want to work with. We use the CSS selector a.global-social to easily grab just the appropriate elements. Next we set a few default values, one for the element's Fx.Morph attribute, and the other we get the default background-position X coordinate and store it in the element storage with the key of bpx.

After that we've only to set the mouseenter and mouseleave events to trigger the animation and opacity changes required for each event.

That's all there is to it! Remember to call the socialCritters() function in an window domready event with a
window.addEvent('domready', function(){ socialCritters(); });
statement and your golden. Have fun with it and if you modify it or come up with any cool alternatives, please feel free to let me know here!

You may have noticed the little "Support Us" image off in the right-hand navigation over there. Yea, right over there... go ahead and take a look. See it? Great. Now you may have just asked yourself, WTF is that anyway, and how can I support my favorite authors whom provide me with the quality content I enjoy reading on a near daily basis? After you've pondered that a moment, you may then drift off and ask yourself "And who was the frickin' genius who came up with the coloring code for milk jugs, and why doesn't skim milk have those pretty lil' pink tops anymore?".

Of course, I would then have to pontificate; Yea, what the hell did happen to the pink caps, and are you sure they were the skim milks? And why does Canada have to be so retarded* about the whole deal?

But I digress. SprinklePenny provides an extremely easy to use service that allows us to support the sites we love by way of what they call tiny payments *cough* Micro-Payments *cough*. When you register with them, you decide how much you want to spend, and you decide how much goes to which sites that you want to support, and distribution is handled automatically simply by visiting said sites. It's a brilliant frickin' idea, really!

So far I've seen only one issue with the service... no Mootools integration. Well now, we can fix that quite easily.

SprinklePenny Integration

SprinklePenny integration is really quite simple for content providers, simply place a small bit of html code on the page, a little bit of JQuery code, and make sure you have the JQuery library included as well. Short and sweet, eh? The same can just as easily be done in Mootools.

HTML Code

<div id="sprinklepenny">
	
</div>

Easy enough, yea? Simply replace the /images/ajax-loader.gif with your own Ajax animated loading image, and that part's done.

Javascript Code

First make sure you have the Mootools library loaded on your page, you can even load it from Google's sweet-ass API CDN.

<script 
	type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js">
</script>

Sorry about the weird line breaks, still trying to flesh out my code highlighter. Grrrrr.

Then include this little bit of code either directly in the page (not recommended) or in a Javascript file of your own (Very recommended).

var publisherId = YOUR_PUBLISHER_ID;
window.addEvent('load', function() {
	var element = document.id('sprinklepenny');
	var jsnp = new Request.JSONP({
		callbackKey: 'jsoncallback',
		url: 'http://www.sprinklepenny.com/visits/add',
		data: {
			publisher: publisherId,
			articleTitle: encodeURIComponent(document.title)
		},
		onComplete: function(data) {
			var fx = new Fx.Tween(element, {
				'property': 'opacity',
				'link':'chain'
			})
			.start(0)
			.chain(function() { element.set('html', data.link); fx.start(1); })
		}
	}).send();
});

You will, of course, want to replace the var publisherId = 500; with the publisher ID given to you by SprinklePenny after signing up! Whala, done. Pretty Painless, right? Make sure you tell all your friends, and their friends too!

Well now, this is different, yea? For those of you coming here expecting to see the Mavenous online dictionary, my sincerest apologies. I've decided to take Maveno.us on a new journey. I have kept a backup of the old dictionary site, and, with enough requests/threats, I will put it back up in a different capacity. Again, my deepest apologies.

The Idea

For those of you that know me as a programmer, this is probably what you expected to see if ever you've ventured onto this site. I've felt like the mechanic who's car is always broke down due to there only being 19 hours in the day I'm allowed to remain awake. I've gone through literally 20+ designs for this site, and finally realized that my OCD will never allow me to be completely happy with any design I come up with, so I need to go a different route.

I've decided to make a compromise and put up what I have, and create a series of articles which chronicles the progression of this site.

The Catalyst

I figure you can't get any closer to providing real world examples, than to show the incremental process of a site live-time. I want this site to not only be a repository for reference and knowledge, but even more so, a catalyst that provides an all encompassing platform from which to fully understand the lessons I'll (hopefully) be able to provide.

Throughout the eleven years I've been learning web design, I've soaked up all the knowledge I could, from any source I was able to find. Historically, I've been able to retain information that was gained from in-depth examples that allowed you to get your hands covered in the guts of the code. Sometimes it's messy, but after you've showered off, and had time to digest what you just disassembled, it seems that is what stuck with me the most.

Anyhow, that is what I hope to bring to the party. I want to provide the type of information that I was privy to back in the late 90's when I was first jumping in the deep end of the pool. We didn't even have lifeguards back then. Okay enough with the damn grandpa jokes.

No seriously, knock it off; it's already bad enough coping with the fact that I'm nearly thirty years-old, I don't need you harping on me too.

The Deal

Here's the thing, I don't believe in censorship. I will never censor any of you, so long as what you have to say is productive to the task at hand, and of at least some minute amount of merit. I will never delete or edit a post simply because you said fuck, goddamnit, or cowabunga. I care more about what it is that you have to say, rather than how you say it. I'm more than willing to help those that are willing to help themselves, and I will do so with at least a modicum of respect.

I'm still trying to work out a good format for which to accomplish all this, and hopefully it'll be one that is conducive to learning, and of value to at least someone. I guess what I'm trying to say is, it may be a bit sporadic around here for a while, but that's how I roll.