cfpg

Simple JavaScript Timer

Take advantage of Javascript's Date object to create a simple timer.

Just create a div and set it's id attribute to show_timer_div, use the other functions to start/pause/stop the timer.

<div id="show_timer_div"></div>
<a href="#" onclick="startTimer();">Start</a> | <a href="#" onclick="pauseTimer()">Pause</a> | <a href="#" onclick="resetTimer()">Stop</a>

Demo: Simple JavaScript Timer

It starts by showing 00:00/minutes:seconds then adding the seconds as they come by, if it reaches hours it starts showing 00:00:00/hours:minutes:seconds.

Scroll the browser window using jQuery without any plugin

You can use .offset() to get the position of an specific element to scroll to, or use $('body').height() to move to the bottom of the document.

Anonymouseit Bookmarklet

Whenever a page/site doesn't load, I try it behind a proxy to see if the problem is on my end.

I created this simple Bookmarklet that takes the url from the current window and opens a new window with the same page anonymouse'd.

Code:

javascript:function Anonymouseit(){
    var url=prompt("URL to Anonymize:", window.location);
    if(url){
        window.open("http://anonymouse.org/cgi-bin/anon-www.cgi/"+url);
    }
}
Anonymouseit();

Thumbnailizer Bookmarklet

This bookmarklet turns a directory listing full of image links to actual images.

It basically searches for links to images and turn them into tags. If the image is wider than 300px, it resizes it and changes to full size when hovering.

Code:

jQuery load();

Use AJAX to change pages in your site plus giving the user the possibility to link to that page by using URL Hashs: #.

This technique is starting to get popular in a few big sites. The best example I know is probably The Hype Machine, which has an mp3 player in the bottom and the songs keeps playing when you change the page(Only for logged in users). Twitter is also using it in the homepage(again, when logged in) and the user pages.

This is the jQuery code that I used on this site, it only affects the permalinks in the left of each post.

Code:

$(document).ready(function(){
    var loc = window.location.hash.toString();
    if ( loc != '' ) {
        var url = loc.replace("#", "");
        $("#container").load(url + " #content", null, getTitle);
    }
    $(".post .info a.permalink").click(function() {
        var url = $(this).attr("href");
        document.location.href = "#"+url;
        $("#container").load(url + " #content", null, getTitle);
        return false;
    });
    function getTitle(r, t, xml) {
        title = r.match("");
        document.title = title[1];
    }
});