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