Wild And Wasted

    I keep cutting and cutting it close.
    We’ll keep going until we’re a ghost.

    No matter–whatever.
    Let’s get lost together.
    And stay here forever.

    —Blondfire

Extracting CSS Selectors

Here is a function to get the CSS selector from an element:

var getElementSelector = function($el) {

	var selector 	= $el.get(0).tagName.toLowerCase();
	var id 			= $el.attr('id');
	var cssClass 	= $el.attr('class');

	if (id) 		selector += '#' + id;
	if (cssClass) 	selector += '.' + cssClass.replace(/ /g, '.');

	return selector;
};

If you have the following element in a jQuery object:
<span id="identifire" class="link-wrap">
And this jQuery object was:
$mySpan
Calling the function:
getElementSelector($mySpan)
Would return the string:
span#identifire.link-wrap

Here is another function to get the full CSS path of the element:

var getElementSelectorPath = function($el) {

	var path = getElementSelector($el);

	while($parent = $el.parent()) {

		var selector 	= getElementSelector($parent);

		if (selector.substr(0, 4) == 'html') 	return path;

		path 	= selector + ' > ' + path;
		$el 	= $parent;
	}
};

Note that this function has a dependency on the previous function getElementSelector.

Passing $mySpan to this function:
getElementSelectorPath($mySpan)
Would return a string something like this:
body > div#content-wrap > div#home > p.intro > span#identifire.link-wrap

The White Queen

I saw you there again
in this night grim and gentle
You guide me through your courts
of jesters and fears
Supplication before your throne
to gaze upon your face
It is not enough
or it is too much
This palace suffocates inside your beauty
as part of silent castles crumble

Severed Crossed Fingers

When your calling ain’t calling back to you
I’ll be side-stage mouthing lines for you
Humiliated by age, terrified of youth
I got hope but my hope isn’t helping you

Wake up puddle-eyed, sleeping in a suit
The truth is ugly well, I feel ugly too
We’ll be heroes on every bar stool
Seeing double beats not seeing one of you

Spitting our guts from their gears
Draining our spleen over years
Found my severed crossed fingers in the rubble there

Well you stole the heart right out my chest
Changed the words that I know best
Found my severed crossed fingers in the rubble there

St. Vincent

Assigning DOM Elements to a Plugin

After writing hundreds of jQuery plugins, I found this pattern for assigning DOM elements to a plugin using data attributes. Here goes:

Markup

In the markup, add data attributes that follow this pattern: data-plugin-elem-mypluginname

<div class="carousel-container">
	<div class="carousel-wrap" data-plugin-elem-mypluginname="carouselWrap">
		<div class="carousel" data-plugin-elem-mypluginname="carousel">
			<div class="carouselTile" data-plugin-elem-mypluginname="carouselTile"></div>
			<div class="carouselTile" data-plugin-elem-mypluginname="carouselTile"></div>
			<div class="carouselTile" data-plugin-elem-mypluginname="carouselTile"></div>
			<div class="carouselTile" data-plugin-elem-mypluginname="carouselTile"></div>
			<div class="carouselTile" data-plugin-elem-mypluginname="carouselTile"></div>
			<div class="carouselTile" data-plugin-elem-mypluginname="carouselTile"></div>
		</div>
	</div>

	<div class="controls">
		<a class="prev" href="#todo-prev" data-direction="prev" data-plugin-elem-mypluginname="controlPrev">
			&laquo;Prev
		</a>

		<a class="next" href="#todo-next" data-direction="next" data-plugin-elem-mypluginname="controlNext">
			&raquo;Next
		</a>
	</div>
</div>

Having the assignment in a data attribute accomplishes two things:

  1. The attribute name includes the plugin name so the markup clearly defines the association between the element and the plugin
  2. The classes are left to be used only by CSS as they were intended. If you’re working with a web designer, they can rename and reorganize the CSS classes as they see fit without disabling your plugin’s functionality and throwing Javascript errors.

Javascript Plugin

In the plugin, pull all the elements into one object for easy access:

$.fn.myPluginName = function( options ) {

	var getPluginElements = function() {

		var $pluginEls 	= _$elem.find('[data-plugin-elem-mypluginname]');
		var $els 		= {};

		$.each($pluginEls, function(i, el) {

			var $el 	= $(el);
			var elKey 	= $el.data('plugin-elem-mypluginname');

			if (typeof $els[elKey] == 'object') {
				$els[elKey] 	= $els[elKey].add($el);
			} else {
				$els[elKey] 	= $el;
			}
		});

		return $els;
	};

	var _$elem 	= $(this);
	var _$els 	= getPluginElements();

	// Your code goes here!
};

Then you can access the object properties directly as a jQuery element:

_$els.controlPrev.click();

_$els.carousel.animate(
	{ 'left': -1000 },
	{
		'duration': 1500,
		'easing': 'easeInOutQuint',
		'queue': false
	}
);

$.each(_$els.carouselTile, function(i, el) {
	// Your code goes here!
});