Tabbed Content Block

[akulion]

Hi

This is a perfect script for people whose pages are short on 'real estate' (space)

This script will require some work on the users end - its not a simple 'plug n play' type script...so there is no real simple explanation.....

Demo: Here (look at the welcome to p2p message box)

How to install?

All details can be found here

Download the file - upload to your forum directory - the ajaxtabs folder goes to the forum root 'as is' (u can however modify the files inside of course to suit ur needs)

the external#.htmfiles go into the root folder of the forum

Be sure to open and modify them to suit ur needs

Just remember - bunch the given codes (inside the demo.htm file) together and put them all in a center bloc to get the desired results

to make it easier- the codes u will need from the demo.htm file are as belows

Code Select Expand



<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script- Ã,© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea">Sea Otter</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<p>Welcome to the P2P Forums, please feel at home. Currently you are on the portal page which gives you access to important announcements, recent posts & other forum functionalities.We have 3 seperate posting areas for members on P2P, please select one to begin posting.</p>

</div>

<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>



You can add as many external pages as you want.

width of the Box can be modified using the CSS file included.

Have fun

Aku - over and out for the last time on TP until 2 weeks after the 'big event' lol

[christicehurst]

You clever clever man! Well done! I will be using this and I'll get back to you if I have issues or problems.

[Crip]

Nice find Aku.

[IchBin]

That is really cool! Thanks for sharing!

[Crip]

Sure is, I'm going to try it out..that collaspe and expand deal it has is what I like about it.

[christicehurst]

I found it abit hard to understand. I'm not a coder and I suck!

[Crip]

I found it abit hard to understand. I'm not a coder and I suck!

It's not that bad, what part of it can't you understand?

[akulion]

yes christicehurst its very simple - but a little hard work thats all

here is a step by step guide

================================

1. Dowload this package

2. Unzip the package and open up the 4 files external, external1, external2, external3 and change the text inside to what you want it to be....this will be the text displayed on the tabs (except the 1st tab) - also in this file you can specify the name of the images you will be using, they can be jpg or gif (havent tested with PNG yet), so you can set your image names here too.

3. Next take the code I gave above and change the part where it says Welcome to the P2P Forums, u can put ur text there - this text will be displayed in the 1st tab.

3.1 Also note to that code you can add more lines to add more tabs like so

Code Select Expand



<li><a href="external#.htm" rel="ajaxcontentarea">Your tab text</a></li>



When you add a tab also create a new external#.htm file for it and upload to the forum root (# = number)

4. Post that code into a center bloc and save it (dont activate yet)

5. Upload all the external.htm files to the forum root (e.g: yoursite.com/smf/ )

6. In the zip package there was a folder called ajaxtabs, open it and inside it open the ajaxtabs.css and modify this part right at the bottom:

Code Select Expand



.contentstyle{
border: 1px solid gray;
width: 500px;
margin-bottom: 1em; padding: 10px;
}



The width here is the width of the display box so u can change it to be bigger or smaller if u want - just remember the bigger the width the more tabs can fit on top of the box.

7. Now you are nearly done All that remains is for you to place the images u will be using into the ajaxtabs folder (use the same name for images as specified in the external.htm files) - and then upload the whole folder to your forum root (like this --> yoursite.com/smf/ajaxtabs <--goes right here)

There you are ALL done now all that remains is for you to activate your block and viola!

=========The End================

If u have any further Q's feel fre to ask

[RoarinRow]

Looks really nice on your site  :up:

[akulion]

Thanks feel free to use the images if u want

And also remember that if you are using a darker theme you would want to change the CSS file attributes to darker colors so that the tabs show up dark instead of light