Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Tabbed panel

You mean put this:
CodeDownload  
<link rel="stylesheet" type="text/css" href="<?= INCLUDES ?>/jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />
<script type="text/javascript" src="<?= INCLUDES ?>jquery/jquery-ui.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $('#tabs').tabs();
   });
</script>




Into "themes/templates/header.php"

?


EDIT: Tried it and did not work..
Sorry my bad. You should know that an ID tag is a unique tag reference, and therefore cannot be called more than once to run tabs. An easy fix is to make your tabs a class.

So instead of:
CodeDownload  
<div id="tabs">



It would be:
CodeDownload  
<div class="tabs">



I would recommend make the class name a unique name which won't get confused with anything else. Remember to change the selector on the jQuery too!

So:
CodeDownload  
$('#tabs').tabs();



Would become:
CodeDownload  
$('.tabs').tabs();

So if I use

CodeDownload  
<div class="news_tabs">


with
CodeDownload  
$('.news_tabs').tabs();



In the news tabs code and

CodeDownload  
<div class="panel_tabs">


with
CodeDownload  
$('.panel_tabs').tabs();



In the side panel code it should work, right?
Well you don't really need to have 2 selectors, you can use the same one for both.
Tested

CodeDownload  
<div class='news_tabs'>


with
CodeDownload  
$('.news_tabs').tabs();



On a custom page and it does not work... No tabs are shown. Just two links with tab contents under them.
Can you post your headers.php file where you are declaring the tabs? It's working fine for me on my test website.

Quote

Ryan Stewart wrote:

Can you post your headers.php file where you are declaring the tabs? It's working fine for me on my test website.



Not necessary! Thanks alot for your help! but I've manged to solve it smile - USING IDs

Here's what I've done:

TABBED SIDE PANEL
INFO: In side panel each tab contains a list of articles.

[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]
<?php
/* Tabbed Panel,
* By Ryan Stewart
* MOD BY KEVIN MASCHKE
*/

if (!defined("IN_FUSION"wink) { die("Access Denied"wink; }

//SETTING ID TO "list"
echo "<div id='list'>\n";
echo "<ul>\n";
echo "<li><a href='#tabs-1'>TAB 1</a></li>\n";
echo "<li><a href='#tabs-2'>TAB 2</a></li>\n";
echo "</ul>\n";

//START OF TAB1
echo "<div id='tabs-1'>\n";
//CONTENT
echo "<strong>Tab 1</strong>\n";
echo "</div>\n";
//END OF TAB1

//START OF TAB2
echo "<div id='tabs-2'>\n";
//CONTENT
echo "<em>Tab 2</em>\n";
echo "</div>\n";
//END OF TAB2

echo "</div>\n";
?>
[/syntaxhighlighter]



TABBED CENTER/NEWS PANEL
INFO: Each tab contains news

[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]
<?php

/* Tabbed Panel,
* By Ryan Stewart
* MOD BY KEVIN MASCHKE
*/


if (!defined("IN_FUSION"wink) { die("Access Denied"wink; }
//SETTING ID TO "news"
echo "<div id='news'>\n";
echo "<ul>\n";
echo "<li><a href='#news1'>NEWS</a></li>\n";
echo "<li><a href='#news2'>OTHER</a></li>\n";
echo "</ul>\n";

//START OF TAB1
//NOTE THAT THE TAB CONTENT ID IS "news1"
echo "<div id='news1'>\n";
//TAB CONTENT
echo "<strong>Tab 1</strong>\n";
echo "</div>\n";
//END OF TAB1

//START OF TAB2 CONTENT
//NOTE THAT THE TAB CONTENT ID IS "news2"
echo "<div id='news2'>\n";
//TAB CONTENT
echo "<em>Tab 2</em>\n";
echo "</div>\n";
//END OF TAB2
echo "</div>\n";
?>
[/syntaxhighlighter]



And then editing:

/themes/templates/header.php

At the bottom, just after:

[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]require_once THEMES."templates/panels.php";
ob_start();
?>[/syntaxhighlighter]
I added:
[syntaxhighlighter brush=javascript,first-line=1,highlight=0,collapse=false,html-script=false]<link rel="stylesheet" type="text/css" href="<?= INCLUDES ?>/jquery/css/ui-lightness/jquery-ui-1.8.13.custom.css" />
<script type="text/javascript" src="<?= INCLUDES ?>jquery/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#list'wink.tabs();
$('#news'wink.tabs();
});
</script>[/syntaxhighlighter]

NOTE: #list defines the side panel tabs, while #news defines the center/news panel tabs.

Note that to work correctly, the tab ids of the panels need to be different. Each panel needs its own tab ids.

You can see it working here: http://www.km.hostei.com/php-fusion/viewpage.php?page_id=2
I know that each tab declaration needs a unique ID, but with a single class tab declaration it would work everywhere. You could have easily done:
CodeDownload  
$('.my-tabs').tabs();



Then when showing tabs do:
CodeDownload  

<div class='my-tabs'>
<ul>
<li><a href="#tabs-1">Tabs 1</a></li>
</ul>

<div id="tabs-1">My first tab.</div>
</div>



The way you are doing it right now is pretty stupid if you ask me as you are loading it up once, then going and loading it again.

Quote

Ryan Stewart wrote:

I know that each tab declaration needs a unique ID, but with a single class tab declaration it would work everywhere. You could have easily done:
CodeDownload  
$('.my-tabs').tabs();



Then when showing tabs do:
CodeDownload  

<div class='my-tabs'>
<ul>
<li><a href="#tabs-1">Tabs 1</a></li>
</ul>

<div id="tabs-1">My first tab.</div>
</div>



The way you are doing it right now is pretty stupid if you ask me as you are loading it up once, then going and loading it again.


Oh.. I was thinking I finally made something right :(

Ok... I've changed to what you've said.

Using in header.php
CodeDownload  
$('.tabs').tabs();



And for panels:
CodeDownload  

<div class='tabs'>
</div>



Just using in one panel

CodeDownload  

<div class='tabs'>
<ul>
<li><a href="#news1">news1</a></li>
<li><a href="#news2">news2</a></li>
</ul>
<div id="news1">My first tab.</div>
<div id="news2">My second tab.</div>
</div>



and in the other one:

CodeDownload  

<div class='tabs'>
<ul>
<li><a href="#anime">anime</a></li>
<li><a href="#games">games</a></li>
</ul>
<div id="anime">anime tab</div>
<div id="games">game tab</div>
</div>





This way it works correctly. ¿And this way you say I load it up just once? If yes, it is better for my site, right?

SEE IT HERE:

http://www.km.hostei.com/php-fusion/viewpage.php?page_id=2
Perfect :)
If you need any help with any more of this don't hesitate to contact me.

Quote

Ryan Stewart wrote:

Perfect :)
If you need any help with any more of this don't hesitate to contact me.


Thanks alot!

If I could add Experts in this forum I'd add you! :D

Merged on Jun 08 2011 at 15:37:44:
Oh... Yes, there's a thing you could (if you want/can) help me... the css.

I attached a rar with the Jquery CSS I'm using, and my themes CSS...

Could you help me modify Jquery CSS to make tabs look more as the theme?
Kevin Maschke attached the following file:
css.rar [12.37kB / 244 Downloads]
I sure can. If you send me your whole theme in a ZIP file via PM I can do that for you later on. :)

Merged on Jun 08 2011 at 15:57:49:
How is this for you?
Ryan Stewart attached the following file:
jquery-ui-1813customcss.zip [6.44kB / 281 Downloads]
GREAT GREAT GREAT!

If I had no girlfriend, I would say that I love you! :D

Thanks alot!
Thread Information
Author
Replies
53 posts
Views
18,678 times
Last Post
Last updated on 9 years ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Craig, Kevin Maschke, Mangee, DrunkeN, khalid545, Lippke, Ryan Stewart, GMUDuckman