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:
(function() {
var x = null;
var y = null;
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 ) { 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.
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!
(function() {
var w = ( /a/[-1]=='a') ? unsafeWindow : window;
var x, y;
var keypressnumber = false;
var builtupnumber = '';
var quicknumtimeout = null;
var imgArr = document.getElementsByClassName("bpImage");
document.addEventListener("keypress", function(e) {
if(!e) e=window.event;
var key = e.keyCode ? e.keyCode : e.which;
function storePos() {
x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
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);
}
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.
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.
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
