Question

I’m trying to remove a keydown event handler added by a “scroller” plugin into a page.

The page is this:
http://www.nacion.com/2012-05-15/Mundo/nobel-de-economia-cree-posible-pronta-desaparicion-de-zona-euro-.aspx

Basically I want that when I use the down/up arrows on my keyboard the page goes down instead of the small box where the plugin is applied.
I tried getting an instance of the plugin but for some reason it is not available once the page is loaded.

Another approach would be to force the greasemonkey script to be loaded before the script from the page is loaded (so I can remove it using greasemonkey) but I don’t know if that is even possible.

Any idea would be appreciated.

Thanks

Answer 1

That page seems to use a custom or buggy implementation of jQueryTOOLS Scrollable.

The lousy UI experience is triggered by this code in the main page:

<script>
    // initialize scrollable para ademas
    jQuery(document).ready(function() {
        $("div.scroller_ademas").scrollable({
            size: 1,
            items: '#ademasaldea',
            vertical: true
        }).mousewheel({
            items: '#ademasaldea'
        });
    });
</script>

And all the unbind() calls and keyboard = false sets that should work, don’t affect the keyboard hijack!

Fortunately, the offending <script> is fairly atomic, so Greasemonkey can block that offending JS without affecting anything else.

Block the JS by using the stunningly-brilliant checkForBadJavascripts utility.

Like so:

// ==UserScript==
// @name        _Block scrollable that's run amuck.
// @namespace   _pc
// @include     http://www.nacion.com/*
// @run-at      document-start
// @require     https://gist.github.com/raw/2620135/checkForBadJavascripts.js
// ==/UserScript==

checkForBadJavascripts ( [
    [false, /items\:\s+'\#ademasaldea'/, null]
] );

Note that this will also stop the “Ademas en El Mundo” box from being scrollable, but you can fix that by adding

window.addEventListener ("load", function () {
    GM_addStyle ('#ademasaldea { height: 100%; overflow-y: scroll; }');
}, false);

to the script.