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)
// 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
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)
// 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
// 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
// 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
// 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)
// 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
// ... 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!)
// 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('I should not be linking Click Here text') - 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.)
// 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('').attr('height',e.naturalHeight).attr('width',e.naturalWidth).css('height', e.naturalHeight).css('width', e.naturalWidth); })
Eye Candy
- Change animation properties
// 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!!)
// 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('- ');
$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('
- ').append(jQuery('').attr('href','#'+$id).text($dept)));
$ul.append(jQuery('
- ').text('|')); $this.attr('id', $id); $counter = $counter + 1; } }); jQuery('#main_content h1').after($ul).after('
');- Expand all accordions (hate hidden content — just expand it all!)
// add an expand all button // http://financialaid.richmond.edu/undergrad/forms.html jQuery('div.profileGroup h2').after(jQuery('').text('Expand All').click(function() { jQuery(this).closest('.profileGroup').find('.collapsible').click(); })); - ').text('|')); $this.attr('id', $id); $counter = $counter + 1; } }); jQuery('#main_content h1').after($ul).after('
- ').append(jQuery('').attr('href','#'+$id).text($dept)));
$ul.append(jQuery('