jQuery Printed Footer Links

nospam@example.com (Brendon Kozlowski) — Mon, 08 Mar 2010 11:52:51 -0800

I was randomly perusing the web and stumbled across an older interesting List Apart article (September 19, 2005 to be exact). In it, the author used JavaScript to create a list of all links found on the page, and then create a footer with a footnote-like list. I was using simple CSS to display the URL of the hyperlink in print display media, but that doesn't work in some browsers (IE), and worse off it can really mess up the visual order of the page.

Inspired by the article's intentions, I decided to use some jQuery to whip up a similar solution and I took the opportunity to use jQuery 1.4's new syntax for object creation (so this is 1.4 code only - see comments for a 1.3.x solution). Differences? I exclude hyperlinks set to the hash symbol (#) which shouldn't be found anyway (graceful degredation people!), "mailto" links, and I don't find link element's citations (blockquote "cite" property). I also believe his script would grab image information, but I'm not entirely sure, mine only searches hyperlinks. I also opted not to exclude listings of duplicate hyperlink values. If it's found twice, it lists it in the footer twice. Less JS processing, and more clear to the visitor (in my opinion).

Expected Issues: It requires JavaScript (and the jQuery library included on your page). If JavaScript is enabled but CSS is disabled, the hidden content will be visible to the user.

On to the code!

First thing's first, we should find the links in our code that we'd like to target. For my situation, I have a content class defined on my page for all content, and the column that contains the actual body is called ".col2_right" (yes, I know, ignore the fact of the poor naming scheme). So, in jQuery, we're going to target all hyperlinks found in the col2_right and content classes, but we don't want to include links to hashes or mailto links. I've also removed listing to nofollow links, but that is my choice (probably not a good one, but I digress).

We'll also need some sort of container to keep these found links wrapped in. I chose to use a fieldset and legend, you could just as easily create a DIV and a H2 or other tags for your own purposes. I also want to create an ordered list to match the found hyperlinks.

Here comes the real center, meaty goodness of the script: looping through our list of found hyperlinks, creating a little notification text next to the hyperlink's text, and add the hyperlink URL itself to the footnote section in the ordered list as a list item.

We use jQuery's each() method to loop through the items in the array, grab the link's URL so that we can do some testing on it, and modify it's value for inclusion in to the footnotes. Some links may be relative URLs, but that doesn't mean much to someone who doesn't know what a relative URL is. In fact, it would probably confuse me too at first. I then create a span tag to hold the associated footnote number (the ListApart article used a superscript tag, I found regular text is more easily readable), add a class to it so it's only visible when printed, and create my list item element with the URL from our link, and place those elements in to the document in the appropriate places with the appendTo jQuery function.

Last but not least, we append our entire footnote to the end of our content body section. The full code is below.

$(document).ready(function(){
	//get the container and target
	var links = $('.col2_right.content a[href]:not([href^=#],[href^=mailto],[rel=nofollow])');

if($(links).length){
		//create a container and heading for the footnotes
		var footnotesWrapper = $('<fieldset>', {
			css: {
				clear: 'both'
			}
		}).addClass('print_only');
		var footnotesLabel = $('<legend>', {
			text: 'Website Addresses Used in the Document'
		}).appendTo(footnotesWrapper);

//create an OL to hold the footnotes
		var footnoteList = $('<ol>').appendTo(footnotesWrapper);

$.each(links, function(i){
			var linkText = $(this).text();
			var linkValue = $(this).attr('href');
			if(linkValue.substring(0,1) === '/'){
				linkValue = 'http://'+document.location.host + linkValue;
			}
			//create element to hold span with class to hide except on print
			var newElement = $('<span>', {
				text: ' ['+ ++i +']'
			}).addClass('print_only').appendTo($(this));

var listEntry = $('<li>', {
				text: linkValue
			}).appendTo(footnoteList);
		});

// append the heading and <ol> to the target
		$('.col2_right.content').append(footnotesWrapper);
	}
});

Note the added "if" statement to check the length of the links variable. If it is empty, we did not find any links and don't want to create any extra markup when printing the page.

Oh, and the CSS: ".print_only { display:none; }" This should be placed in your normal style sheet, and leave it out from your print style sheet. If you don't have a print style sheet, extend it a bit: @media print { .print_only { display:none; } }

Note: Thanks to Stiles to provide some fixes and compatibility changes for jQuery 1.3.x.

Style Switcher with jQuery

nospam@example.com (Brendon Kozlowski) — Wed, 07 Apr 2010 07:41:52 -0700

While developing an Adobe AIR application using CSS/HTML/JS, I decided I wanted to allow for templating of the application. The default template has the ability to switch view states (horizontal, or vertical). Since I'm building the application with CSS, HTML and JavaScript (with jQuery), I thought that in order to create this effect, I'd use a style switcher.

I then thought...hey, I wonder if this would work in browsers other than the WebKit version I've been testing under?!

It worked in Firefox 3.6.3, Opera 10.51, Chrome 5.0.342.8 beta, and Internet Explorer 6 (although my test CSS was broken in IE6). Opera 10.50 (tested first) had an issue with loading the secondary CSS on first attempt, but had it cached after that. 10.51 loaded everything just fine, but I can't be sure if it was still cached from the attempt with 10.50, or if 10.51 fixed an unknown issue to help fix it.

So, how did I do it?

Back in the day, Firefox had a little-known and not-often-used feature that allowed web-designers to incorporate multiple CSS layouts/designs right in the site, and the users could choose on-the-fly which UI they'd like to use (on each session) by going to View, Page Style, and then choose the style you wanted - if more than a single style was available from within the code. To give users this option, you include secondary stylesheets after the first, but in the link element, you specify that it's an alternative stylesheet, as so:

I originally started with this concept and tried swapping out the primary for the secondary and vice versa. Unfortunately this had some issues during development that may have been related to some other problems, but I dropped this attempt (but if Opera has a problem with caching, this route would solve that). Instead, I simply changed the href property of the link element. It was easier to target with jQuery without using URL matching/REGEX, or arbitrary naming of the rel property.

Anyhow, here's the code that I used (in this example, I am clicking on a button with ID of "switch"):

What this is doing:

Bind an onClick event to the element with an id of "switch"
find the LINK element of a media type of screen that contains an href property and assign it to the variable "cssStyle"
fade out the application (or a website wrapper?)
swap the CSS style for another (inline), depending on what's currently loaded
fade the application (or website wrapper) back in with new style

...and we now have our style swapped out (quickly and easily) for an entirely new style.

mysiteonline™ - Web Development

jQuery Printed Footer Links

Style Switcher with jQuery