Continue reading »]]> 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.

Continue reading »]]> 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>

Continue reading »]]> I just did a re-write of one of my most popular hits on this blog. It was all documented in the comments of the script’s page but it’s a bit of a mess so here’s the definitive step-by-step walkthrough to converting your videos to AMV format in Linux (I use Ubuntu 10.04) If you can’t make out the pictures in this post click on them to make them bigger – remember, they’re only pictures, not real dialog windows… ;oP

1. Open a terminal window
2. sudo apt-get install subversion
svn checkout http://amv-codec-tools.googlecode.com/svn/trunk/ amv-codec-tools
cd amv-codec-tools/AMVmuxer
make build
Allow this to finish, it takes a good few minutes
3. sudo apt-get install nautilus-actions
4. cd
gedit
5. Paste the following code into that file
   #!/bin/bash
for uri in $@; do
INFILE=$uri
FORMAT=${INFILE:(-4)}
OUTFILE=${INFILE/$FORMAT/.amv}
cd ~/amv-codec-tools/AMVmuxer ;
./ffmpeg/ffmpeg -i "$INFILE" -f amv -r 16 -s 160x120 -ac 1 -ar 22050 -qmin 3 -qmax 3 "$OUTFILE" ;
zenity --title "$FORMAT to .amv File Conversion Complete" --info --text="${INFILE/file:\/\// } has converted \n\nCheck ${OUTFILE/file:\/\// }";
done
   …save file as ‘convert to amv’ and close the file
6. back in the terminal…nautilus-actions-config-tool
7. In the window that pops up, click new and make it look like this (don’t worry about the shred file and wipe free space stuff, we’re only interested in the Convert to amv stuff):
   
   
   note the different tabs that are open, also note where quotation marks have been used
8. Save the configuration
9. Close the nautilus actions configuration tool window
10. Close the terminal window
11. In nautilus navigate to a file you want converted
12. Right click on it, you should see this menu itemgo ahead and select that
13. After some time, how long depends on the size of the file, you’ll get a dialog box looking something like this
14. Go ahead and play the file (I use GNOME MPlayer for amv files “sudo apt-get install gnome-mplayer” but vlc plays them too. You may need codecs.)

Hopefully that’ll be you sorted but there are a few points to note…

1. Spaces in file or path names – it can’t handle them
2. You can do multiple files on the one click, it’ll do them one at a time
3. Some file types won’t convert without messing with ffmpeg – notably mp4/mp3/3gp – these can be made to work but that’s outside the scope of this, importantly flv files convert perfectly so your youtube downloads will work ;oP
4. This was written using Ubuntu – I can’t be certain it’ll work with other distros

go stick your amv files onto your iteddy or ipod-esque thingy and play to your hearts content!

Continue reading »]]> In a similar vein to my last post I’ve had a request from my very dear friend @Rantz to do something along the same lines for the Northern Territory’s favourite chip-wrapper.

So I did…

If anyone else would like their own piss-take re-branding of a site they like/loath feel free to drop me a line but for now here’s the NT News version…
Download (Downloaded 126 times)

Continue reading »]]> I’ve created a quick tongue in cheek user script to help folks remember what the P&J is all about. Install it and navigate to any P&J page…

Download (Downloaded 267 times)

The download link should ask to install it on Chrome.
In Firefox with Greasemonkey installed it should show the script with a button on the top right to install.
If that above doesn’t happen save it to the desktop then drag it onto an open firefox window and greasemonkey should sort it out then.

(update 1/Feb/2012 now changes the words from page body too(on any site [screenshot]))

Continue reading »]]> {EAV_BLOG_VER:6e99e91f183f7014}
I use my own smilies around the web but I always forget the full link to the pics whenever I’m posting to a forum or whatever. I don’t need to remember them though as a long time ago I made the script below, saved it as index.php and put it in the folder where I hold my smilies… Now I just click a bookmark and open that page for a quick copy/paste. Feel free to use for your own uses, it’s essentially making a list of files in the directory and displaying them as per the html in the echo statements…

<script>
function SelectAll(element)
{
element.focus();
element.select();
}
</script>
<?php
    $path = getcwd() ;
    $dir_handle = @opendir($path) or die("Error opening $path");
    echo "<table style='text-align:center;font-family:sans-serif;'><tr><th>Image</th><th>Web Link</th><th>Forum Link</th><th>Image</th></tr>\n";
    while ($file = readdir($dir_handle)) {
	    if ("$file" != "." && "$file" != ".." && "$file" != "index.php") {
			echo "<tr><td><a href=\"http://the-kid.org/images/smilies/".htmlspecialchars(urlencode($file))." \"><img src=\"".htmlspecialchars(urlencode($file))."\" /></a></td>";
			echo "<td><input onClick=\"SelectAll(this);\" size=\"50\" type=\"text\" value=\"<img src='http://the-kid.org/images/smilies/".htmlspecialchars(urlencode($file))."'/>\" /></td>";
			echo "<td><input onClick=\"SelectAll(this);\" size=\"50\" type=\"text\" value=\"[img]http://the-kid.org/images/smilies/".htmlspecialchars(urlencode($file))."[/img]\" /></td>
			<td><a href=\"http://the-kid.org/images/smilies/".htmlspecialchars(urlencode($file))." \"><img src=\"".htmlspecialchars(urlencode($file))."\" /></a></td>
			</tr>\n";
    	}
    }
    echo "</table>";
    closedir($dir_handle);
?>

Continue reading »]]> I recently tried to follow this link and was met with the equivalent of a 403!

I was like, “I’m not having that!” and was about to turn on my VPN when I thought, “my webserver’s located in the states, why not just make a proxy?”

So I did a very, very, simple web proxy…

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>BTK's Web Proxy</title>
    </head>
    <body>
        <div style="text-align:center;">
            <form method="GET" action="<?=$_SERVER['REQUEST_URI']?>">
                <input type="url" name="url" placeholder="Type URL of site"/><input type="submit" Value="Load url" />
            </form>
        </div>
        <hr/>
        <?php
            $url = $_GET['url'];
            if (!empty($url))
            {
                // check we're only getting files served by a website (i.e. not ../../../passwords.txt from this server etc.)
                if(preg_match('/^https?:/i', $url))
                {
                    $contents = file_get_contents($url);
                    if($contents === FALSE)
                    {
                        echo "<h2>Sorry <pre>{$url}</pre> cannot be read</h2>\n";
                    }
                    //display contents of url
                    else
                    { ?>
                        <?=$contents?>
                        <script>for (var i=0; i<document.links.length; i++) document.links[i].href="<?=$_SERVER['PHP_SELF']?>?url="+document.links[i].href;</script>
                    <?php }
                }
                else
                {
                    echo "<h2><pre>$url</pre> is an invalid URL</h2>\n";
                }
            }
        ?>
    </body>
</html>

Essentially this is a form that takes an url and displays the contents of the url. Using html5 we have the input type of “url” which handles our validating, though as this is down to the support of the client(non-supporting clients render this as a type=”text” field and do no validation) we have some validation on the server too. There’s also nothing to stop someone just editing the page URL in their address bar to try to access a local file etc.

So now I can see the restricted content. Result!

I added a little javascript for ease to rewrite all the links, so you can click through and have the pages parsed by the web proxy.

Continue reading »]]> A recent update to firebug moved the icon to open the console to the top right of firefox. Everyone hates it as far as I am aware and there’s no setting to alter it. However you can do the following…

1. Right-click in the bottom bar or near the firebug icon to get a menu
2. Select “Customise…”
3. Ignoring the window that pops up, drag the firebug icon to the bottom pane
4. Click “Done” in the window that popped up

…you’re welcome!