How to Create Custom AJAX Tabs using jQuery. Download Source Code.

How to Create Custom AJAX Tabs using jQuery

Tags: Ajax, beginner's guide, jQuery, tabs, Tutorial

Today’s morning started a little hot here at ajaxBlender. We had some free time before starting the production meeting, and Mike (our lead developer guy) and Justin (newbie who joined us in November) started arguing about their respective abilities of creating cross-browser markup code (HTML, CSS, JS) by hand without mistakes, but also doing it really fast.The exchange went a little like this:

J: I am sure, there is no way you can create scripts from scratch fast. First thing is you integrate the 3rd party stuff. This is easy but when you have to create your custom code, it will require time for debugging, planning the structure, etc – even for small scripts.

M: Ha, do you want to try me? ;) You select a script and I do it. If I do it you owe me a pizza and make me coffee each morning for a week, otherwise I will for you.

J: Hm.. Sounds good. What about ajax tabs?

M: No problem :) How much time?

J: 10 minutes?

M: Great!

As you see, resolution to the matter involved a little fun and a wager (pizza).

Experience took its part – Justin lost. We recorded the process for proof ;) and now we’re posting it with a quick tutorial. You can watch Mike “cook” the code in the time-lapse YouTube video below, and you can download his AJAX tabs here.

That’s it ;) Click the Demo button to see it in action.

Here’s the code he created:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tabs Demo</title>
     <link rel="stylesheet" href="./main.css" />
     <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="./main.js"></script>
</head>
<body>
     <div id="page">
          <ul id="tabs">
               <li><a href="./tabs/tab-1.html">Tab 1</a></li>
               <li><a href="./tabs/tab-2.html">Tab 2</a></li>
               <li><a href="./tabs/tab-3.html">Tab 3</a></li>
          </ul>
          <div id="tabs-container">
               Loading. Please Wait...
          </div>
</div>
</body>
</html>

CSS

BODY {
     margin: 20px;
     padding: 20px;
     font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #333333;
}
#page {
     margin: auto;
     width: 1000px;
}
UL.mytabs {
     position: relative;
     z-index: 2;
}
UL.mytabs, UL.mytabs LI {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
     float: left;
     padding: 7px;
     border: 1px solid #CCCCCC;
     border-bottom: 1px solid #E0E0E0;
     background: #F0F0F0;
     text-decoration: none;
     color: #333333;
     height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
     background: #FFFFFF;
}
UL.mytabs LI.current A {
     font-weight: bold;
     font-size: 14px;
     border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
     position: relative;
     z-index: 1;
     clear: both;
     border: 1px solid #E0E0E0;
     padding: 10px;
     top: -1px;
}

JavaScript


var containerId = '#tabs-container';

var tabsId = '#tabs';
$(document).ready(function(){
     // Preload tab on page load
     if($(tabsId + ' LI.current A').length > 0){
          loadTab($(tabsId + ' LI.current A'));
     }
     $(tabsId + ' A').click(function(){
          if($(this).parent().hasClass('current')){ return >false; }
          $(tabsId + ' LI.current').removeClass('current');
          $(this).parent().addClass('current');
          loadTab($(this));
          return >false;
     });
});
function loadTab(tabObj){
     if(!tabObj || !tabObj.length){ return; }
     $(containerId).addClass('loading');
     $(containerId).fadeOut('fast');
     $(containerId).load(tabObj.attr('href'), function(){
          $(containerId).removeClass('loading');
          $(containerId).fadeIn('fast');
     });
}

View Demo

Leave a Comment

Andreas

November 14, 2009

GREAT!!! really fast. very good work. You are great man, go on!

Davide

December 4, 2009

thanks, that was very useful. You rock!

Brad

December 5, 2009

Can you target the tabs?

ajaxBlender.com

December 7, 2009

Thanks for your question, but I’m not sure I understand it fully. I assume you are not wanting to link them to a new target, as this would not technically require AJAX (or even be AJAX).

Are you asking if the content on the AJAX tabs can be crawled by the search engines? If so, then yes. The code for the AJAX tabs is SEO friendly, as it is built using unordered lists and with links to the tabs. All search engines will crawl and index the content of each tab. If this is not what you are asking, please clarify and we will try to help. Thanks!

Joshua Sortino

December 16, 2009

You guys should start “The National Speed Coding League” (NSCL) and advertise on ESPN (with all their channels, maybe they’ll cater one for the geeks.)

Alex.f

January 26, 2010

Hey, nice script there. I got a problem using it with Google Chrome though, the content within the tabs will look really weird, it works fine in other browser though…

http://www.sundsvallsolutions.se/index2.html

Darren – ajaxBlender

January 26, 2010

Alex.f, I see that the HTML files you’re trying to embed (i.e. http://www.sundsvallsolutions.se/foretag2.html) have <html><body> tags in them. This is not needed for the implementation of the tabs. You should leave <div id=”container1″>…</div> in the file only. This should fix it. Let us know, if not. Thanks!

Alex.f

January 26, 2010

That did the job, thank you very much for this excellent script and the help!

Brian

February 1, 2010

Very nice but if I replace the .html pages with ColdFusion pages (ie tab-1.html replaced with tab-1.cfm), the pages will not display. Must the linked pages be in .html format?

Darren – ajaxBlender

February 3, 2010

Brian, the extension type should not matter. It should work fine with .cfm. If you could provide us with the link to view the implementation, we will try to help fix the problem. Thanks!

Darren

February 5, 2010

Darren -

Thanks for the reply. Shortly after I posted the message, I found that it did work fine with other browsers such as FireFox and Chrome but not IE 7. I don’t have this on the web, just testing on a development server. If I can get it working on the dev server, it will then be moved to prod.

Thanks for the reply.

Raghib suleman

April 13, 2010

thanks, its very useful…!

Jonathan Morgan

April 28, 2010

Hi There,

Thanks for a great tutorial.
I’m also having difficulties with Chrome, though not for the same reason as Alex. Nothing is appearing within the content boxes. This isn’t an issue in either Safari or Firefox.

I’m sorry I don’t have a live version to link to, but here are some Pastie links:

HTML
http://pastie.org/939113

Javascript
http://pastie.org/private/gvdk6i26eb9m2rwd1w4ttq

CSS
http://pastie.org/private/fkckx9hh4znf79xzi1urvg

Tab1
http://pastie.org/private/rvwnspvttqitxhdpj7gxw

Tab2
http://pastie.org/private/ih1ucoa4bghqmfakbryzbg

Any help would be greatly received!

Thanks!

Jonathan Morgan

May 5, 2010

Actually, your demo isn’t functioning properly in Chrome.

Darren – ajaxBlender

May 25, 2010

Jonathan,

the script was actually developed and tested in Chrome, initially. please test it again. (we have been upgrading our servers and you could have possibly hit it at that time, but all should be good now.)…

thanks for the comments and help too!

Maarten

July 7, 2010

Hi Darren,

I got the script working but when I try to change the file extentions to php it doesn’t work any more. The file loads and then it loads another page which still is an html file… Any thoughts?

I would like to use my sql-database to display information on the different tabs.

Thanks!

Maarten

July 7, 2010

Hi Darren,

Got that fixed when I changed all the html documents to php in the tabs folder, but it won’t load any data from my sql-db into the tabs-documents?

Thanks again :)

maarten

July 7, 2010

Problem solved…

ajaxBlender.com

July 8, 2010

Maarten,

You move pretty fast. I didn’t even have time to look :). I’m glad you got the tabs working. Let us know if there are any other issues.

Thanks,

Alex