Probably Programming

(image source)

I read a lot of web comics, and one of the things that happens when reading through the archives of a comic is that I lose my place in the history, so when I come back, I have to spend a lot of time searching to find where I left off.

I wrote this simple set of bookmarklets to help me in this situation. The “save place” bookmarklet stuffs the current URL into a cookie (cookies are per site, so there will be one cookie for each site you use this on), and the “restore place” bookmarklet takes the URL out of the cookie (if it exists) and loads that page. The “clear place” bookmarklet clears the cookie.

To use them, just drag the bookmarklets to your bookmark toolbar, or right-click on them and select “bookmark this link”.

Save Place | Restore Place | Clear Place

For those who are interested, here’s the code in function form:

function savePlace() {
    var date = new Date();
    document.cookie='ppdc_saved_location='+escape(document.location)
        +'; expires='+date.setTime(date.getTime()+22896000000)+'; path=/';
}
 
function restorePlace() {
    document.location = (function() {
         var ca = document.cookie.split(';');
         for(var i=0;i<ca.length;i++) {
             var c=ca[i];
             while (c.charAt(0)==' ') c = c.substring(1,c.length);
             if (c.indexOf('ppdc_saved_location=') == 0) 
                 return unescape(c.substring(20,c.length));
         }
         return document.location;
    })();
}
 
function clearPlace() {
    document.cookie='ppdc_saved_location=; expires=-1; path=/';
}

I based my code off the createCookie and readCookie functions from QuirksMode

I recently read about the CSS transform property, and I was inspired to give it a try in a fun and mostly useless way.

After a bit of fidding, I present to you the “Rotate!” bookmarklet (click it several times if it doesn’t work the first time):

Rotate!

Simply drag the above link to your bookmarks toolbar, and whenever you get bored with a webpage, click that link, and see what happens!

The code is pretty simple. It just gets a list of all the divs on the page, picks one of them at random, and starts rotating it. Click it multiple times, and it will rotate multiple times.

Here’s the code, formatted for your viewing pleasure:

(function() {
  var ds = document.getElementsByTagName('div');
  var d = ds[Math.round(Math.random()*ds.length)];
  function rotateHeaders(r) {
    d.style['WebkitTransform'] = d.style['MozTransform'] = 'rotate(' + r + 'deg)';
    setTimeout(function() {rotateHeaders(++r % 360);}, 100);
  }
  rotateHeaders(1);
})()

Unfortuneately, this only works in Firefox and Webkit-based browsers at the moment..wait, no, that’s pretty much ok. You IE folks out there are used to things not working in your browser by now.

With a couple small changes, you can make it scale instead: Scale!

I’ve got a project planned for the near future which will require some sort of interaction with webpages other than my own. There are two ways I’m considering doing this: browser plugin, or bookmarklet(s). The problem with doing a browser plugin is that I’d have to write a separate plugin for each browser or, worse, only support a single browser. So I’m leaning toward bookmarklets to begin with. As with most things, I figured I’d get a bit of experience with bookmarklets before trying to do anything too complicated.

My first bookmarklet

According to this page on bookmarklets, the longest I can make a bookmarklet and have it still run in every browser (read: IE6) is 488 characters. That’s hardly enough to do any sort of cool Web2.0 stuff, so I need to load in an external script. Despite what the previously linked site says, it is indeed possible to insert script tags into the header of more than just IE, so that’s what I’ll do:

(function() {
    var head = document.getElementsByTagName('head')[0];
    var newscript = document.createElement('script');
    newscript.type='text/javascript';
    newscript.src='http://probablyprogramming.com/files/bm/js/google.js';
    head.appendChild(newscript);
})()

There, only 250 characters when I take out all the whitespace and add “javascript:” to the beginning. Notice that everything is wrapped in anonymous functions; this avoids putting unnecessary stuff into global namespace, which should prevent this code from conflicting with any code already on the page it’s being inserted into. The one thing that I do put into the global namespace is the blogpaulbonsercomclosegoogle_box() function, which I named to avoid conflicts.

google.js:

function blog_paulbonser_com_close_google_box() {
    var gb = document.getElementById('blog_paulbonser_com_google_box');
    gb.parentNode.removeChild(gb);    
}
 
(function() {
    var body = document.getElementsByTagName('body')[0];
    var head = document.getElementsByTagName('head')[0];
 
    var newstyle = document.createElement('link');
    newstyle.href = "http://probablyprogramming.com/files/bm/css/google.css";
    newstyle.rel="stylesheet";
    head.appendChild(newstyle);
 
    body.innerHTML += '<div id="blog_paulbonser_com_google_box"><div><a href="#" onclick="blog_paulbonser_com_close_google_box(); return false;">Close</a></div><iframe src="http://google.com"></iframe></div>';
})();

Go ahead, give it a try.

Example Bookmarklet: open an iframe

There you go, google popping up in the middle of my page. The real power of this, however, is that it should work on any page (except for pages with frames, since they don’t have a top-level body element). If you drag the link up to your bookmark toolbar, or rightclick and select “Bookmark this link”, etc, you will then be able to go to any page, click on that bookmark, and have a google search page pop up right in the middle.

My first “useful” bookmarklet

That’s a good start, but how about something that might actually be useful? Here’s an attempt at just that.

Lightboxify Bookmarklet: lightboxify page

This bookmarklet, plus a slightly modified version of the wonderful Lightbox plugin by Lokesh Dhakar, will take any links to images on the current page and “lightboxify” them. Give it a try on this page with the links below (some random images pulled from my computer). Before running the bookmarklet, it will navigate away from this page to the image. After running it: instant fancy image gallery. (Okay, there are still no thumbnails, but that would require a bit of extra work.)

If you feel so inclined, you can also drag this bookmarklet to your bookmarks toolbar, go to the Apache-generated directory listing, and give it a whirl there, as well.

1 2 3 4 5 6 7 8