Your SlideShare is downloading. ×
0
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Customizing Hosted Library Services with jQuery

4,218

Published on

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?).

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,218
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • Transcript

    • 1. CUSTOMIZING HOSTEDLIBRARY SERVICES WITHjQUERY MATTHEW REIDSMA
    • 2. (ANGER)
    • 3. jQUERY
    • 4. jQUERY
    • 5. Photograph by Matthew Oliphant: http://www.flickr.com/photos/fajalar/5685561863/
    • 6. animatable.com/demos/madmanimation/
    • 7. animatable.com/demos/madmanimation/
    • 8. jQUERY
    • 9. <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>
    • 10. if (Modernizr.cssanimations) { $("h1").prepend(<a href="#">Watch</a> ) $("#scene-01").append([...]); [...]}
    • 11. .prepend().append()
    • 12. WHAT IF?
    • 13. WHAT IF?I STRIP INLINE STYLES
    • 14. .removeAttr()
    • 15. PREVIOUSLY:<table align=”center” width=”100%” border=”0”cellspacing=”2” cellpadding=”0” style=”color: #000;”class=”CandyWrapper” id=”CandyWrapper”> ETC.
    • 16. PREVIOUSLY:<table align=”center” width=”100%” border=”0”cellspacing=”2” cellpadding=”0” style=”color: #000;”class=”CandyWrapper” id=”CandyWrapper”> ETC.
    • 17. $(“table”).removeAttr(“align”);
    • 18. $(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
    • 19. $(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
    • 20. BAM.$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
    • 21. <table id=”CandyWrapper” class=”CandyWrapper”>
    • 22. .removeClass();
    • 23. $(“table”).removeClass(“CandyWrapper”);
    • 24. <table id=”CandyWrapper”>
    • 25. WHAT IF?
    • 26. WHAT IF?I REPLACE THEIR CSS WITH MINE
    • 27. .remove();.replaceWith(); .append();
    • 28. ONE STYLE SHEET?$(“head link”).replaceWith(“<link [...] >”);
    • 29. STYLESHEETS & STYLESHEETS & STYLESHEETS, OH MY! $(“head link”).remove(); $(“head style”).remove(); THUS: $(“head”).append(“<link [...] >”);
    • 30. GETTING THERE.
    • 31. WHAT IF?
    • 32. WHAT IF?I GRAB DATA, ERASE TABLES, AND SUPPLY STANDARDS-BASED, SEMANTIC HTML?
    • 33. .attr(); .text();.replaceWith();
    • 34. 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>
    • 35. GIMME VAR var journalTitle = $(“td#Title”).text();var refWorksURL =$(“a.link:contains(‘RefWorks’)”).attr(“href”);
    • 36. $(“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.
    • 37. NOT JUST A PRETTY FACE.
    • 38. 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> ‘);}
    • 39. jQUERY &PROGRESSIVE ENHANCEMENT
    • 40. LET’S SLIDEhttp://matmarquis.com/carousel/
    • 41. 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>
    • 42. $(document).ready(function() { $.get("slides.html", function(data) { $(".splash-image").replaceWith(data); $(".slidewrap").carousel({ slider: .slider }) });});
    • 43. FTW!
    • 44. WHY jQUERY?
    • 45. EXCELLENT CROSS-BROWSER SUPPORT
    • 46. RAPID PROTOTYPING
    • 47. USER TESTING
    • 48. QUICK FIXES
    • 49. MISSING FUNCTIONALITY
    • 50. DESPERATION
    • 51. WHYjQUERY?NOT
    • 52. DEPENDENT ON BAD VENDOR PRACTICES
    • 53. LIMITED TO WHAT VENDOR ALREADY PROVIDES
    • 54. NOT EVERYONE HAS JAVASCRIPT SUPPORT
    • 55. Clips from Just Imagine! (1930).
    • 56. THANKYOUreidsmam@gvsu.edu :: @mreidsmamatthewreidsma.com :: gvsu.edu/library/labs

    ×