Customizing Hosted Library Services with jQuery

CUSTOMIZING HOSTEDLIBRARY SERVICES WITHjQUERY MATTHEW REIDSMA

(ANGER)

jQUERY

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

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()

WHAT IF?

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.

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

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

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

.removeClass();

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

WHAT IF?

WHAT IF?I REPLACE THEIR CSS WITH MINE

.remove();.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?

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> ‘); THUS:Smith, Joe. (2010). My awesome article. My awesomejournal. 1(1), 10-23.

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 SLIDEhttp://matmarquis.com/carousel/

INDEX.HTML:<div> <img src=”[...]” alt=”Slide One” class=”splash-image” /> <p>Lorem ipsum dolem [...] </p></div>SILDES.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> [...]  </ul></div>

$(document).ready(function() { $.get("slides.html", function(data) { $(".splash-image").replaceWith(data); $(".slidewrap").carousel({ slider: .slider }) });});

WHY jQUERY?

EXCELLENT CROSS-BROWSER SUPPORT

RAPID PROTOTYPING

USER TESTING

QUICK FIXES

MISSING FUNCTIONALITY

DESPERATION

WHYjQUERY?NOT

DEPENDENT ON BAD VENDOR PRACTICES

LIMITED TO WHAT VENDOR ALREADY PROVIDES

NOT EVERYONE HAS JAVASCRIPT SUPPORT

Clips from Just Imagine! (1930).

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

http://matthew.reidsrow.com	1198
http://libguides.gvsu.edu	3
http://feeds.feedburner.com	2
http://www.newsblur.com	2
http://translate.googleusercontent.com	1

Customizing Hosted Library Services with jQuery

by Matthew Reidsma on Jul 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 1,206

Statistics

Customizing Hosted Library Services with jQuery — Presentation Transcript