Add to favorites button for adding favorite html Pages

Question

I am creating a mobile website with different events in a specific month. I want to add a button on every event page let user add different as'favorites'. I want that when user click the Add to favorites button, the event should be automatically added to a html page 'favorites'

Answer 1

I would go with a small javascript, external and called on the event pages (since there will be many instances of it). It's actually a very simple process you're asking about.

• Create a new javascript file called favorites.js
• Save it with this code:

Modified To support Opera

    function bookmark(title,url){

    var sPath = window.location.pathname;

    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

    url =url+sPage;

    if (window.sidebar) // firefox

    window.sidebar.addPanel(title, url, "");

    else if(window.opera && window.print){ // opera

    var elem = document.createElement('a');

    elem.setAttribute('href',url);

    elem.setAttribute('title',title);

    elem.setAttribute('rel','sidebar');

    elem.click();

    }

    else if(document.all)// ie

    window.external.AddFavorite(url, title);

}

• In the head of every HTML document you write, you need to call this script (extremely similar to calling a CSS definition):

  <script src="**/dir/**favorites.js" charset="UTF-8" type="text/javascript" defer/></script>

Defer is optional but recommended with a script like this which is not essential to the functioning of the page. However, if you want the possibility that the user can make use of the add to bookmarks function before the rest of the page loads, you may change defer to async.

Now you're almost there. At this point, to save yourself some frustration, make sure that your pages load without error before trying to use a link. This will ensure there are no bugs with your javascript or existing code.

• To make use of the add to favorites button, it's as simple as using anchors and links. A link which would make use of this script in particular looks like this:

  <a href="javascript:bookmark()">bookmark me</a>

or

<a href="javascript:bookmark()"><img src="imgs/bookmarklogo.png" **other-img-definition-stuff**></a>

And in the old days it was common to use a form button, like this:

<input type="button" name="Bookmark this page" onclick="bookmark()" />

---

Several years have gone by since I really bothered myself with HTML/CSS, and in that time, options such as AddThis have come about. If you find this task too difficult, I would just go with something like that. And also I would recommend getting away from handcoding and go to some sort of CMS, like Drupal or Wordpress. Especially if you are on tight schedules.