I randomly made this little webpage to showcase a lot of 350×200 openers I made for online articles

It’s a pretty simple script built on top of jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<style type="text/css">
body {
    margin:0;
    overflow:hidden;
}
</style>
<script type="text/javascript">
$(function(){
    $("div").mousemove(function(e){
      height = $(window).height();
        width = $(window).width();
        percent = e.clientY * 100 / height;
        move = ($("#box").height()-height) * percent / 100;
        $("body").scrollTop(move);
 
        percent2 = e.clientX * 100 / width;
        move2 = ($("#box").width()-width) * percent2 / 100;
        $("body").scrollLeft(move2);
    });
});
</script>

The CSS hides the scrollbars and removes the default margins from the body.

Then the Javascipt adds an event handler that will fire every time the mouse moves on top of a div – which is always since the page is pretty much just one giant div.  After that it determines what percent of the window you cursor is currently sitting at, and then translates that to the same percentage of the size of that giant div and scrolls the window accordingly.  So regardless of the size of the window you’ll be able to move it around to see all the contents of the div.

Scroll around the box below to see the random goodness:

For a project I wrote this JavaScript based image zoom in application.   At the time I couldn’t find anything out there that I could use to get the desired effect (at least w/out shelling out some dough) – so I opted to write something myself.

The entire idea was not well received…so I never actually finished it.   So this is essentially just a “proof of concept”.  It demonstrates that you can zoom in, zoom out, and move an image around within a specified area without the use of flash.  I don’t know if I’ll ever get the chance to finish this, or really even have a reason to finish, but so it doesn’t get lost I thought I would post it up here.

Regardless of the outcome it was a good exercise in JavaScript

Click here to see it in action!

The zoom icons used in this are from Dry Icons

I’ve created a very, very, simple online converter for special characters.  I’ll often get handed off a Word document with text to be included in a website.  Word by default will create curly quotes, and it may have a myriad of special characters littered in there.  So I made a simple script that replaces special characters with their ASCII entity counterparts.

You Simply copy and paste the text into the large textbox, click on the button and voila!  It does have some limited conversion of ampersands.  It will only convert and ampersands to & if there is a space in from of it to remove the risk of converting any entities that may be already in the code.  So while “Tea & crumpets” will convert “M&M” won’t.

Special Character Converter

I’m always forgetting what the JavaScript equivalent is of certain CSS styles.  for instance you could change the border by:

document.getElementById(‘myText’).style.border = ’1px solid #333′;

Shamelessly stolen from: http://codepunk.hardwar.org.uk/css2js.htm