Versione italiana dell'articolo: «Clippings: i Preferiti per il tuo sito»
What are Clippings
If you are using Explorer or Netscape 6, looking on the left of this page, you can notice a new feature added to PRO.html.it: Clippings ("I tuoi preferiti"). Clippings are just a list of stories and Web pages that users can save during their browsing in this site and that they can read at later. They are the same as Bookmarks in Netscape or Favourites in Explorer but (this is the fun) they are not stored in your browser, but in the site you are browsing.
Clippings follow users during their browsing in a site and make it possible to save links to most interesting stories simply by one click on the icon on the left of title. The stored stories list, automaticaly updated, will be showed at the next access as well.
Clippings are a useful feature both for users, who can enjoy a "container" where to store their favourite stories or those to read later, and for webmasters, who can call on another fidelity feature.
Before analyzing some portion of the code, here is the syntax you have to insert in your Web site to immediately use this feature. The code is released by its creator, John Weir, under GPL license (open source). In other words, you can use, edit and share this javascript without any risk to infringe copyrights; only, do not modify the license.
The base code
First of all, download the clipping.js Javascript from this site (download page). This file includes the whole code to manage events. This Javascript has to be embedded in your pages by pasting the following code within the <HEAD></HEAD> tags of any document in which you want to use it:
<script type="text/javascript" src="clippings.js"></script>
Obviously, if your Javascript is not located in the directory of your document, you will have to specify a different path. E.g., if you locate the Javascript in the js directory of your site, you will have to specify the path in this way:
<script type="text/javascript" src="/js/clippings.js"></script>
This code uploads any component of Clippings in the memory of the users' computer using the browser software. Interaction with users is managed by a box in which stories titles will be showed and options to delete them, and by a command that will allow the users to add them just by a mouse clicking.
The box is build by the following code:
<div id="demo">
<div id="clippingsMenu">
<div id="clippingsContainer"></div>
<div id="clippingControls">
<div id="clippingsCounter"></div>
<a href="javascript:eventClearReadClippings()" class="mI">Delete read stories</a>
<a href="javascript:eventClearAllClippings()" class="mI">Delete all stories</a>
</div>
</div>
</div>
Here is the code that allows to add a story or an element to the list:
<a id="clp1">First story</a>
<a id="clp2">Second story</a>
These lines have to be followed, also at the end of the page, by the code below, which recalls the "add" function:
<script type="text/javascript">
allClippings[allClippings.length] = new Clipping(1,"First story","http://www.site.com/story1.htm");
allClippings[allClippings.length] = new Clipping(2,"Second story","http://www.site.com/story2.htm");
</script>
The following options appear in the above code between brackets and separated by a comma:
- Story ID: it must be unique in any single domain and it has to recall the same number written in the tag <A id="clpnumber">
- Story title: it is the title that will be shown in the "favourites" box
- Story URL: it is the link that refers to the story or to the page that you want to show
You can notice that any single story is identified by an unique number (e.g. 1 and 2) that is exactly recalled in both codes. You can only edit the options marked in red.
In the "Esempio" page (Esempio 1) you can find the result and the relative code.
Code customization
The most remarkable aspect in this Javascritpt is its unlimited customizability. You can personalize most of the code, including its visualization. E.g., it could be useful to your users to insert the code in a table to be located anywhere in your site, as in Esempio 2.
Script language is also customizable. In order to edit the "No Clippings saved" message, you just have to open the clippings.js file, search for the drawClippings() function and edit:
newHTML = "<span class='clippingItem'>There are currently no Clippings saved. To add a Clipping click on the Clipping icon.<br><br>";
newHTML += "You can access your Clippings either through this menu, or clicking on the number to the right of the Clippings menu. That number represents unread Clippings."
with your own message.
You could also edit the links visualization in the "Favourites" box. In this case as well, you should edit the drawClippings() function. In the example below, we added a list tag (<LI>) in order to both show a disc on the left of title and to show the stored stories on different lines. We edited
newHTML += "<a href="javascript:loadClippingURL("+i+")" class='"+tClass+"' id='cLink"+clipping.id+"'>"
as follows:
newHTML += "<LI><a href="javascript:loadClippingURL("+i+")" class='"+tClass+"' id='cLink"+clipping.id+"'>";
In our case, we also removed the opportunity to read stories in sequence by the "Next Unread clipping" command. In our opinion, it was enough to click on the link. So, we have removed from the code the line:
<div id="clippingsCounter"></div>
and any recall to the clippingCounter function, in order to lighten the external Javascript that is uploaded on the users' PC: we completely removed the updateClippingCounter() function, the eventShowNextClipping() function and entirely removed any recall to updateClippingCounter(); just by deleting them.
In order to manage the size of the box area we need to edit the clippingsSetContainerHeight function in the clipping.js file. This function automatically resizes the box at 350 pixels, if the screen resolution allows it. If you want your box size to fit the stories number, delete this function.
You can also edit the lines that allow to add a story or a page. The original code can be edited as follows:
<a id="clp1" STYLE="cursor: pointer; cursor: hand;"><img src="/img/add.gif" heigth="11" width="11" alt="Bookmark this story"></a> First story
<script type="text/javascript">
allClippings[allClippings.length] = new Clipping(1,"First story","http://www.site.com/story1.htm");
</script>
We added a css (STYLE="cursor: pointer; cursor: hand;") that forces the cursor to become a hand when passing on the "add" link. It is important to write both the cursor instructions in the same order of this example: neither Netscape 6.x nor Mozilla support the hand value, but the pointer value, which is the W3C standard. Moreover, we also associated an image to the link and wrote an ALT tag to show a description of the action to the user.
Every editing is shown in Esempio 3.
Final recommendations
Clippings only run on browser with a good W3C Document Object Model (DOM) support, i.e. Explorer (also in versions 5) and Netscape (from version 6 on). Opera users cannot view this script.
This code broadly uses Javascript and CSS. In order to obtain a better personalization it would be better to write your own style sheets and replace the originals (they are usually located within the CLASS="" tag in the clipping.js file). In the CSS section of this site you will find several tutorials about the use of style sheets (see in particular Più CSS in una stessa pagina).
Here are further informations by the author: (see also http://www.smokinggun.com/demos/clippings.php):
- Clippings ID have to be unique within any single domain
- Clippings can be repeated within the same page - the script recognizes copies
- Cookies are required. An alert message will be shown in the case your browser do not support cookies
- This script does not provide dinamic ID generaration for any single clipping. You could fit this problem by using a PHP dinamic function in order to automatically generate stories ID (in this site the function is provided by ASP)
- This script is copyright protected and released under GPL license. You can use it, but you have to mantain copyright and follow the license. For any question, please contact info@smokinggun.com
- Please, read comments in clippings.js file for further informations
Please, analyze these pages source codes and the Javascript code. The structure is very simple and, with some patience, it will exactly fit your needs [English translation by Alessio Balbi].
