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
- download all in a zip
A demo on your site would be nice, so I don’t have to download and mess with this to see it… Still, I shouldn’t complain– I haven’t given much code away lately. Thanks for your efforts. (jQuery rocks!)
There is a demo in the top right corner of this same page, and a multi demo in the manual page 🙂
Excellen widget, thanks. 🙂
Do you know how to get and include the current url of the page using javascript, this code not work inside URL input:
{document.write(location.href);} ?
OK, I think I understand 🙂
I hope we’re speaking about PunchCard 1.2. As a matter of fact, the url there is part of a javascript object inside an HTML string. So the solution is to properly set the url for it to work when it will be evaluated by javascript. It’s much simpler than it sounds:
«h4»This page«/h4»
«div class=”pc_MINI”»«div class=”punchcard”»
«object»
«param name=”punchcard” value='{
title: document.title
, url: location.href
, id : location.href
}’/»
«/object»
«/div»«/div»
As you see, I set id to location.href too. The id is used for keeping the hole there, so it’s intended to be unique for that page, in space and in time. The url itself is unique in space, and almost in time, so if you want to make all data relative to the current page, this is a good solution.
Andrea…excellent, work like a charm. Take a look, a very minimalistic version(index,categories and products pages): http://www.7dana.com/shop/
Thank you.
ps. please remove the link if posting links is non-acceptable
I like it, Zaja.
It fits well in the page design.