cfpg

whos.amung.us plugin for ServerDensity

Just change YOUR SITE ID and YOUR SITE NAME for the appropriate values.

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.

Online users with MongoDB and MongoMapper

Using MongoDB and MongoMapper, on ruby. It's designed to recognize users by the IP address and save the page they're currently on. It can be easily changed to use usernames.

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.

Using markdown with App Engine

1. Download the *nix source from Markdown for Python and extract the content.

2. Inside the extracted source you'll find a directory called markdown, copy this into your App Engine application folder.

3. Import into Python and use it:

    import markdown
    html = markdown.markdown("source text")
   

Rails form_for() :multipart

In Ruby on Rails you can set :multipart => true on form_tag() and it will return a form tag with the proper enctype for uploading files. However, you can't use :multipart directly on form_for().

The work around is to set enctype directly to the :html of the fom_for():

form_for(@post, :html => {:enctype => "multipart/form-data"})

Which will return something like:

 <form action="/posts" enctype="multipart/form-data" method="post">[...]

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];
    }
});