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 (http://path-to-peace.net/forum/index.php) (look at the welcome to p2p message box)
How to install?
All details can be found here (http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm)
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
<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 :D
Aku - over and out for the last time on TP until 2 weeks after the 'big event' lol :D
You clever clever man! Well done! I will be using this and I'll get back to you if I have issues or problems.
Nice find Aku. :)
That is really cool! Thanks for sharing!
Sure is, I'm going to try it out..that collaspe and expand deal it has is what I like about it.
I found it abit hard to understand. I'm not a coder :( and I suck!
Quote from: christicehurst on June 28, 2006, 09:33:12 PM
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?
yes christicehurst its very simple - but a little hard work thats all
here is a step by step guide
================================
1. Dowload this package (http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabscontent.zip)
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
<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:
.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 :D 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 :D now all that remains is for you to activate your block and viola! :D
=========The End================
If u have any further Q's feel fre to ask :D
Looks really nice on your site :up:
Thanks :D 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 :)
Anything is possible if you only believe. ;)
does anyone know how to make the tab fill up the length like yahoo's?
try playing around with the ajaxtabs.css file it has all the curstomization in it for tab appearance and box appearance etc etc
ill have a look too in a while
When I use basic HTML to make my custom tab pages, and click the tab, it just loads the page in the same window, like a normal webpage, without the tabs. Any ideas?
yes create it as a scriptbox since it is calling on javascript functions so those would get displayed
Quote from: akulion on August 13, 2006, 03:34:53 AM
yes create it as a scriptbox since it is calling on javascript functions so those would get displayed
This happens when i use the supplied demo page.
Which browser are you using?
I just tested once again with Firefox, Opera and Internet explorer and all 3 of them are displaying it properly on the demo page for me
The problem you are describing above about them opening up in seperate pages only happends when the script dosent get inserted properly into the script box. which can be because:
1. A scriptbox wasnt used
2. the text editor was on in Tinyportal (turn this off temporarily to create that particular block then u can turn it back on)
-----------
Lemme know if ur still haveing problems
This is what I did:
1. unzipped the ajaxcontent.zip
2. open external2.htm in wordpad and deleted all the code in there.
3. added the following code to external2.htm:
<center><script language="JavaScript" src="http://www.bucks.edu/feed/feed2js.php?src=http%3A%2F%2Fwww.dictionary.com%2Fwordoftheday%2Fwotd.rss&chan=y&desc=1&date=y" type="text/javascript"></script>
<noscript>
<a href="http://www.bucks.edu/feed/feed2js.php?src=http%3A%2F%2Fwww.dictionary.com%2Fwordoftheday%2Fwotd.rss&chan=y&desc=1&date=y&html=y">View RSS feed</a>
</noscript></center>
This code basically displays an RSS Feed in javascript.
4. I then run demo.htm, and click Dog (which is the name of the tab). It loads the external2.htm, but not in the contentarea, but as a whole new webpage, without any sign of tabs.
5. I don't think its a problem with the above code, because when I add that same code to the first tab, in demo.htm, it appears fine on the Intro tab. It's just when its on one of the secondary tabs that it messes up.
what a nice effect!!
Thanks for sharing it
it's not working with me aku... don't know if did something wrong.
oh this is pretty old now
its been built upon quite a bit now
try using this one instead:
http://www.tinyportal.net/index.php?topic=11451.0
the demo u see is from the one mentioned n the link above
its not workin with right to left forum :(