ITS HERE!!! Yahoo styled tabbed content

nikita · October 19, 2006, 02:28:56 PM

Hey Akulion,

I tried using it with RC3+TP+ Luminanace theme... but somehow all the contents are coming one below the other not the way in your site.....

Please help.

akulion · October 19, 2006, 03:09:16 PM

Start off very simple

First upload the files from the 1st post to your forum root into a folder called moofx

Then put the basic code and test to see if it works.....

Code Select


<head>
<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://path-to-peace.net/forum/moofx/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/moo.fx.config.js"></script>

<link href="http://path-to-peace.net/forum/moofx/template_css.css" rel="stylesheet" type="text/css"/>


</head>

<div id="spotlight">

      <ul class="headtab-wrapper">
                <li class="headtab" id="headtab-1">
          <a>Welcome</a>
        </li>

                <li class="headtab" id="headtab-2">
          <a>Whats New?<img src="http://path-to-peace.net/misc/icon29cautiuon.gif"></a>
        </li>
                <li class="headtab" id="headtab-3">

          <a>Site Rules</a>
        </li>
                <li class="headtab" id="headtab-4">

          <a>P2P Team</a>
        </li>
      </ul>


      <div class="sl-wrapper">

                <div class="stretcher" id="stretcher-1">
		  		<div class="moduletable">
hello testing 123
				</div>

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

hello testing 123456

				</div>
		        </div>
		        
                <div class="stretcher" id="stretcher-3">
				<div class="moduletable">
hello testing 123456789
			
               </div>
                </div>

                <div class="stretcher" id="stretcher-4">
          		<div class="moduletable"> 
hello testing 1234567890123

               </div>
                </div>

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

If the above code works then add content slowly one by one to the parts which say 'Put something here'

Be careful when putting stuff in there - its HTML format should be correct

give it a try

nikita · October 19, 2006, 03:25:08 PM

Have done everything... the only thing i have changed is the folder name and changed the path in the code above... can see the tabs and content...but its not functioning...one content coming below the other.... even i have changed the css file...it works... the stretcher function is not working.... changed permission also to 755 to all the files and the folder....

akulion · October 19, 2006, 03:44:26 PM

check a few things:

1 - ur files were uploaded properly
2 - ur not using editors in TP (since they can cause errors in codes)
3 - ur using a Script box
4 - in the css file with witdh for these 2 parts matches:
near the top:

Code Select


#spotlight {
	float: center;
	width: 690px!important;
	width: 690px;
	padding: 0 5px;
	margin: 10px 0 10px;
	line-height: normal;

and near the bottom:

Code Select


#spotlight .stretcher div.col {
	width: 32%!important;
	width: 32%;
	float: left;
	margin-right: 6px;

5 - also make sure that if you are using any tables in your conetnt for the tabs, then their table width MUST NOT be bigger than the one defined above!

6 - Finally try to use smaller width for the 1st part of the css file here:

Code Select


#spotlight {
	float: center;
	width: 690px!important;
	width: 690px;
	padding: 0 5px;
	margin: 10px 0 10px;
	line-height: normal;

instead of 690 try smaller values but not too small though

and check if it works

cos I just used the same code i gave u on my test site and it works perfectly fine

PS: I have also revised the code above (in my last post) to put the paths to my page files...u can try to put that in to see if it works or not :up:

I suspect it is something to do with table width - should be fixed easily hopefully

nikita · October 19, 2006, 04:03:54 PM

working perfectly now... u r a genius.... let me finish the content part..and i will show you..

Thanks..a trillion ( i dont know any larger number )

akulion · October 19, 2006, 04:09:37 PM

good to hear its working :up:

glad i could help out

nikita · October 19, 2006, 06:07:29 PM

Yessss !! Now you can check out at my site-

Business Partner Match

I tried to put in a rss feed and made a 5th tab - that's working too !! but one lil problem is it's breaking the page as the width is too big.

Anyways, I will put something nice there

Thanks again !!

fb · October 20, 2006, 01:07:20 PM

That is very cool code

Thanks for working it out.
One thing i'd like to do is change the blue buttons to a grey-ish
shade tho. Any idea which fields that would be in the .css ?

akulion · October 20, 2006, 03:06:09 PM

there is a small image in the zip pack

change its color over and it will change tab colors

Also ther are 3 states for the tabs: Current, over and hover

you can change their attributes in the css file here

Code Select


#spotlight li.headtab a {
	width: 100px;
	display: block;
	background: #889DA4;
	color: #253135;
	line-height: 20px;
	text-align: center;
	height: 20px;
	cursor: pointer;
}

#spotlight li.headtab a:hover {
	color: #F9FCD1;
	background: #6E8187;
	text-decoration: none;
}

#spotlight li.headtab-current a {
	width: 100px;
	border-right: 1px solid #36474D;
	display: block;
	background: url(http://path-to-peace.net/forum/moofx/tab-current-bg.gif) #465D65;
	color: #F9FCD1;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	height: 24px;
	cursor: pointer;
}

fb · October 21, 2006, 05:47:42 AM

Thanks Aku. I might have to put this on hold tho, having a rough time
getting my content formatted in there.

Also, any idea why the contents of the first tab are blank when you
first arrive to the forum/site?
I see that this occurs on yours & nikita's site also.
Until i 'refresh' the browser, the content of that first tab disappears.

Recent

User

Stats

Members

Stats

Users Online

ITS HERE!!! Yahoo styled tabbed content

nikita

akulion

nikita

akulion

nikita

akulion

nikita

fb

akulion

fb

This website is proudly hosted on Crocweb Cloud Website Hosting.