JQuery Tools

So I have been working with JQuery Tools in a project, and I am quite impressed with the library itself. I guess so far I can only give my opinion on the Tabs and Overlay tools.

TABS

I chose to use the tabs with no images just to give me a little bit more wiggle room when styling it. It was very easy to implement and was working in seconds.
Add the following code inside of the <head> element.

<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs-no-images.css"/>

Add the following code inside of the <body> element.

<!-- tabs -->
<ul>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2/a></li>
<li><a href="#">Tab 3</a></li>
</ul>

<!-- panes -->
<div>
<div>
<p>Content belonging to Tab 1</p>
</div>
<div>
<p>Content belonging to Tab 2</p>
</div>
<div>
<p>Content belonging to Tab 3</p>
</div>
</div>

<!-- activate tabs with JavaScript -->
<script>
$(function() {	// :first selector is optional if you have only one tabs on the page
$(".css-tabs:first").tabs(".css-panes:first > div");});
</script>

I do not like to keep javascript lingering inside of the body tag unnecessarily so when I have to write some kind on initialization like this one I create a “scripts.js” and throw them all in there. It makes it easy for me to just go to one place to find all the script initialization.

OVERLAY

I chose to use the simplest one that they offered as well, because I really did not need all the fancy effects that they offered with the other ones. This tool was very easy to install and modify as well.

Add the following code inside of the <head> element.

<!-- include the Tools -->

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>

<style>
/* some styling for triggers */
#triggers {
text-align:center;
}
#triggers img {
cursor:pointer;
margin:0 5px;
background-color:#fff;
border:1px solid #ccc;
padding:2px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* styling for elements inside overlay */
.details {
position:absolute;
top:15px;
right:15px;
font-size:11px;
color:#fff;
width:150px;
}
.details h3 {
color:#aba;
font-size:15px
margin:0 0 -10px 0;
}</style>

Add the following code inside of the <body> element.

<!-- trigger element -->
<div id="triggers">
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#overlay1"/>
</div>
<!-- overlay -->
<div id="overlay1">
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" />
<div>
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>
The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion
for the 1929 International Exposition in Barcelona, Spain. It was an important building in
the history of modern architecture.
</p>
</div>
</div>
<!-- activate overlay with JavaScript -->
<script>
$(document).ready(function() {
$("img[rel]").overlay();});
</script>

Once again, I put the overlay initialization under my “scripts.js” folder.

PROBLEMS THAT I ENCOUNTERED

Their forums are full of questions, but not so many answers. And that’s never a good thing. You want to keep your users happy, and even tho this is a free tool, I’d still like to see a little bit more of interaction on JQuery Tool’s part.

The first issue I ran across was the fact that if you try to use more than one tool in one page, things start to get buggy across browsers. Specially when using Safari.

I was able to use an overlay pulling content from an external page with the tabs inside of it, and it worked fine in all major browsers with the exception of Safari. I searched their forums up and down and I noticed that a lot of people were asking the same question, but nobody seemed to have the answer. How can you get Safari to render an Overlay with an External Page containing Tabs or for that matter, any kind of JavaScript what so ever.

Then I decided to do some digging of my own, and I realized that when viewing the source code in Chrome, Internet Explorer or Firefox the <div> containing the external page will bring in all the elements in the page from <html> to </html>, but when I did the same in Safari it will only render anything between the <body> tags. And that’s why my overlay was having issues executing the JavaScript that I had included in the <head>.

So putting the JavaScript initializations outside of the <body> tag was not a great idea when using the Overlay tool. So to fix my issue with Safari not rendering anything above and below the <body> tag I had to include the following back into the <body> of my external document.

<script type="text/javascript">
$.getScript("/js/scripts.js");
</script>

CONCLUSION

All and all I have enjoyed using JQuery Tools, very easy to install and modify, but I think they really need to start answering some of the questions in their forums if they want a much more positive experience for their users.