Missing rails of light ride the edge of your eyes.
You see me missing my lines and rattle my lies.
Author: underblob
Trouble Is My Name
I had a vision: I begged and I pled.
I had a vision: I wanted to be dead.But you said there’s nothing you can do
to turn deception true.
Promise Chain
Vector by your placement,
points distort and quiver
at the elliptical arc of your spine.
You roil and gloss and mesmerize.
Like the dream of you,
it becomes complete
and with a word
washes away
to the sea.
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 World Ends with a Dick Joke
Tears from futures past tomorrow.
From their ashes, we emerge as trees.
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 youWake 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 youSpitting our guts from their gears
Draining our spleen over years
Found my severed crossed fingers in the rubble thereWell you stole the heart right out my chest
Changed the words that I know best
Found my severed crossed fingers in the rubble there
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"> «Prev </a> <a class="next" href="#todo-next" data-direction="next" data-plugin-elem-mypluginname="controlNext"> »Next </a> </div> </div>
Having the assignment in a data attribute accomplishes two things:
- The attribute name includes the plugin name so the markup clearly defines the association between the element and the plugin
- 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! });
Vector Credit
At the Kellogg’s distance
Your token waffle
Our tour of broken hearts