Bookmarklets

Google Reader bookmarklets (using jQuery)

[img_assist|nid=63|title=|desc=|link=none|align=right|width=271|height=342]
I've always been annoyed that Google Reader chops off the names of my RSS feed folders in the left-hand navigation pane. At the very least, they should give you a horizontal scrollbar. And all of these titles with "..." in them to save space are also annoying.

Here's what I did to fix that (requires running the jQuery bookmarklet first):

  • Prerequisite: Append jQuery to current page
  • <a href='javascript:void(function(){$("#sub-tree").css("overflow", "auto");$("#sub-tree-item-0-main").css("width","500px");}());'>GReader Tree Scroll - adds a horizontal scrollbar to the list of folders/feeds.

[img_assist|nid=64|title=|desc=|link=none|align=|width=290|height=244]

[img_assist|nid=65|title=|desc=|link=none|align=|width=437|height=258]

Both bookmarklets above use jQuery to make the magic happen, so you'll need to run the "Append jQuery to current page" bookmarklet before you run either of the above bookmarklets.

Tell me what you think!

Add jQuery to any web page by using a bookmarklet!

I had an inspiration today: I can create a bookmarklet to append a reference to the jQuery library to any page! And, by using Firebug, I can execute custom jQuery code against a page in the console tab.

Here's the bookmarklet code: Append jQuery to current page

Simply right-click the hyperlink above and add it as a Favorite (IE) or a Bookmark (Firefox, Mozilla). Make sure you add it to your Favorites-->Links folder in IE, or your Bookmarks Toolbar in Firefox. This way you can click the toolbar to execute the bookmarklet's code.

Here's what the code looks like (in long form):

javascript:void(function(){
    // create a new script element in the DOM
    var jQscript=document.createElement('script');
    // use the latest version of the jQuery core library
    jQscript.src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
    // append the new script element to the DOM
    document.documentElement.appendChild(jQscript);
}());

The latest version of jQuery (core) can be found at: https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

Implications

Once you have appended the latest version of the jQuery library, you can use "$" syntax to access elements of the current page's DOM. You can use all of the selection, filtering, CSS modification, attribute modification, and other features that jQuery allows! It helps to have a "console" interface for executing custom Javascript, like the console in Firebug.

Note: To use some advanced UI features of jQuery, you'll also need to "attach" some optional jQuery add-on libraries (like sorting and drag-and-drop). You can experiment with the best way to do that.

Possible uses

Using this technique, you can...

  • change the the styling of elements
  • show or hide elements
  • use your imagination! (I'll probably invent and post more uses for this technique later.)

Feedback

What do you think? Do you have any ideas for using this technique?

Syndicate content