“Back and Forth” Greasemonkey For The Whole Web

Recently I wrote a Greasemonkey script to add keyboard shortcuts to The Big Picture, to improve on some of their already existing shortcuts. Once I started using some of the shortcuts I made I ended up wanting to use them all over the place at other blogs. This functionality is so tiny, but so useful, that I bundled it into its own script that runs on all web pages!

Grab it here:

//
// ==UserScript==
// @name          Back and Forth
// @namespace     http://blog.bogojoker.com
// @description   Keyboard Shortcut to Jump back and forth on a page. (esc key).
// @include       *
// @version       1.0 - Initial Version - Sunday February 15, 2009
// ==/UserScript==

(function() {
  
  // Global States
  var x = null;
  var y = null;

  // Add a new Global Key Listener for `esc`
  document.addEventListener("keypress", function(e) {
    if(!e) e=window.event;
    var key = e.keyCode ? e.keyCode : e.which;
    if ( key == 27 ) {
      var tempx = x;
      var tempy = y;
      x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
      y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
      if ( tempx != null ) { // First time it should be null
        window.scrollTo(tempx, tempy);
      }
    }
  }, true);

})();

On any webpage the first time you push the `esc` key position A gets stored. The next time you push `esc` position B gets stored and the browser jumps to position A. The next time you push it, A gets stored and you jump to B. So you always jump back to wherever you pushed `esc` last. Hence the name “back and forth.”

This is useful to me when I jump between comments and the content. When I’m reading a comment and I want to check back to the article, I just just push `esc` to save my position, go back to the article, and when I’m all set I just jump back to my saved position (the comments) with `esc`.

Short, Sweet, Simple: The Back and Forth Greasemonkey Script.

More Big Picture Keyboard Functionality!

I’ve mentioned before how I’m a big fan of The Big Picture blog. One of the things that makes it so great is that it has keyboard navigation! You can use ‘j’ and ‘k’ to automatically jump between pictures. Its so much nicer then scrolling because it jumps to the exact height to maximize the picture in the browser. Huge usability improvement!

Like before, the problem I had was that users were mentioning pictures in their comments. Jumping back to that picture was hard or annoying. So, I wrote a Greasemonkey script that allows you to type in a number and it will automatically jump to that picture! Click here to get the script!

Oh, and if you’re reading comments and you want to jump back and forth between images and comments that works too. Once you’ve jumped to the image, just hit ‘esc’ and you will be taken back to where you were before. Too cool!

//
// ==UserScript==
// @name          The Big Picture Keyboard Enhancements
// @namespace     http://blog.bogojoker.com
// @description   Keyboard Shortcut Enhancements
// @include       http://www.boston.com/bigpicture/*
// @version       1.1 - Added Back+Forth - Thursday February 12, 2009
//                1.0 - Initial Version - Monday February 9, 2009
//
//
//   This allows the user to type in numbers, and after about
//   a half second it will jump directly to that image.
//   For example:
//
//     Push '1'... '2'... User is taken directly to Image "12"
//     Push '9'... '9'... User is taken to the last picture.
//
//   Use 'esc' to jump back and forth between two positions.
//   For example if a comment mentions picture 4:
//
//     Push '4'...        User is taken directory to Image "4"
//     Push 'esc'         User is taken back to the comment!
//     Push 'esc'         User is taken back to Image "4"
//
// ==/UserScript==

(function() {
  
  // GreaseMonkey (Firefox - unsafeWindow) and GreaseKit (Safari - window)
  var w = ( /a/[-1]=='a') ? unsafeWindow : window;

  // Global States
  var x, y;
  var keypressnumber  = false;
  var builtupnumber   = '';
  var quicknumtimeout = null;
  var imgArr = document.getElementsByClassName("bpImage");
  
  // Keep the old and create a New Global Keypress listener on top of it
  document.addEventListener("keypress", function(e) {
    

    // Get the key
    if(!e) e=window.event;
    var key = e.keyCode ? e.keyCode : e.which;
    
    // Store the current x/y position
    function storePos() { 
      x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
      y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    }
    
    // # Character => Jump to that image, Store Position
    if ( key >= 48 && key <= 57 ) {
      if ( e.target.nodeName.match(/TEXTAREA|INPUT/) ) return;
      clearTimeout(quicknumtimeout);
      keypressnumber = true;
      builtupnumber += (key - 0x30);
      quicknumtimeout = setTimeout(function() {
        w['currImg'] = parseInt(builtupnumber,10)-1;
        if (w['currImg'] >= imgArr.length) { w['currImg'] = imgArr.length-1; }
        storePos();       
        window.scrollTo(0,imgArr[ w['currImg'] ].offsetTop+174);
        keypressnumber = false;
        builtupnumber = '';
        quicknumtimeout = null;
      }, 300);
    }
    
    // Esc => Jump back to a Saved Position
    if ( key == 27 ) {
      var tempx = x; var tempy = y; storePos();
      window.scrollTo(tempx, tempy);
    }   

  }, true);

})();

All I do is register a new global keyboard listener to catch numeric keys and act accordingly. I tested thoroughly on Firefox and Safari to make sure it works correctly in all cases. It jumps to the correct image, it maintains the “current image” so j/k will still work, it won’t jump if you’re typing in a textfield/input, etc. It even properly handles situations that the current j/k functionality doesn’t. For instance mine allows the user to type in the comment box, click outside the box and reuse the keyboard shortcuts. When you type a j/k or even click inside the search box at the top the j/k functionality is gone. I didn’t feel like correcting that in this Greasemonkey script in case it gets fixed by the developers behind the Big Picture. (Note to those developers: reset isLoaded back to true or take a different approach.)

I’m open to New Ideas. I have some myself but I have to focus on schoolwork in these next few weeks. Let me know if you want anything.

Big Picture Keyboard Commands Greasemonkey Script!

Enjoy.

Stack Overflow – Edit Summary Quicklinks

I requested a feature to make the few edit summary suggestions clickable. I, like many developers, don’t normally let my keys leave the keyboard. However, this was one case where I felt making those suggestions of “corrected spelling” and “fixed grammar” should automatically be inserted.

Showing the Usage

Well the suggestion was declined. I can’t blame the team. Nobody upvoted the suggestion. But I felt strongly enough about it, and knew that it was very simple to implement that I whipped up a GreaseMonkey script to do it myself. The script runs like a charm and even adds a few extra suggestions to the original three. It handles formatting and commas all automatically, so don’t worry about a thing, just click. Enjoy!

Script to Add Edit Summary Quicklinks

Script to Prevent Blank Edit Summaries

UPDATE: Fixed to use keng’s URL and added just plain old stackoverflow.com without the beta sub-domain in preparation for a launch. Thanks keng!

DOUBLE UPDATE: Sam put out a “wanted ad” for a Greasemonkey script to prevent blank edit summaries. I whipped that script up and linked to it up above. Thanks Sam! Quick Demo

Clicky Greasemonkey Menu Script Updated

I noticed that I can’t really live without this script. Clicking those menus is just too difficult. The updates made to Clicky January 19th changed the way they handled their dropdowns. Clicky wrapped them into objects and added a bunch of functionality to make their content updateable via AJAX requests for their new filters. Some spiffy updates but code that I could not use from within Greasemonkey!

So have at it. The user script is available right here.

If you look at the script you will see that I handle opening and closing of the menus much like the Clicky’s object code does it. There is a variable to hold the current open menu if there is one so that opening a different menu closes any other open menu. I only add an onmouseover event and jimmy in my own close code when you click the close menu button. This works around Clicky’s object code without breaking anything that I can see.

Greasemonkey – Clicky Mouseover Menus

I have been a proponent of the Get Clicky web statistics since they first came out. They have been constantly improving them since day one, and I have enjoyed every update. One improvement that I especially liked were two menus in the top right. One that lists each of your websites being monitored by GetClicky so you can quickly jump between them, and one to change the date of the stats you’re currently viewing (if you’re only looking at a single day).

Clicky Menus

These menus currently only activate when you click them. Well, the arrow is there and it so nicely indicates to me that it should be a dropdown. So I wrote up a script to copy to onclick event to the onmouseover. This may be outdated pretty soon but it is one of my first scripts and it gives me a little joy each time I use it.

You’re going to need Firefox with the Greasemonkey extension and of course Site Statistics (available free) at Get Clicky.

So without further ado:
Greasemonkey Script to turn Clicky Menus into Mouseovers

Some recent fun with JavaScript at work and a co-workers really neat Greasemonkey script for Revealing Experts Exchange comments propelled me to write this very simple script. Mine pales in comparison to CoderJoe’s EE script and his knowledge of JavaScript and the DOM are quite vast. I consider this a first step into some individual JavaScript coding.

search