After hard and long resistance, I finally gave up and recently signed up for Facebook. I am still not excited about it and quite deeply believe it can mainly bring negatives to people who post all kind of personal stuff. But anyway, since I am using it already from time to time, the single most annoying thing that caught my attention immediately (in the otherwise clean and arguably intuitive interface) was the fixed positioned chat box at the bottom of all pages. There was simply no way to remove it even if I didn't want to use the chat at all. And guess what, it seems the past few days that small collapsed box at the bottom has been transformed into a complete sidebar pushing the rest of the page to the left which is even more annoying (this seems to happen if the browser window is wide enough). Me doesn't like this at all so I am now sharing my solution to this annoyance with you...

Just install this small user script in your browser (Opera, Chrome, Firefox via Greasemonkey or Safari via GreaseKit):

https://raw.github.com/vadikom/facebook-nochat/master/facebook-nochat.user.js

and remove that chat floating box/sidebar for good! As a bonus, it will make sure you always appear unavailable for chat. Second bonus - when the sidebar is removed, the rest of the page will be perfectly centered in your browser window again. Yay!

I am getting more and more used to #NewTwitter and generally like the new features. Particularly the details pane, which provides quick preview of images, videos, etc. is really very useful. However, there is something related to it that annoys me much - if you scroll it with the mouse wheel (which is definitely the case with the majority of users) once you reach the top or bottom and continue scrolling (e.g. by accident, which happens to me very often), the whole page begins scrolling and you can easily lose sight of the tweet on the left to which the pane is related. So I am now sharing a simple fix and if you like it, please help to let the guys at Twitter know about it.

Update: Twitter have changed their design so this post covers a previous issue on their website and is no longer relevant.

First, a very quick demo of what I mean:

And the JavaScript/jQuery snippet which fixes the issue:

$('#page-container div.pane-components').live('mousewheel DOMMouseScroll', function(e) {
	var scrollTop = this.scrollTop,
		clientHeight = this.clientHeight,
		scrollHeight = this.scrollHeight,
		originalEvent = e.originalEvent,
		scrollingUp = (originalEvent.wheelDelta || -originalEvent.detail) > 0;
	if (scrollingUp && scrollTop == 0 || !scrollingUp && scrollTop + clientHeight == scrollHeight)
		e.preventDefault();
})

It just checks if the top or bottom of the details pane has been reached and when it has, the default action the mouse wheel event triggers (i.e. scrolling the whole page) is prevented.

If you would like to test the fix on your own, just load some Twitter page in your browser, then copy/paste the following code in your browser address bar and hit the "Enter" key:

javascript:$('#page-container div.pane-components').live('mousewheel DOMMouseScroll', function(e) {
	var scrollTop = this.scrollTop,
		clientHeight = this.clientHeight,
		scrollHeight = this.scrollHeight,
		originalEvent = e.originalEvent,
		scrollingUp = (originalEvent.wheelDelta || -originalEvent.detail) > 0;
	if (scrollingUp && scrollTop == 0 || !scrollingUp && scrollTop + clientHeight == scrollHeight)
		e.preventDefault();
});void(0)

And for a permanent fix, until eventually Twitter fixes the issue, you can install the following user script in your browser (Opera, Chrome, Firefox via Greasemonkey or Safari via GreaseKit):

https://github.com/vadikom/twitter-scroll-fix/raw/master/twitter-scroll-fix.user.js

Spread the Word

If you find this fix useful, tweet about it so that it can reach the guys at Twitter and they consider using it or a similar solution.

Well, that's all I can do about it.

Zoom Image is small user script I originally wrote back in 2005 for Greasemonkey and Opera but nowadays Chrome (out of the box) and Safari (through GreaseKit) users could use it too. The basic idea is pretty simple - the script displays a small toolbar with some buttons in the top left corner of any image when you hover it allowing easily to zoom in/out just the image without the need to zoom the whole page.

It may seem a pretty insignificant addition to your browser's features at first sight but, at least for me, it has proven to be a really handy one and I have not stopped using it in my main browser (Opera) since I first wrote it. BTW, the original version of the script was featured in Mark Pilgrim's Greasemonkey Hacks book which means at least one other user found it useful. 😀

Anyway, I am now publishing v2.0 which brings some nice improvements over the previous release.

What's new in v2.0

• you can now even easier zoom in/out the image by using the mouse wheel too - just hover the toolbar (any button) and use the mouse wheel (if you have one, that is :P)
• rewritten OO code allowing easily to add more custom buttons
• improved look (arguably) of the menu/buttons including light and dark style
• added optional show fade-in animation - disabled by default as it might become obtrusive over time (at least for me it does)

User Configuration

The script includes the following options which you could tweak to your liking:

zoomFactorClick = 1.5,		// zoom in/out by this factor each time
zoomFactorMouseWheel = 1.2,	// just hover the toolbar (any button) and use the wheel
showTimeout = 1.2,		// seconds
minimalImageWidth = 60,		// minimal width of the images the toolbar is activated for
minimalImageHeight = 50,	// minimal height of the images the toolbar is activated for
opacity = 0.80,			// opacity for the toolbar
fade = false,			// use fade animation when showing the toolbar
darkStyle = false,		// use dark style for the toolbar
zIndexFix = true;		// try to keep the zoomed image on top of other elements on the page

Adding More Custom Buttons

As mentioned, the script is now rewritten and allows more easily adding custom buttons to the toolbar. You can create a custom button like this:

var myButton = new Button(name, className, title, contentHTML, handlers);

And then append it to the toolbar like this:

zoomToolbar.addButton(myButton);

Example: Adding an "open" button

Here is a quick example how to add an "open" button which when clicked, loads the image in a new blank browser window:

var openButton = new Button('openButton', 'text-button', 'Open Image in New Window', 'open', {
	click: function() {
		window.open(image.src);
		zoomToolbar.hide();
	}
});
zoomToolbar.addButton(openButton);

I have added this button at the end of the Zoom Image code as well as another button "size" which when clicked reports the original dimensions of the image in a JavaScript alert popup. These buttons are disabled by default (the code is commented out) but you could enable them if you like.

Download / Install

Here is a direct link to the latest version available in the code repository:

http://github.com/vadikom/zoom-image/raw/master/zoom-image.user.js

The code is hosted on GitHub:

git clone git://github.com/vadikom/zoom-image.git