Simple Bookmark Script using jQuery

On 05.10.09, In HTML, JavaScript, jQuery, by admin

Tags: HTML, JavaScript, jQuery

Introduction:

Below is the simple Bookmark script, which has been implemented using jQuery, this might help most of the people to bookmark your respective webpages / blogs. I have tested the application in Mozilla Firefox (Latest Version – 3.0.10), IE 7 & 8, Google Chrome. Simple code to understand and to implement, I am sure its going to help most of the people to save your website / blog url to their favorites. For this to achieve we need jQuery library file, so please download the same from jQuery Site that is http://www.jquery.com

jQuery Code:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a.jQueryBookmark").click(function(e){
	e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
	var bookmarkUrl = this.href;
	var bookmarkTitle = this.title;
 
	if (window.sidebar) { // For Mozilla Firefox Bookmark
		window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");
	} else if( window.external || document.all) { // For IE Favorite
		window.external.AddFavorite( bookmarkUrl, bookmarkTitle);
	} else if(window.opera) { // For Opera Browsers
		$("a.jQueryBookmark").attr("href",bookmarkUrl);
		$("a.jQueryBookmark").attr("title",bookmarkTitle);
		$("a.jQueryBookmark").attr("rel","sidebar");
	} else { // for other browsers which does not support
		 alert('Your browser does not support this bookmark action');
		 return false;
	}
});
});
</script>

HTML Code

1
2

<h2>Click on the respective links below to bookmark the same</h2>
<a href="http://www.developersnippets.com" title="developersnippets.com" class="jQueryBookmark">DeveloperSnippets</a>, <a href="http://www.techvideobytes.com" title="Tech Video Bytes" class="jQueryBookmark">Tech Video Bytes</a>, <a href="http://www.wittysparks.com" title="Witty Sparks" class="jQueryBookmark">Witty Sparks</a>, <a href="http://www.snehah.com/" title="Snehah.com" class="jQueryBookmark">Snehah.com</a>

Note: As my FTP tool is down, will provide you ‘LIVE’ example when the respective tool is up, stay tuned for live example and for download file, sorry for the inconvenience caused!

Please let me know your valuable feedback on this.

Related Entries...

Cross-Browser Snippet for Bookmarking the webpage
Below is the code which is written in JavaScript, we can use this script for bookmarking the particul ...
How to: Resolve $("ul.sf-menu").superfish and b.isEmptyObject is not a function Error
Well today! I installed Shareaholic - SexyBookmarks widget in one of my wordpress blog. I've been wor ...
Difference between $(document).ready(function(){}); and $(window).load(function(){});
When I have started learning I was bit confused about what is the difference between $(document).read ...
How To: Make Simple slideToggle app using jQuery
Introduction: After going through this article, you can be able to develop a simple slide panel appl ...
How To Check Whether Particular Div Is Present Using jQuery
There might be some scenarios where we need to check whether a particular DIV is visible or not and i ...
Best practice for declaring functions inside jQuery ready function
This article will help beginners, that is who are new to jQuery and want to learn some tricks about j ...
How to: Add wmode="transparent" for flash object using jQuery and Native JavaScript
Last week, I had a problem with flash object which is rendering dynamically on to my web pages. Actua ...
Slide In and Slide Out Status Message Box using jQuery
Introduction This post help beginners to learn and implement some jQuery Web Applications. Develop S ...
How to open Ext.Panel onClick of a link
Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a ...
Smooth Slide Show s3Slider jQuery plugin
This is an awesome jQuery plugin like Jondesign's Smooth Slideshow v2.1, by looking at the jd's Smoot ...

By Blogsdna

admin

Visit Authors Website | All Articles From This Author

You Might Like:

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

17 Responses

Zen

05.10.09

Very good , thank you very much.I knew very much tip about social bookmark but I have not seen any beautiful one.Let me try this.Thanks much

Zen

05.10.09

Hi , I don’t know what the problem is that I can not comment on your article name “Make simple slide Toggle app using Jquery”. That is the tip impressed me and I decide to make it access on blogger template and i have tested successfully on My test template.
The question is , can I borrow it and publish it on my blog ? Of course i will linkback to you if you don’t mind .You can see it works very good.

I love blog design and I love your website,too.I hope all of the tips here for website can be used on blogspot.Thank you anyway and waiting for your reply.
Thank you.Your friend
Zen

admin

05.10.09

Hi Zen,

Nice to see your valuable comment again, yeah you can go head and implement the same in your web-blog, yeah this is a free source but please make sure that you cannot delete developersnippets.com from the snippet. Hope you can understand why?

Thanks,
Vivek
[http://www.developersnippets.com]

Zen

05.10.09

Hello
Please let me ask you 1 question about the XML parse
As you know,to appear the code on the web or blog you have to convert the symbol “<” , “>” in to “& lt;” and “& gt;”
So please help me the tool or website to do this work, I have some problems for the &quote, I dont know what will it parse to?!
Waiting for your answer…thank you very much

admin

05.10.09

Hi Zen,

Nice to see your comment again, for the query below description might help you.

When you are using XML, you need to make sure that the respective tag must have ‘CDATA’ that is Unparsed Character Data. Lets say if you have a tag in your example, you might have used in this way <name>Vivek & DeveloperSnippets.com</name>, if you open this XML file in IE it will give an error related to special characters.

So, to overcome this issue, we have to use “CDATA”, your should be like this now <name><![CDATA[Vivek & DeveloperSnippets.com]]></name>

After adding CDATA, just open your respective XML in IE / Mozilla Browser (For this I would like to prefer IE browser, gives accurate error). And if you would like to know more about CDATA – please do visit site for reference – XML CDATA

Please let me know if you want more about this…..

Thanks,
Vivek
[http://www.developersnippets.com]

Jack

05.10.09

Nice looking site you have. It’s interesting and well worth the time to visit.

Zen

05.10.09

Hi, thanks for you answer, I have no more idea now, it is quite clearly for me.Thanks much.
But I am wondering about your images, how can you make the images to be inclined ? I know that’s the effect but I dont know which website or tools can help me to do that, can you guide me ? It will be great if my images can be inclined,too.That makes the article looks like pro.

Thanks my friend, have a gooday and happy with your family.
Zen

admin

05.10.09

Hi Zen,

Could you please let me know which image you are talking about?

Thanks,
Vivek

Zen

05.10.09

Yes the images in these posts ( I just pick some posts) :

your post 1
your post 2
your post 3
your post 4
your post 5
your post 6

Thanks

brayL

05.10.09

Hello.. I have read your post but I’m kinda confused.

What is the jQuery library file for?

I have downloaded it, but I currently have no idea where to upload, or what it is for..

Can you share to me what to do with it?

admin

05.10.09

Hi BrayL,

jQuery is JavaScript API, if you want to run the application which you have downloaded from the page – then you need to download the jQuery also – if you want to know more information about the same – you can visit http://www.jquery.com, by going through this you will get an idea of what is jQuery and what else can be done with the same.

Hope, I answered your question

Thanks,
Vivek

Сергей

05.10.09

Спасибо огромное тебе! Давно искал этот код! I LOVE jQuery !!!!!!!!!!!!

David

05.10.09

Like very much your bookmarking script. I’m sure (hope) the answer is simple but can you please advise variation to code to enable bookmarking of the current page, rather than a fixed page so that clients can bookmark any relevant page within the site.

Thanks for your good work and assistance.

Cheers,
David

Brian

05.10.09

Hey I’m having a issue with getting this script to work on IE7/8. When I click on the bookmark link, it gives me an error on this line:

else if( window.external || document.all) { // For IE Favorite

I downloaded the latest jQuery file but still no go. I tried using Google’s jQuery (http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js) file and still nothing. It seems to work fine in FF. Any idea why its doing this?

Thanks!
Brian

admin

05.10.09

Hi David,

Sorry for late response, yeah you can also do so. Just dynamically update the anchor link with href attribute value, your job is done.

hope, I answered your question.

Thanks,
Vivek

admin

05.10.09

Hi Brian,

Firstly I would like to thank you for your valuable comment on my post, and coming to your query, when I have posted this article, I have checked in all the respective browsers – as of now I am not having IE 7.0 / IE 8.0 to test the application.

Brian, could you please give me some time, so that I can sort it out.

Hope this is ok with you.

Thanks,
Vivek