Jump Menu : Content | Explore | Search | Home | Sitemap | Contact | Login | Access.

Absolutely Fabulous Browser Bookmarklet Things

[ Image: Fabulous Shot of Immortal's Abbath and Horgh ] ..Or something. Frankly, I just needed an excuse to post these steaming little beauties online. Please note that I don’t lay claim 1 to most of these browser bookmarklet/favelet tricks, but I do find them extremely useful. They are posted here for the sake of convenience and for reference purposes, so use at your own risk (i.e., I am not responsible if they crash your browser). Although I use most of these bad boys with Firefox, I wouldn’t be terribly surprised if they also functioned properly in other modern browsers. Nonetheless, along with each bookmarklet/favelet thing, I try to provide as much relevant information as possible, because sometimes you just feel like you’re from another planet. Happy head-scratching!

What are these things?

“Bookmarklets,” “Favelets,” “Browser Enhancement Things” — whatever you want to call them — help increase productivity and simplify tasks executed from within your browser window. Basically, these things are stored as bookmarks and perform some task — such as resize the browser window — when they are clicked. Hmm, perhaps I should check Wikipedia for the “Official” definition .. — nah.

How do I install them?

Installation of these lil’ miracles could not be easier. In most modern browsers, simply drag and drop the bookmarklet link onto your shortcut toolbar (Firefox, Safari, et al) or right-click and “Add to Favorites” (Internet Explorer). Pretty easy. There is a more complicated method as well. Create an empty bookmark or Favorite and copy & paste the bookmarklet source code into the URL field. Either way, these things are pretty common and you shouldn’t have too much trouble. So, without further ado..

El Bookmarklet Collection Royale

Universal Element-Tweak Thing
Perhaps my favorite bookmarklet thing that I never use, this handy little Universal Element-Tweak Thing enables users to modify any/all (X)HTML element(s) on the page.
Hardcore CSS-Toggle Thing
This handy little nugget says what it does and does what it says. Throw it down toolbar-style, and enjoy uber-easy, on-demand toggling of any/all applied CSS styles on virtually any CSS-styled web document.
Alternate Version of the CSS-Toggle Thing
Another fine version of the CSS Toggler. Like before, a click of this bookmarklet automatically removes/restores styling on any (X)HTML document. A must-have for any self-respecting web designer.
Complete Mint-Refreshment Thing
For those of you using Mint to track your site’s statistics, this next bookmarklet thing is absolutely priceless. Just slap the following code into a toolbar and enjoy one-click updating of every panel in your Mint Admin screen. Works great for freshening up stale Peppermint panels with a single click, simultaneously and instantaneously. Presto! You really must experience the bliss for yourself — words just don’t do it justice. So, just who on earth is responsible for such wonderful madness? Why, Jonathan Snook, of course!
Email URL Bookmarklet Thing
This sweet little number enables you to email your associates the URL of whatever page you happen to have loaded in your browser. Simply bookmark the link and click whenever you have a page that you would like to share. Nothing would be easier!
Background Layout-Grid Thing
This handy bookmarklet is a must for serious website designers and developers. With a simple click of the bookmarklet, a layout grid is instantly applied to the body element of the document. The layout grid greatly simplifies the process of lining up elements, aligning div’s, and checking dimensions. Plus, the grid itself is completely customizable. Simply replace the repeating layout image with one that suits your needs, and then edit the bookmarklet by replacing any/all instances of http://www.andybudd.com/images/layoutgrid.png with the URL of your own image file. Thanks to Andy Budd for sharing this essential design tool.
Background Layout-Grid Toggle Thing
For a layout grid that toggles on and off with each click, be sure to snatch a copy of this excellent bookmarklet by Marcus Breese (via Andy Budd). This is the layout-grid tool of choice around here. Highly recommended. As before, the layout grid is customizable, and you may either leech bandwidth from Andy Budd, or download and tweak the image and upload to your own server. After uploading the image, simply edit the bookmarklet by replacing any/all instances of http://www.andybudd.com/images/layoutgrid.png with the URL of your own image file.
Highlight All nofollow Links
Quickly determine which links on a page are sporting link condoms with either a rel="nofollow" or rel="external nofollow" anchor attribute. Works great on any web page. Simply bookmark the following link:
Automatic Form-Completion Thing
Here is an automatic form completion bookmarklet that will save you time when leaving comments on your favorite blogs. With the click of a button, this bookmarklet will automatically populate the comment form fields with your name, email address, and website address. To use, bookmark the following link and edit the “YOURNAME” and “DOMAIN” strings to reflect your information. That’s it — go ahead and give ‘er a spin during your next blog response!
Automatic Google-Translation Thing
This bookmarklet enables you to quickly translate any page via Google’s free translation service 2. Simply bookmark the link and click to translate whatever page you happen to have loaded in your browser window.
XRAY Box-Model Display Thing
This fine bookmarklet displays (X)HTML/CSS information for any box-model element on the page. To use it, load a page, click the bookmarklet link, and let the page reload again. After that, simply click on any page element for which you would like to “XRAY.” According to the official XRAY site, the XRAY bookmarklet works on almost every major modern browser except Opera. Note: this bookmarklet loads an external JavaScript file from the developer’s site.
Syncotype Baseline-Grid Thing
The Syncotype bookmarklet enables on-the-fly creation and adjustment of baseline grids, which are very useful in aligning text during the design process. After activating the Syncotype bookmarklet, simply enter your line-height and offset values (in pixels) and click the “Syncotype it” button to overlay the adjustable baseline grid. To adjust the grid, enter new values and click “Redraw”; to clear the grid, click “Clear.” Note: this bookmarklet loads an external JavaScript file from the developer’s site.
View Cookies of any Host or Domain
Here is a great tool for examining the cookies used by any web host or domain. Simply save the bookmarklet link to your bookmarks/favorites and click when visiting any website to display any associated cookie information.
Outline all div containers
For layout and web design purposes, this bookmarklet is an excellent tool that will definitely save you time. With a simple click every div on the page will be immediately outlined with a nice dashed border. Then, with every div outlined, designers may quickly determine alignment, spacing, and so on. Definitely worth a shot!
Automatic Word-Count Thing
Quickly and easily determine the total number of words on any web page with this excellent bookmarklet thing.
Linking Sites via Google
Easily assess which sites are linking to any given web page according to Google.
Indexed Pages from this Site on Google
Easily check which pages from any given site have been indexed by Google.
Automatic Web Page-Validation Things
Here is an excellent collection of web development bookmarklets that enable on-the-fly validation of your web pages. Simply bookmark any of the following links and enjoy super-easy validation for your pages. Thanks again to Andy Budd for sharing his collection!
Automatic Browser-Resize Things
These handy bookmarklet things say what they do and do what they say! Add any of the following bookmarklets to your browser’s bookmarks (favorites, whatever), and enjoy instant browser-resizing functionality at your fingertips. Simply grab, gulp, and go!

Here is the (generalized) code:

javascript:self.resizeTo(x,y);self.moveTo(x,y);

To customize the resize bookmarklet, edit any of the following parameters to suit your needs:

  • Edit: resizeTo(x,y) → the x sets the width of the resized browser
  • Edit: resizeTo(x,y) → the y sets the height of the resized browser
  • Edit: moveTo(x,y) → the x sets the horizontal position of the browser
  • Edit: moveTo(x,y) → the y sets the vertical position of the browser
Bookmark-This-Page Thing
Well, okay, technically this next bookmarklet thing isn’t a bookmarklet at all. But it is a neat little JavaScript function that is super easy to use. Plus, it is an official “thing” and even contains the word “bookmark” in it’s name. What exactly is it? The following code creates a “Bookmark Us!” link on your web page that enables visitors to easily add your site to their Bookmarks or Favorites. To use, simply copy & paste into the body of your (X)HTML document. Visitors with capable browsers will enjoy the JavaScript functionality, while those without will figure it out via obligatory link text (Ctrl+D).
< a href="#" onclick="javascript:window.external.AddFavorite('http://your-domain.tld/','Your Domain Name');" return false>
   	Bookmark us! (Ctrl+D)
< /a>

And there you go!

Footnotes

About this article

This is article #376, posted by Jeff Starr on Tuesday, July 24, 2007 @ 09:03am. Categorized as Nothing, and tagged with no tags Updated on July 24, 2007. Visited 2798 times. 5 Responses »

BookmarkTrackbackCommentSubscribeExplore

« Permanently Redirect a Specific IP Request for a Single Page via htaccess • Up • Another Mystery Solved »


5 Responses

1 • July 24, 2007 at 11:58 am — Perishable says:

AAAARRRRGGGHHHH!!! This post took me forever to finish!!! ( - and it’s still not done! )

2 • July 24, 2007 at 1:03 pm — Perishable says:

You would not believe the difficulties I experienced trying to post this article… Apparently, WordPress (or something on my server) did not like all of the JavaScript code used in the bookmarklet links. After trying and failing to post/edit directly via the database, I had no choice but to post this via a custom page. But even that threw problems at me! Finally, after slaving away at what should have been a no-brainer post publishing, I managed to wrangle the code into shape. Needless to say, the article that finally made it online is completely different than the one I had originally prepared. Oh well, live and learn! Oh yeah, the point.. please be understanding if there are still a few quirks leftover from the posting battle — code was ripped asunder, butchered, and cooked on high before I finally had to leave the area.. let me know if anything doesn’t work or fails to make sense, etc.. - thanks!

3 • July 25, 2007 at 9:38 pm — Jack Book says:

I know what you feel.
i’ve been there before. it’s a great list. thanks for your time and effort. it must be useful for your readers.

4 • May 4, 2008 at 3:15 am — sindhu says:

i came in here from google looking for bookmarklets.

i remember having seen one of this bookmarklet that allowed to club multiple bookmarklets into one. any clue what am talking about?

5 • May 4, 2008 at 7:02 am — Perishable says:

Sorry, no.. but thanks for visiting ;)

Drop a comment



Set CSS to lite theme
Set CSS to dark theme