Billy's Blog of Geekery

Following in the steps of the Pish & Churnal and Empty News scripts, I offer today’s Evening Depress…

The download link below should ask to install it in chrome, if you’re using Firefox you’ll need Greasemonkey to run it. Install then head on over to the Evening Depress site…

Download (Downloaded 16 times)

Ever seen when someone’s uploaded an image or a video shot on their iPhone or uploaded badly so that it’s displaying sideways or upside-down online? Yeah I have too. It’s annoying trying to crick your neck just to view the object. Hence this bookmarklet(drag the “↵” link to your bookmark bar)…
Each click on the element after you’ve activated the bookmarklet will rotate it clockwise by 90 degrees. Try it out now, click the link below, after clicking OK click on this paragraph. and again, and again… not bad eh!?

<a href="javascript:(function(){var s = document.createElement('script');s.src = 'http://code.jquery.com/jquery-1.7.2.min.js';document.body.appendChild(s);var s = document.createElement('script');s.src = 'http://the-kid.org/scripts/rotateElements.js';document.body.appendChild(s);})();">↵</a>

The eagle-eyed among you will note that this loads a couple of scripts remotely. Firstly it loads jQuery from the official jQuery CDN. This is so I can access some framework dependant functionality surrounding rotating elements, used by the second script the bookmarklet loads (here is the script the top bit is the jQueryrotate plugin just embedded into the script)

The important bits are the line in the second file…

var rotation = -90;
    function assignElement()
    {
        alert("Click target element");
        $(document).ready(function(){
            $("*").click(function(event){
                elementSelect = event.target;
                $("*").unbind("click");
                elSel(elementSelect);
            });
        });
    }
    function elSel(elementSelect)
    {
        $(elementSelect).click(function(){
            if(rotation<360)rotation += 90;
            else rotation=0;
            $(elementSelect).rotate({
                bind:{
                    click: function(){
                        $(this).rotate({ angle:0,animateTo:rotation,easing: $.easing.easeInOutExpo })
                    }
                }
            });
        })
    }
    assignElement();

The assignElement() function defines exactly what you want to rotate on the page, the elSel() function binds the rotation to clicks on the element.
It's very hack-ish(and feels it!) but it works somewhat. Sometimes you need to click two or three times on the element to get it rotating, probably because of how I've nested the elSel() function.

How annoying is it when a page induces an infinite scroll technique or is just long and they don’t provide you with a mechanism to get back to the top of the page? (that’s rhetorical but the answer is “quite”!)

Here’s a simple-tastic bookmarklet(drag the “↑” link to your bookmark bar) so everywhere can have it…

<a href="javascript:window.scroll(0,0);" onclick="window.scroll(0,0);">&uarr;</a>

[edit]
Mitchinator suggested I make a jQuery enabled version for some smoothness. So here we go… falls back to instant if page isn’t jQuery enabled…

<a href="javascript:if(typeof jQuery === 'undefined' || !jQuery) {window.scroll(0,0);}else{jQuery('body').animate({scrollTop:0}, 1200);}" onclick="if(typeof jQuery === 'undefined' || !jQuery) {window.scroll(0,0);}else{jQuery('body').animate({scrollTop:0}, 1200);}">&uarr;</a>