ITS HERE!!! Yahoo styled tabbed content

akulion · August 30, 2006, 09:18:55 AM

Something so cool

It will make you rip your clothes off and run naked into the streets with joy

When?

soon :coolsmiley: as in TP 0.9.5 soon - but its not that, its a block code snippet (in case u were wondering lol)

akulion · August 30, 2006, 09:44:40 AM

Yes its here

live demo

stand alone demo

Crip · August 30, 2006, 10:11:31 AM

Cool aku.

akulion · August 30, 2006, 10:35:57 AM

man it sure was a tough task getting this sorted out

but it basically gives the same - exact same functionality as the yahoo tabs we see

smooth scrolling
can support all types of elements including polls, forms, login boxes and whatever...

i love it

i dont have any documentation for it yet - but im trying to complie something so i can put it here

Credits go to: moofx for the base code and joomla template for the tabbed style :up:

Crip · August 30, 2006, 10:42:39 AM

Best of luck on that.. it's really nice.

Max · August 30, 2006, 12:12:36 PM

I Like It, Good Job Akulion

akulion · August 30, 2006, 12:17:51 PM

Ok here are the install instructions with a small DEMO

sorry i havent had much time to experiment around with this thingie

but basically it can give you the exact same features as on the yahoo.com page with their tabbed content. Its all really up to you and your creativity as to how you decorate it and make it interesting.

Please note that SOME knowledge of HTML is required for this - since all content created inside the tabs is basically handeled with html tabs.

PHP I havent tested yet, but i am sure it will support it if you echo out the whole script leaving the php bits out of the quotes (if u know what i mean)

as u may have guessed im being hasty here - already had to work nearly 3 hours to get this lil script working.

The script itself is freeware and available from http://moofx.mad4milk.net but it is not available in the tabbed format you see here. But still that page is worth a look especially for theme creators since it offers some cool functions for browsers.

Anyways on to the instructions...

Download this zip file open it, upload all its content to a folder in your forum root, call it whatever you want - as long as you put the correct address in the code below.

Create a script block and add all the following code to it:

Code Select



<head>
<title>Your title here - but not necessary</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.config.js"></script>
<link href="http://yoursite.com/folder/template_css.css" rel="stylesheet" type="text/css"/>

</head>



<div id="spotlight">

      <ul class="headtab-wrapper">
                <li class="headtab" id="headtab-1">
          <a>Your Tab 1</a>
        </li>
                <li class="headtab" id="headtab-2">
          <a>Your Tab 2</a>
        </li>
                <li class="headtab" id="headtab-3">

          <a>Your Tab 3</a>
        </li>
                <li class="headtab" id="headtab-4">
          <a>Your Tab 4</a>
        </li>
      </ul>


      <div class="sl-wrapper">

                <div class="stretcher" id="stretcher-1">
		 <div class="moduletable">
		  		
Content 1 Goes here			

		</div>
		</div>
                <div class="stretcher" id="stretcher-2">
          	<div class="moduletable">

		
Content 2 Goes here

		
		</div>
		</div>
		        
                <div class="stretcher" id="stretcher-3">
		<div class="moduletable">
				
Content 3 Goes here
			
                </div>
                </div>

                <div class="stretcher" id="stretcher-4">
          	<div class="moduletable"> 

Content 4 Goes here

                </div>
		</div>
     			<script language="javascript" type="text/javascript">init();</script>
	</div>
</div>

replace all the www.yoursite.com/folder instances with the path to those files you uploaded.

where it says "your tab here" goes the heading for the tabs

where it says content 1 here, goes whatever content you wana put

ALL other customization is done in the CSS file..and I mean ALL customization, colors, box sizes, etc etc.

If you wana add more tabs, just study the sequence in the above code and add new tabs acordingly by creating a new LI tag and then a new DIV with the same Id to identify it.

Once again sorry for the short inctructions- but really right now im at the end of patience lol i need rest!

knat · August 30, 2006, 04:20:52 PM

Pretty cool feature, i might use it some day .. thanks for sharing

Bernak · August 30, 2006, 04:40:23 PM

Nice work :up:.
Looks "not so difficult" to implement, but documentation is always important

I will give it a try on my next site-makeover

Thank's for sharing

RoarinRow · August 30, 2006, 05:58:08 PM

yeah, very cool

Recent

User

Stats

Members

Stats

Users Online

ITS HERE!!! Yahoo styled tabbed content

akulion

akulion

Crip

akulion

Crip

Max

akulion

knat

Bernak

RoarinRow