jQuery Tabs made easy

The other day I needed to create a block (or widget) with tabs, so I started checking different jQuery based tab solutions but they were all very large for what I needed. Most of the jQuery based tabs I found had a lot of functionalities to fulfill everything you need, but they end up being quite large, bloated and complex. I wrote this small jQuery dependant code to create my own tabs widget and thought you could find it useful.

The markup…

…is quite simple

<ul class="htabs hide">
<li>
<h2><a href="#design">Graphic design</a></h2>
</li>
<li>
<h2><a href="#development">Development</a></h2>
</li>
<li>
<h2><a href="#freebies">Freebies</a></h2>
</li>
</ul>
<div class="tabs">
<div id="design" class="tab">
<ul>
<li><a href="#">Typography</a></li>
<li><a href="#" target="_blank">Typefaces</a></li>
<li><a href="#">Painting</a></li>
<li><a href="#">Grid systems</a></li>
<li><a href="#">Optical balance</a></li>
</ul>
</div>
<!-- more tabs --></div>

Style

The CSS is quite large because I added different bullets for you to experiment, so you can get it from the source. It doesn’t have anything that will influence the behaviour. You can remove the CSS and you will get a plain markup for the jQuery tabs that will still work… you don’t believe me?

jQuery

Now, the jQuery code to create our tabs!

jQuery(document).ready(function(){
 //if this is not the first tab, hide it
 jQuery(".tab:not(:first)").hide();
 //to fix u know who
 jQuery(".tab:first").show();
 //when we click one of the tabs
 jQuery(".htabs a").click(function(){
 //get the ID of the element we need to show
 stringref = jQuery(this).attr("href").split('#')[1];
 //hide the tabs that doesn't match the ID
 jQuery('.tab:not(#'+stringref+')').hide();
 //fix
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 //display our tab fading it in
 jQuery('.tab#' + stringref).fadeIn();
 //stay with me
 return false;
 });
});

How to detect screen size and apply a CSS style

Sometimes, we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen. Width property and change the stylesheet. In this tutorial, we’re going to see how to do that using jQuery.

Before we begin, that a look at what we will be building

Detecting screen size with jQuery demo

Loading…

The first step is to load our base stylesheets, the jQuery library and our javascript.

<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="detect800.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="detect.js"></script>
</head>
<body>
<div>The colour of this text will change.</div>
</body>

We’re going to test if the user screen size is less than 1024 x 768 and if it is, we’ll change the stylesheet.

The changing style

Define the same style in two different sheets. Once for the  1024 x 768 and once for the 800 x 600. Just make something quick and distinctive, for detect800.css I’m adding

div{
 color: #006699;
 font: 24px Georgia, serif;
}

and for detect1024.css:

div{
 color: #df0000;
 font: 24px "Trebuchet MS", sans-serif;
}

Detecting screen width

We’re going to add a JavaScript alert so the execution will pause until we click OK and we get to see the former style.

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else  {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});

As a selector, we look for the link element with a rel attribute with a value of stylesheet. We’re going to redirect its href to a different stylesheet. Now, since I’m loading a reset stylesheet in the first place, i will add the :not(:first) modifier, so it won’t affect the first element.

That’s it. Download the detecting screen width the source files

Sliding menu using jQuery

Time for round #2! This time we’ll be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits and you get an entirely new effect. Last time we built some rollovers and tooltips using jquery and this time we’ll be building our slide menu on top of the same code. This tutorial assumes that you have a basic knowledge of jquery. Before we start, you might want to go ahead and try our example of sliding menus using jquery.

The markup

This is exactly the same than before, but for the newcomers here it goes again:
<ul id=”iconbar”>
<li><a href=”#”>
<img src=”key.gif” alt=”” />
Change your password
</a></li>
<li><a href=”http://feeds.feedburner.com/ilovecolors” target=”_blank” rel=”noopener”>
<img src=”rss.gif” alt=”” />
Suscribe to our RSS!
</a></li>
<li><a href=”#”>
<img src=”sel.gif” alt=”” />
Choose your options!
</a></li>
</ul>
As you can see is just a row of li’s with an anchor and two blocks inside it: an image, who triggers the hover event, and a span that is revealed when the event launches.

The idea here is to horizontally expand the li width, thus revealing the hidden span that at the same time will be animated in opacity fading in.

The styling

Basic as it is, it’s all we need.

#iconbar li {
float:left; position:relative; margin-right:20px;
padding: 10px 5px 5px 10px;
width: 30px;
background:#eef;
border: 1px dashed #ffc0ff;
}
#iconbar span {
width: 100px;
height: 35px;
position: absolute;
padding: 0px 5px 5px;
display: none;
line-height:110%;
color:#409BED;
}
I’ve added a background and a dashed border to the li element to show you that the event is triggered when are over the image and not over the li. We still need the absolute positiong of the span, which is relative to the ul element through the li element.

The code

Now that our elements are positioned we need to add some action to them!

jQuery(document).ready(function(){
$(“#iconbar li img”).hover(
function(){
var iconName = $(this).attr(“src”);
var origen = iconName.split(“.”)[0];
$(this).attr({src: “” + origen + “o.gif”});

$(this).parent().parent().animate({ width: “140px” }, {queue:false, duration:”normal”} );
$(this).parent().parent().find(“span”).animate({opacity: “show”}, “fast”);
},
function(){
var iconName = $(this).attr(“src”);
var origen = iconName.split(“o.”)[0];
$(this).attr({src: “” + origen + “.gif”});

$(this).parent().parent().animate({ width: “30px” }, {queue:false, duration:”normal”} );
$(this).parent().parent().find(“span”).animate({opacity: “hide”}, “fast”);
});
});

Right after the DOM is ready() we target the img element within each li element of our navigation bar.

$(“#iconbar li img”).hover(
and we pass the parameters (two functions in fact) that it needs: what to do when the mouse is over the image and what to do when the mouse leaves the image.

function(){

//when the mouse is over the image…

}

, //notice the comma separating the two members…

function(){

//when the mouse leaves the image…

}

Now, when the mouse is over the image we need that the
<ul>
<li>, which is the parent of <a>, parent of <img />, expands its width to 140px.</a>$(this).parent().parent().animate({ width: “140px” }, {queue:false, duration:”normal”} );
$(this).parent().parent().find(“span”).animate({opacity: “show”}, “fast”);
We’re using the animate function to smoothly increase the size (instead of a blocky jump), and of course, we pass as a parameter the desired width. The other parameters are equally important, and is queue:false what puts together everything. Suppose that you fastly move your mouse over the items. Since jQuery enqueues animations, and the animations we set are based on the $(this) element, jQuery will try to play all the animations which will likely cause a collision between two or more animations that jQuery tries to play. Enter the queue:false parameter. This will force jQuery to start the animation of the other items even if the last animation of the previous item hasn’t been completed.

Finally, in order to restore our item to its previous state, before the animation happened, we use

$(this).parent().parent().animate({ width: “30px” }, {queue:false, duration:”normal”} );
$(this).parent().parent().find(“span”).animate({opacity: “hide”}, “fast”);
This will restore the original width attribute that is the same to the defined previously in the stylesheet and will hide or span tag.

So there you have it, your own menu with sliding items. If you haven’t, make sure you read the previous article on creating rollovers and tooltips using jquery and stay tuned for more! Also, check our best web design companies rating  see you next time!</li>
</ul>

Rollovers and tooltips with jQuery

I needed a quick setup for doing some rollovers and tooltips. You know, the usual stuff, mouse over an icon changes image and shows a tooltip. I thought about taking advantage of html tags attributes manipulation through jQuery. If you want to jump in right now you can go to the

Now, if you’re still with me, let’s take a walk through the code. This tutorial assumes that you have a basic knowledge of html, css and jquery.

The markup

This is pretty straight, just an unordered list with three items and each item has a link

<ul id="iconbar">
<li><a href="#">
<img src="key.gif" alt="" />
<span>Change your password</span>
</a></li>
<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
<img src="rss.gif" alt="" />
<span>Suscribe to our RSS!</span>
</a></li>
<li><a href="#">
<img src="sel.gif" alt="" />
<span>Choose your options!</span>
</a></li>
</ul>

However, inside each link we have two important blocks: the icon image and a span. On the img tag, we’ll be changing its src attribute. The span tag is what we will be using for the tooltip. Initially the img tag has a default src value and the span is hidden, when the time comes and the hover event is triggered, the img src attribute is redirected to a different location (another image) and the span is displayed showing the text you defined.

The styling

The style is a bit longer to read but we’re only styling two items: the li containter and the span block.

#iconbar li {
float:left; position:relative; margin-right:20px;
}
#iconbar span {
position: absolute;
top: -50px;
left: -80px;
display: none;
background: url(ttbg.jpg) no-repeat;
width: 110px;
height: 35px;
text-align: center;
padding: 5px;
line-height:110%;
color:#000000;
}

We’re defining an absolute position inside the relative position of our li element. Now we can assign some top and left values to position it. The values will be modified by our jQuery script later. The display is set to none, since we don’t want the span to be visible when we first open the page. The icons doesn’t require styling since we’re changing only the src attribute through jQuery.

The jQuery code

jQuery is truly amazing, with only a few lines of code we can have our icon rollover and tooltip ready. So, let’s get to it. When the DOM is ready, we’re launching a function based on the hover state of the li element within our iconbar. When it’s launched, it will get the src attribute of the image within li and it will store the name without the extension in a variable named origen.

jQuery(document).ready(function(){
$("#iconbar li").hover(
function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split(".")[0];

Next, we assign a new path to the src attribute of img, appending “o” to the name, and the corresponding extension, in this case, “.gif”. The tooltip section begins animating its opacity to fade in and the top position (remember the values on the style sheet?).

$(this).find("img").attr({src: "" + origen + "o.gif"});
$(this).find("span").animate({opacity: "show", top: "-60"}, "normal");
},

Please, notice the comma separating the two functions. The hover event in jQuery takes two parameters: one for the mouse rollover state and one for the mouse rollout state. Now we get to the rollout state, this is what happens when the mouse rolls out of the li area. We take the image src attribute again and we split at the “o.”, the string we added on the hover event, and we redirect the src attribute to the original image path. The tooltip is animated towards a zero opacity, and we position it at the same top value that is defined in the stylesheet, in this case, 50. Notice that I haven’t added the “px” values. Don’t be as lazy as me and add them, but you can see that it still works without the “px” dimensions. We hide it fast to prevent any conflicts with any other thing. You know, when something can go wrong, it will, so don’t give it a chance.

function(){
var iconName = $(this).find("img").attr("src");
var origen = iconName.split("o.")[0];
$(this).find("img").attr({src: "" + origen + ".gif"});
$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
});
});

Of course, some of you might be thinking that you can place anything inside that little cute span and indeed, it’s possible. For example, an icon.

<ul>
<li><a href=”#”>
<img src=”sel.gif” alt=”” />
Choose your options!<img src=”sel.gif” alt=”” />
</a></li>
</ul>

Next time we will be learning to do some sliding tooltips triggering the same hover event. Take for example an iconbar. When you hover the li items the li expands and the tooltip is revealed.

That’s all, so you can go ahead and make your own icon rollover with tooltip. Make sure you check our website design company. Bye for now.