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
- Every button is a tiny mark in a punchcard
- When the mouse hovers the punchcard a tooltip pops up
- The tooltip shows icon and name of the site
- If the user punches the mark, the site opens in a new window, and
- 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
- Use a div element with a ‘punchcard’ class
- 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
- HEAD: reference all the needed scripts and stylesheets
- 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
