Categories
2011 Conference

Rip Into Your Site With jQuery #heweb11

View Session Description and Presenter Bio

Jason was a pinch-hitter for this session about miscellaneous jQuery bits – and provided us with 45 minutes of demoing jQuery live on various website. The purpose of the demo was to show some ways you can use jQuery in a development/debugging sense — as well as just some general “jQuery is awesomeness and unicorns” nibbly bits.

If you’re wanting to play around with some of Jason’s examples — get Firefox, then install Firebug extension, then install the Firequery extension.  Last step — put the JQuerify bookmarklet up in your bookmarks toolbar. This will have you ready to go to make some magic…

DOM spelunking, hacker style

  • highlight all absolute links (if you have a policy that all links should be relative, this helps you find incorrectly formatted links really easily; or the reverse, if all links SHOULD be absolute, you can highlight those that aren’t) 
    1
2
3
4
5
6
7
8

    // Example site used: www.cornell.edu
// - absolute links
absolute = jQuery('a[href*="http"]')
// - relative links
relative = jQuery('a').not('[href*="http"]')
// ... turn them bright yellow
absolute.css('background-color','yellow')
absolute.css('background-color','inherit')
  • Highlight block element edges 
    1
2

    jQuery('*').filter(function() { return jQuery(this).css('display') == 'block'; }).css('outline', '1px solid #0000FF');
jQuery('*').filter(function() { return jQuery(this).css('display') == 'block'; }).css('outline', 'none');
  • display elements ancestor (having layout problems? display an element and all its parent elements with boxes) 
    1
2

    // Highlight ancestor element edges
jQuery('*').slice(130,131).parents().css('outline', '1px solid #0000FF');

Contributor Helpers

  • add google analytics click-tracking automatically to all a hrefs 
    1
2
3

    // Add Google Analytics click-tracking
// note: the following is buggy in that it doesn't account for a possible existing query string or one with utm_campaign in it already
jQuery('a').each(function (i,e) { jQuery(e).attr('href', jQuery(e).attr('href') + '?utm_campaign=asdf') })
  • automatically apply alternating table backgrounds 
    1
2
3
4
5
6

    // Automatically apply alternating table backgrounds
// EXAMPLE site - http://www.ualr.edu/classes/201110_20.htm
jQuery('tr:even').css('background-color','lightBlue')
jQuery('tr').css('background-color','inherit')
// OR apply a background only to rows that include a label field
jQuery.each(jQuery.unique( jQuery('td.pllabel').parent().get() ), function(i,e) { jQuery(e).css('background-color','lightBlue') })
  • add pdf/word/xls icons to links that include those content types 
    1
2
3

    // Add "It's a PDF" icons
// example site - http://www.cornell.edu/reimagining/
$("a[href$='.pdf']").each(function() { jQuery(this).css('padding-left', parseInt(jQuery(this).css('padding-left')) + 15).css('background-image','url(http://www.cordonline.com/_/css/i/1pdf_icon_small.gif)').css('background-repeat','no-repeat') })

Contributor Watchdogs

  • automatically strip undesirable styles (strong, i, b, etc) 
    1
2
3

    // Automatically strip undesirable styles
// Example - http://www.belmont.edu/instres/index.html
jQuery('strong').each(function (i,e) { jQuery(e).replaceWith(jQuery(e).text()) })
  • highlight undesirable links 
    1
2
3
4

    // ... turn undesirable links (say, to the current server) bright yellow
// Example site - http://www.cornell.edu/reimagining/
onsite = jQuery('a[href*="http"]').filter(function() { return jQuery(this).attr('href').indexOf(window.location.hostname) != -1 })
onsite.css('background-color','yellow')
  • eliminate click here links (HA! jQuery example replaces any links that consist of “click here” with –  “I should not be linking to click here text. fix this.” So when the user saves the page, they would see that link.  Not sure this is actually possible in a live environment … but if you have a staging server, you could TOTALLY do this!) 
    1
2
3

    // Example site - http://ualr.edu/alumni/index.php/2011/03/17/taste-of-new-orleans-ualr-alumni-signature-event/
jQuery('*').filter(function() { return /click here/i.test(jQuery(this).text()) }).filter('a')
jQuery('*').filter(function() { return /click here/i.test(jQuery(this).text()) }).filter('a').replaceWith('<strong>I should not be linking Click Here text</strong>')
  • html resize detection/crop fixup (users manually resizing images, which don’t maintain proportions — have jQuery look to see if the natural size of the image doesn’t match the hard coded size — if it doesn’t match — force it to display at it’s natural size;  again, not sure you can use this in a live environment … but you can definitely see the applicability for a dev environment.) 
    1
2
3
4
5
6

    // HTML Resize Detection / Crop Fixup
// detect and make ugly non-cropped images
// http://ualr.edu/alumni/
x = jQuery('img').filter(function() { return ((this.naturalHeight != jQuery(this).height()) || (this.naturalWidth != jQuery(this).width())) } )
jQuery('img').filter(function() { return ((this.naturalHeight != jQuery(this).height()) || (this.naturalWidth != jQuery(this).width())) } ).removeAttr('width').removeAttr('height').removeAttr('style')
jQuery('img').filter(function() { return ((this.naturalHeight != jQuery(this).height()) || (this.naturalWidth != jQuery(this).width())) } ).each(function (i,e) { jQuery(e).wrap('<div style="height: '+jQuery(e).height()+'px; width: '+jQuery(e).width()+'px; overflow:hidden;" />').attr('height',e.naturalHeight).attr('width',e.naturalWidth).css('height', e.naturalHeight).css('width', e.naturalWidth); })

Eye Candy

  • Change animation properties 
    1
2
3
4
5
6
7
8

    // Example - http://www.belmont.edu/academicprograms/index.html
$('#accordion h3').unbind('click');
$("#accordion h3").click(function(){
    $(this).next(".links")
	.slideToggle(10)
	.siblings(".links")
	.slideUp(10);
});
  • Group catalog entries (this one was a great example of formatting some pretty unwieldy content into a much more usable format — all done without touching that source data!!) 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    // Group catalog entries
// http://undergraduatecatalog.richmond.edu/search.html?searchStr=a&Search.x=0&Search.y=0&Search=Go&searchType=simple&CONTENTTYPE=courses&catShort=UnderGrad
$ul = jQuery('<ul style="float: left; list-style: none outside none; margin: 0; padding: 0;">');
$seen = {};
$counter = 0;
jQuery('#main_content p strong a').each(function() {
    $this = jQuery(this);
    $dept = $this.text().substring(0,4);
    if (!$seen[$dept]) {
	$seen[$dept] = true;
	$id = 'edui-' + $counter;
	$ul.append(jQuery('<li style="float: left; padding-right: 5px; margin-left:0px;">').append(jQuery('<a>').attr('href','#'+$id).text($dept)));
	$ul.append(jQuery('<li style="float: left; padding-right: 5px; margin-left:0px;">').text('|'));
	$this.attr('id', $id);
	$counter = $counter + 1;
    }
});
jQuery('#main_content h1').after($ul).after('<div style="clear: both">');
  • Expand all accordions (hate hidden content — just expand it all!) 
    1
2
3
4
5

    // add an expand all button
// http://financialaid.richmond.edu/undergrad/forms.html
jQuery('div.profileGroup h2').after(jQuery('<a>').text('Expand All').click(function() {
    jQuery(this).closest('.profileGroup').find('.collapsible').click();
}));

Share this: