Posted on

PunchCard 1.0 Released Today – updated

see the PunchCard category for updates

Features

  • A jQuery widget for displaying in a small area a lot of social bookmarking sites, like del.icio.us, digg, technorati… (there are 45 now)
  • Punchcard metaphore
    1. Every button is a tiny mark in a punchcard
    2. When the mouse hovers the punchcard a tooltip pops up
    3. The tooltip shows icon and name of the site
    4. If the user punches the mark, the site opens in a new window, and
    5. The punchcard gets a new hole which stays put

{[.test]}

  • You can add as many punchcards as you like to the same page, each one for submitting a different content: the holes belong to that content
  • Easy to add
    1. Use a div element with a ‘punchcard’ class
    2. Set its ‘title’ and ‘id’ attributes to the title and URL of your contentFor example, this is the html code used to display the above punchcard
<center>
<div class="punchcard" title="PunchCard 1.0 Released Today" 
id="/?p=84"></div>
</center>
  • Easy to install
    1. HEAD: reference all the needed scripts and stylesheets
    2. BODY: set the path of the icons folder (relative to your domain)

HEAD

<script type="text/javascript" src="jquery-1.0.3.pack.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="cooltip.js"></script>
<link rel="stylesheet" type="text/css" href="cooltip.css" />
<script type="text/javascript" src="crc32.js"></script>
<script type="text/javascript" src="punchcard.js"></script>
<link rel="stylesheet" type="text/css" href="punchcard.css" />

BODY

<script language="JavaScript">
PunchCard.icons = "/punchcard/icons/";
</script>
  • Easy to customize
    Change everything from colors to links, directly in the code and stylesheet files.

Files

  • download all in a zip