Posted on

jQuery: API documentation /4

It was the beginning of October when I posted here three articles about this subject.

Yesterday I updated my experimental jQuery interface, re-introducing the A through Z index, and making it crossbrowser for IE, FF, and Opera (this one could be better). This is the official xml data seen through my interface.

There are empty spaces, because my proposal was about making the xml data richer than actually is. And there is still work to do for making it more robust and flexible.

For example, the next thing to add will be a list of keywords at the bottom. Clicking any of them, the function list will hide the functions that do not match that keyword. I’m speaking of keywords here rather than categories, because there exist other partitions as much interesting as categories, like “deprecated” for example, or “chainable”, or “multiplex” (acts upon a collection), or “stacked” (changes a collection) and so on.

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