Viewing posts tagged with javascript

JavaScript Markdown Helper

What I love about Markdown is the simplicity of it, not needing to mess around with those rich text editors, all it needs is a standard plain old textarea. The annoying thing is when inputting code or creating lists, it doesn't preserve the indentation or list prefix when starting a new line.

So, I built my own Markdown helper script which when you hit the return key, it checks to see if the line is a bullet, numbered list, code block or blockquote and automatically indents and adds the Markdown syntax. If you hit return again on an empty line, it will remove that item and return to regular paragraph text.

JavaScript Markdown Helper

It's a pretty lightweight script that's super easy to use, just include the JavaScript file and call the function via onKeyPress() on the textarea. Tried and tested in the usual Firefox 11, Safari 5, Chrome 18 and Internet Explorer 6 onwards.

You can view the working example or view the code on Github.

Toggle Switch Using a PNG Overlay

I was in need of a more robust and cross browser compatible toggle switch, so I though I'd approach it in a different way than your usual CSS3 switches.

My solution uses a semi transparent PNG overlay for the rounded rectangle, with an inner image which animates from left to right, and vice versa. The toggle can be triggered by either clicking the switch, or the accompanying label.

Toggle Switch

The result is a jQuery powered, checkbox based toggle switch that looks and functions the same in most browsers, even IE6. It also has retina images for any iDevices that support them.

You can view the working example or view the code on Github.

Password Generator Bookmarklet

I created this little bookmarklet a few days ago to instantly create a random 10 character password. It's pretty handy as I'm always needing to create a new secure password.

If you need it more secure, you can edit the character list in the str variable, and edit the length of the password via the for loop. In this version, I've stripped out characters that look alike as it's annoying when can't tell exactly what the character is.

javascript: (function () {
    var tmp = '';
    var str = '23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ';
    var len = str.length;
    for (var i = 0; i < 10; i++) {
        tmp += str[Math.floor(Math.random() * len)];
    }
    prompt('Your randomly generated password is:', tmp);
})()

To use it, simply drag the link below onto your browser toolbar, and then click it when you want to create a random password.

Generate Password

Flickr and Youtube Bookmarklet

Here is a little bookmarklet I created to grab the short URL when viewing a video on YouTube or a photo on Flickr:

javascript: (function () {
    var a = location.host;
    if (a.indexOf('flickr') > 0) {
        var a = document.getElementsByTagName('html')[0].innerHTML;
        var b = a.match('http://flic.kr/p/([_a-zA-Z0-9]*)');
        if (b) prompt('The flic.kr URL is:', b[0]);
    }
    if (a.indexOf('youtube') > 0) {
        var a = document.getElementsByTagName('link');
        for (var i in a) {
            var b = a[i];
            if (b.getAttribute('rel') == 'shortlink') prompt('The youtu.be URL is:', b.getAttribute('href'));
        }
    }
})()

To use it, simply drag the link below onto your browser toolbar, and then click it when viewing a video or photo.

Grab Short URL