Thursday, May 26, 2005

Item Hider Bookmarklet Tahdah! (sp?) It's my first published bookmarklet, the Item Hider (see the next link). jm - Item Hider *By the way, this bookmarklet opens up a new window with a dynamic web interface, so you will need to hold the <Ctrl> key while clicking the link in IE. In other browsers, you will need to allow popups for the current page or site that you are visiting (this is a pain :-( ). It was originally just an experiment in writing a bookmarklet, but it turned into something very handy: a way to create your own printer-friendly page, no matter whether the publisher provides one or not! I was trying to print some content on Eric Sink's weblog about source control and configuration management. Unfortunately, his site uses tables and is not designed well for printing. The net result was that, when I printed, I ended up with all of the left-side navigation menu and only part of the right-side content. I was left guessing which two or three words were missing at the end of each line. I made an interesting discovery during all of this: when printing, Internet Explorer preserves the results of DHTML changes to the current document, even if they are the result of bookmarklet-appended code! In other words, my bookmarklet gave me the ability to hide Eric's navigation cell in the site layout. When I printed, the navigation was not included, and the output looked like it was designed to be printer-friendly from the start. Just out of curiosity, I also tested the bookmarklet and print preview preservation on Mozilla for Linux (Mandrake 10.1). The bookmarklet code worked there too! Very cool! The Item Hider bookmarklet is also good for hiding advertisements that you don't want to print. Save the ink and the paper! In some cases advertisements are included in <IFRAME> tags; in others, they are tables with embedded images. While I was on the track of hiding images, I realized that my code was searching for elements, not attributes. This means that any document element that supports the background attribute would not be affected by my image hiding. To some extent, this didn't matter, because most browsers don't print background images for tables or cells anyway--but I was determined to find a way to hide those as well. To address the issue, I constructed a way to "swap" attribute values, specifically the background attribute. When I swap the value of the attribute with an alternative value, I use the getAttribute and setAttribute methods of the element to write the previous value to a custom attribute. In this way, I was able to swap the background attribute's value with an empty string, thus blanking out the background as well. I'm so proud of my bookmarklet, I'm going to link to Jon Udell's weblog article about the library lookup bookmarklet so he might find it. Then again, maybe I should just link to Jon Udell's weblog in general. It's not very fancy, mind you. But I'm proud of it all the same, especially because it has a practical application.

Item 583, Permalink [] posted 5:20:34 PM   comment []         Google It!      Categories:  » E-Publishing Explosion «  » Personal Software Integration «  » Tech Blogs 4 God «