Agenda Labs - jQuery Tabs

Now jQuery is a funky language to work with. According to the jQuery website, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development. jQuery is designed to change the way you write JavaScript."

Okay, great, but what does this all mean in layman's terms? Well jQuery basically calls information from one area of the web, and transfers the data to a location that you specify. Like how a command "calls" a script. jQuery is a lot of fun to tinker with, but is quite advanced and can go way over your head if you just a guy wanting to stick with basic web design and "drag-and-drop" technology. Hey, we don't blame you, we LOVE drag-and-drop and plug-n-play stuff. :)

The following trick is done through jQuery and can be used on Forumotion boards with access to template editing. Ego-One was the first FM board to bring the concept of having jQuery tabs on the site to life. The site's web master, Jalokim, easily created his tabs using the jQuery language and stunned his site's visitors with an amazing display of a sleek and smoothly transitioning tab interface that allowed users to access their common UCP controls, the site's statistics, and instructions for affiliation with Ego-One.

Several users were crying out for the "code" to have their own tabs. But if know how Ego-One works, then you probably know that Jalokim didn't answer them right away. We respect Ego's idea of not releasing this stuff like candy on a daily basis. Hey, they would run out of ideas for us if they just gave everything away! However, not long ago, Mex, one of the members of Ego-One and a Forumotion web-master himself, actually instructed a user on how to create their tabs without requiring any knowledge or experience with jQuery. A simple copy/paste here and there, and some basic HTML and CSS knowledge would allow the users to easily create and customize their own tabs!

Well, here we are with Mex's magic code. Full credit for this code goes to him. We would, of course, like to award credit to Ego-One, but since Mex beat Jalo to the tutorial, we're kinda in a bind. ;)

What you'll need to do first is open up your ACP > Display > Templates > General > overall_header_new. Find the

<head>
and immediately after, paste this code:

Step One - JavaScript Code

Save the template, but don't publish it yet. Now for step two: Go to the index_body template and find this code:

Step Two - Default Template Code Snippet

Replace that entire mumbo-jumbo (which is your entire statistics div) with this code:

Step Three - The Magic Code!

Still with us? Good! Now for step three (hang in there!): Now that we have the structure of your new tabs, we want to beautify them. Head over to your CSS (Display > Colors > CSS) and paste in the following code:

Step Four - The CSS

Now let's take a breather. You are done with Mex's tutorial for creating your own tabs! Hurray! The customization of the tab menu now lies in your hands. You can alter the colors of the tabs (links, backgrounds, hover, etc.) via the new CSS you just dropped in. You can edit the actual content of each tab back in the index_body template; which reminds us, DON'T FORGET TO GO BACK AND PUBLISH YOUR TEMPLATES! In order to find out where in the code your tabs are, look for "ex-featured" (Tab 1), "ex-core" (Tab 2), "ex-jquery" (Tab 3), and "ex-classics" (Tab 4).