CUSTOMIZING HOSTED LIBRARY SERVICES WITH MATTHEW REIDSMA jQUERY
May 10, 2015
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
<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
[email protected] :: @mreidsmamatthewreidsma.com :: gvsu.edu/library/labs