CUSTOMIZING HOSTED LIBRARY SERVICES WITH

MATTHEW REIDSMA

jQUERY

(ANGER)

jQUERY

Photograph by Matthew Oliphant: http://www.flickr.com/photos/fajalar/5685561863/

animatable.com/demos/madmanimation/

animatable.com/demos/madmanimation/

jQUERY

<h1><b>Mad</b>manimation</h1>

<ol><li id=”scene01”>[...]</li><li id=”scene02”>[...]</li><li id=”scene03”>[...]</li><li id=”scene04”>[...]</li><li id=”scene05”>[...]</li><li id=”scene06”>[...]</li>[...]</ol>

if (Modernizr.cssanimations) { $("h1").prepend('<a href="#">Watch</a> ') $("#scene-01").append('[...]');

[...]

}

.prepend()

.append()

QuickTime™ and aGIF decompressor

are needed to see this picture.

WHAT IF?I STRIP INLINE STYLES

.removeAttr()

PREVIOUSLY:<table align=”center” width=”100%” border=”0” cellspacing=”2” cellpadding=”0” style=”color: #000;” class=”CandyWrapper” id=”CandyWrapper”>

ETC.

PREVIOUSLY:<table align=”center” width=”100%” border=”0” cellspacing=”2” cellpadding=”0” style=”color: #000;” class=”CandyWrapper” id=”CandyWrapper”>

ETC.

$(“table”).removeAttr(“align”);

$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);

$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);BAM.

<table id=”CandyWrapper” class=”CandyWrapper”>

.removeClass();

$(“table”).removeClass(“CandyWrapper”);

<table id=”CandyWrapper”>

WHAT IF?I REPLACE THEIR CSS WITH MINE

.remove();

.replaceWith();.replaceWith();

.append();

ONE STYLE SHEET?

$(“head link”).replaceWith(“<link [...] >”);

STYLESHEETS & STYLESHEETS & STYLESHEETS, OH MY!

$(“head link”).remove();$(“head style”).remove();

THUS:

$(“head”).append(“<link [...] >”);

GETTING THERE.

WHAT IF?I GRAB DATA, ERASE TABLES, AND SUPPLY STANDARDS-BASED,

SEMANTIC HTML?

.attr();

.text();

.replaceWith();

CITATION TABLE<table id=”CandyWrapper”> [...]<table class=”SS_CitationTable”> [...]

<td id=”Title”><div>Vital Speeches of the Day</div>

[...]

</table></table>

<a class=”link” href=”[...]”>Refworks</a>

[...]

GIMME VAR

var journalTitle = $(“td#Title”).text();

var refWorksURL = $(“a.link:contains(‘RefWorks’)”).attr(“href”);

$(“table#CandyWrapper table.SS_Citation”).replaceWith(‘<div id=”citation”>

<span id=”author”>’ + authorName + ‘</span>.<span id=”date”>(’ + articleDate + ‘)</span>.<cite id=”article”>’ + articleTitle + ‘</cite>.<span id=”journal”><i>’ + journalTitle + ‘</i></span>.<span id=”volume”>’ + journalVol + ‘</span><span id=”issue”>(’ + journalIssue + ‘)</span>,<span id=”pages”> ‘ + pages + ‘.</span><a href=”’ + refWorksURL + ‘“>RefWorks</a>

</div>‘);

Smith, Joe. (2010). My awesome article. My awesome journal. 1(1), 10-23.

THUS:

NOT JUST A PRETTY FACE.

var metaData = $(“td.description_col2”).text();var hasMovie = “Moving Image”;

if(metaData.indexOf(hasMovie) != -1) {

$(“#tabs”).prepend(‘<video controls>

<source src=”[...]” type=”video/ogg”><source src=”[...]” type=”video/mp4”>[...]

</video>‘);

}

jQUERY &

PROGRESSIVE ENHANCEMENT

LET’S SLIDE

http://matmarquis.com/carousel/

<div><img src=”[...]” alt=”Slide One” class=”splash-image” />

<p>Lorem ipsum dolem [...] </p></div>

SILDES.HTML:

INDEX.HTML:

<div class=”slidewrap”>

<ul class=”slider”><li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li><li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li><li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li>[...] <!-- etc. -->

</ul>

</div>

$(document).ready(function() { $.get("slides.html", function(data) {

$(".splash-image").replaceWith(data); $(".slidewrap").carousel({ slider: '.slider' }) });

});

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and aGIF decompressor

are needed to see this picture.

FTW!

jQUERY?WHY

QuickTime™ and a decompressor

are needed to see this picture.

EXCELLENT CROSS-BROWSER SUPPORT

QuickTime™ and a decompressor

are needed to see this picture.

RAPID PROTOTYPING

QuickTime™ and a decompressor

are needed to see this picture.

USER TESTING

QuickTime™ and a decompressor

are needed to see this picture.

QUICK FIXES

QuickTime™ and a decompressor

are needed to see this picture.

MISSING FUNCTIONALIT

Y

QuickTime™ and a decompressor

are needed to see this picture.

DESPERATION

jQUERY?WHYNOT

QuickTime™ and a decompressor

are needed to see this picture.

DEPENDENT ON BAD VENDOR PRACTICES

QuickTime™ and a decompressor

are needed to see this picture.

LIMITED TO WHAT VENDOR ALREADY PROVIDES

QuickTime™ and a decompressor

are needed to see this picture.

NOT EVERYONE HAS JAVASCRIPT SUPPORT

QuickTime™ and a decompressor

are needed to see this picture.

Clips from Just Imagine! (1930).

THANKYOU

reidsmam@gvsu.edu :: @mreidsmamatthewreidsma.com :: gvsu.edu/library/labs