• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Customizing Hosted Library Services with jQuery
 

Customizing Hosted Library Services with jQuery

on

  • 4,295 views

Every library struggles to provide some sort of unified experience for its users, despite using hosted solutions for many of its resources. Getting these varied sites designed by countless different ...

Every library struggles to provide some sort of unified experience for its users, despite using hosted solutions for many of its resources. Getting these varied sites designed by countless different vendors to look like part of your library's site can be a challenge. I've found great success in combating the lackluster HTML and CSS of library vendors by using jQuery to make the page I want, rather than the page I have. I'll show some examples of projects I've completed as well as the Open Source projects they have spawned (360Link Reset, hasMedia?).

Statistics

Views

Total Views
4,295
Views on SlideShare
1,423
Embed Views
2,872

Actions

Likes
4
Downloads
6
Comments
0

7 Embeds 2,872

http://matthew.reidsrow.com 2822
http://library-online-data.tumblr.com 37
http://libguides.gvsu.edu 4
http://webcache.googleusercontent.com 4
http://feeds.feedburner.com 2
http://www.newsblur.com 2
http://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Customizing Hosted Library Services with jQuery Customizing Hosted Library Services with jQuery Presentation Transcript

  • CUSTOMIZING HOSTEDLIBRARY SERVICES WITHjQUERY MATTHEW REIDSMA
  • (ANGER)
  • jQUERY
  • 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()
  • 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.
  • 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”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
  • <table id=”CandyWrapper” class=”CandyWrapper”>
  • .removeClass();
  • $(“table”).removeClass(“CandyWrapper”);
  • <table id=”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> [...] <!-- etc. --> </ul></div>
  • $(document).ready(function() { $.get("slides.html", function(data) { $(".splash-image").replaceWith(data); $(".slidewrap").carousel({ slider: .slider }) });});
  • FTW!
  • 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