It’s been a while since I posted about this and as I look for sliders I thought I would update you on some additional cool jQuery Plugins that I’ve come across. Enjoy!

• Nivo Slider – The worlds’ most awesome jQuery slider.
• arbor.js – a graph visualization library using web workers and jQuery
• Awkard Showcase – They call it a Content Slider, but as they state it can do more then just slide the content with tooltips, thumbnails, dynamic height and lots more.
• Nice & Clean Sliding Login Panel – Nice & Clean Sliding Login Panel Built With JQuery.

Ok, right off I have to tell you this article is a biased perspective on the difference between MooTools and jQuery. The bias is not mine, but that of the author. Aaron Newton (of Clientcide fame?) and a core committer to the MooTools Javascript Framework penned jQuery vs MooTools. Apparently it was a blog post of such gravity that Aaron decided it needed it’s own domain name. Sweet! You might wonder why Aaron wants to spend so much energy comparing MooTools to jQuery, a competing Javascript Framework. I think the answer is simple. jQuery is kicking the proverbial dog dodo out of other Javascript Frameworks in terms of user base and general popularity.

Aaron starts the article off trying hard not to be biased, but by the time you reach the meat of the article it’s clear that he’s a fan of MooTools’ approach. There is nothing wrong with that. Aaron is rightfully pleased by what he and his fellow programmers have accomplished. Although I can’t recommend the post as a neutral discussion of the pros and cons of each Javascript Framework, I can say that it is a great description of what MooTools is and how jQuery is not MooTools. Well worth the read if you are interested in picking a new Javascript Framework or just learning a little about how they work. Enjoy.

qTip is an excellent jQuery plugin created by Craig Thompson. It is built on top of the jQuery Javascript library and allows web developers to build flexible, well formatted and easy to use tool tips. I decided to use qTip for my latest web app and was able to get up and running pretty quickly. I did run into one issue that I thought was worth pointing out to help you avoid the same sticking point that I encountered with my approach.

My start was pretty simple. First I downloaded the latest copy of the qTip javascript include file and included it in the header of my project. The I copied the HTML found here and included it in my main project template just before the closing BODY tag.

This is where it started to get a little sticky. The simple qTip examples show you how to create static, pre-defined tool tips when you create the Javascript for them in your header. This is fine for static sites, but I wanted to have tool tips that were dynamically populated by my application at run time. It was just easier for me to include the tool tip content in my HTML inline as the page was being built than to include it all as part of one big header section. Here is what I settled on for my HTML code.

1

<a class="comment"><img src="/mysite/media/img/comment.png" /><div>My Tool Tip</div></a>

As you can see my strategy here is very simple. I create an anchor tag that contains an image and a div. The image is the display object that the user will hover over to see the tool tip. The DIV contains the actual content of the tool tip. To make sure the div does not appear in-line after the image in the rendered page we add the following CSS.

1

a.comment div { display: none; }

This makes sure the div and it’s content are both hidden and do not displace the DOM elements around them. Next I needed to create the Javascript that was going to display the tool tip when the user hovered over the image and hide it when the user moved their mouse off the image. The issue I encountered was not being able to address the anchor tag such that I could include the div content in the tool tip. I searched the qTip forums and eventually came up with the following code.

1
2
3
4
5
6
7
8
9

$(document).ready (function () {
	$ ('a.comment').each (function (){
		$(this).qtip ({
			content: $('div', this).html (),
			show: 'mouseover',
			hide: 'mouseout'
		});
	});
}) ;

This code simply caused the anchor tag with the comment class to be selected each time the user hovered the mouse over the image. The content attribute in the array was populated by the contents of the first div child of the current (this) object which is the instance of the anchor tag with the comment class hovered over by the user. The qTip tool tip displayed then contained the contents of the div.

That’s all there was to it. With this simple setup I was able to generate tool tips that were notably superior to those created by the title attribute of the anchor tag. What you see here is only the tip of the iceberg in terms of the depth of features that qTip offers. If you need a simple and customizable tool tip solution for your web site or web app you should definitely check out qTip!

I was looking for a useful confirmation dialog using jQuery and I found this link. With help from the post author and from the comments I was able to create my own very slightly modified approach that works pretty well and allows for inline generation of the confirmation message in your HTML. Here is what I did.

First I modified the Javascript code per a suggestion in the comments to the post. The result for me looked something like the code fragment below.

1
2
3
4
5

$(document).ready (function () {
	$('.delete').click (function () {
		return confirm ("Are you sure you want to " + $(this).attr ("title") + "?") ;
	}) ; 
}) ;

This is pretty straight forward if you are familiar with jQuery. What happens is the code block is executed anytime an object in the DOM with a class of delete is clicked. The confirm function uses the partial strings “Are you sure you want to ” and “?” that are universal for all messages. The helpful bit from my perspective is joining these two strings with the title attribute of the object that was clicked. This makes more sense when you look at the anchor tag that completes the process.

1

<a href="http:foo.com/delete/something" title="Delete Bob's Pizza Order" class="delete">3 Cheese Pizzas</a>

This is a mock up of a link to delete Bob’s order for 3 Cheese Pizzas. Bob is often stiffing us on the bill so he deserves it. When this anchor tag is clicked by the user the Javascript code above is called. The browser pops up a confirmation dialog with the message:

“Are you sure you want to Delete Bob’s Pizza Order?”

If the user clicks OK then Bob’s order is toast. If they click Cancel then Bob has a shot. At least those are the options that are presented by Google Chrome. I have not tested, but I think they are pretty consistent across browsers.

That’s all there is to it. This is a very low tech approach to providing a context sensitive confirmation dialog using jQuery. If you are not sure how to install the jQuery Javascript library you should check out their web site at http://jquery.com/. Good luck!

Here is a brief list of interesting jQuery Plugins from the following article at http://www.ajaxline.com.

• DataTables
• jQuery Sparklines
• ImageSwitch
• qTip
• jBreadCrumb
• jquery.scrollable
• Fancybox
• iCal-like calendars

Peace