In order jFav to work you need the jQuery library (version 1.2+) and the javascript file (.js) of the jFav! Once you have them both, link them inside the head of your html file in the following order:

1. <script type="text/javascript" src"folderName/jQuery.js"> </script>
2. <script type="text/javascript" src="folderName/jFav.js"> </script>

don't forget to replace "folderName" with the folder that you've stored the two ".js" files.

jFav has been test for compatibility issues with the following browsers:

• Internet Explorer 6+
• Mozilla Firefox 2+
• Opera 9+

Unfortunately jFav doesn't work for Safari or Chrome browsers, since both of them don't have any option in their javascript API to access the bookmarks/favorites. To work around that browser limitation I have enabled jFav with a popup message for Safari and Chrome browsers that informs to press the CTRL + D shortcut or CMD +D (for Mac) in order to achieve the same effect. Alternatively you have the option to add jFav functionality ONLY if the browser is not Chrome and is not Safari. If anyones knows a way to bypass this limitation for these two browsers (maybe some time in the future) please add the solution to the contacts in order to update the plugin.

In orde for jFav to work it needs to have one or more html links that will be affected (<a> tag). To control the bookmark url and title, you will have to change the href and title attributes of each link. If you don't set the href and title attributes then jFav will add to your bookmarks the current's page url with the title taken from <title>...</title>. So let's list The available options that you for each link that you apply jFav:

1. Don't set href and title attribute. URL/LINK: Current Page. Name: <title>...</title>. [internal use]
   If you are OK with bookmarking the current url and title of the page then you have nothing to change :).
2. Set the title attribute only. URL/LINK: Current Page. Name: set by title attribute. [internal use]
   This the scenario where you want to use the current url/link the user is in but you want to add a custom name for the bookmark.
3. Set the href attribute only. URL/LINK: set by href attribute. Name: <title>...</title>. [internal use]
   In this scenario is the reverse of the previous one. You want to change the url/link of the bookmark but as a name you use the document's title.
4. Set both href and title. URL/LINK: set by href attribute. Name: set by title attribute.[external use]
   The fourth and final scenario allows you to customize both the url/link and name for every link. This is very useful since it allows you to create bookmarks for other websites!

To properly use jFav, you must first make sure that the DOM is ready to be traversed and manipulated. To achieve that the codemust reside inside the event ready. For example let's assume you want to apply jFav on a link with id="add2favorites".

1. <script language="javascript" type="text/javascript">
2. $(function() {
3. $(' #add2favorites').jFav();
4. }
5. </script>

An alternative way to achieve the same thing, is to ensure that the jFav is placed after the DOM element that you want to handle. Although it's not the "appropriate" way, you could do it...continuing the above example we have:

1. ...html...
2. <script language="javascript" type="text/javascript">
3. $(' #add2favorites').jFav();
4. </script>

There is a concept in JavaScript that urges the programmer to use/implement the language unconstructively. What that basically means is that: you must ensure that a user that will be able see and interact with you page without any problems, either if he has JavaScript enabled or not. Following that philosophy if you want to add some "extra" future in your website that can be used ONLY if JavaScript is enabled, then the right thing to do is add it via JavaScript (not HTML).
Now that we clarified the theory let's go into practice. Here are the steps:

1. Create the html link (<a>) and give it an identifier (class or id).
2. Add the HTML it dynamically to your DOM. I suggest using one of the following jQuery manipulation commands: append(), prepend(), after(), before(), insertAfter() or insertBefore().
3. Add jFav functionality to that link.
4. Format the <a> tag using CSS.

Let's start with steps 1 to 3, which is the JavaScript/jQuery code place inside the <head>...</head> part of html.

1. ...html...
2. <script language="javascript" type="text/javascript">
3. var htmlLink = '<a id="add2favorites">Add to Favourites</a>';//store the html part in a variable. Step #1.
4. $('.htmlTargetElement').after(htmlLink);//place the html in the DOM. Step #2.
5. $(' #add2favorites').jFav();//enable the jFav functionality. Step #3.
6. </script>

Regarding step 4, the CSS part you should create a style to format the a#add2favorites element.

jFav takes only one...not so important parameter. The lack of parameters is because each link, <a> tag can be handled independantly according to the href and title attributes.

• msg: [string] default : "Press "Ctrl + D" or "CMD + D" for MAC, to add this page to your bookmarks."
  By changing this value you alter the message displayed to Chrome and Safari users!

Example A : Simple Usage AKA Bookmaring The Current Page

The first and most important thing you have to understand is that jFav, doesn't have any parameters. In order to have maximum usability and implementation the "bookmarking" parameters are set per link, in the attributes href and title! Now that you've got tha let's go the most simple and common usage of jFav, make a link (or more, but I believe you need only one), to Add to Bookmarks/Favourites the current url. In order to do that you have to do two things: 1) create the link(s) in HTML and then 2) assign the jFav function on those links. The following examples goes like this...

HTML CODE:
<a id="buttonOne">Click here to Add this Page to Favourites</a>

jQuery CODE:
$('#buttonOne').jFav();

By click the link above in the example, you will see that the add to bookmarks/favourites dialogue box opens. The name of the link is taken from the <title> element of you page (inside <head>...</head>) and the link (URL, HREF whatever you call it) is the current url of the page. This is the (smart) jFav, it sees that you have not set the title & href attributes on the <a> tag and it assumes that you want this bookmark to point to the current page.

Example B : Advanced Usage AKA Bookmark Any Number of Internal or External Links!

The second more "complicated" usage of jFav is handy when you want to create bookmarks that point to any url/href/link you want and with any title you want. Declare a title and href attributes in your links and you are set. A very important think to note, is the correct declartion of external links. This is wrong: www.google.com this is correct: http://www.google.com! See the following examples and you will understand.

HTML CODE:
1) <a class="buttonsTwo" href="http://www.google.com/" title="Google T H E search engine">Bookmark Google</a>
2) <a class="buttonsTwo" href="http://www.drupal.org/" title="Drupal RULEZ">Add Drupal to favourites!</a>
3) <a class="buttonsTwo" href="#" title="My Page Name Here">Bookmark Current Page, with custom title</a>

jQuery CODE:
$('.buttonsTwo').jFav();

The first and second links have a custom declaration in both title and href, thus instead of links these two work as add bookmarks/favourites for Google and Drupal respectively. The third link has a declaration only in the title attribute, so jFav uses the current URL/address for the favourite/bookmark destination and the bookmark/favourite name is take by the title attribute.

• 6 NOV 2008: version 1.0 released.

jFav is released under GPL Open Source Licenses...thus it is completely and totally free!. You are obligated to keep all credits (links, names etc) and if you feel like it a link to this page will be appreciated!