Tabbed panel

I've tried adding it before the
[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]closeside();[/syntaxhighlighter]

But that did not work. And adding it to header.php did also not change anything.

EDIT: Tried adding it after each tab content. But still No change.

Just before render page try this



xxxxxx.js is your javascript code in a js file

Added it just bejore:
[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]function render_page($license=false) {[/syntaxhighlighter]

But the panel on my website still looks the same as in the screen-shots I uploaded some posts above. No change.

EDIT: Just a note, the "tab funcion" works, I mean, clicking on a tab name it "takes" me to the paragraph that is in that tab. The only problem is the design, there are no tabs displayed, just 3 links and under them the paragraphs. What I need solved are the tabs...

Merged on Jun 07 2011 at 09:06:45:
Any idea?

Here you are, the jQuery library used with PHP Fusion is missing the CSS files. You can replace the one i've added with anyone from the jQuery UI website ;)

Hope I helped.

:D

WOOOO!!! Thaanks alooot!!! That was the problem!! That made the solution!! Thanks alooot!!!!

No problem. Glad I could help you out :)

Hey!

I just kept playing around with the finally working tabs, and I wondered if it where possible to input news and other stuff. I thought about a center content panel as news page. I mean, instead of the normal news page, a panel with tabs. One tab for each news category, for example.

I just tried this on a custom page:
[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false]
<?php

/* Tabbed Panel,
* By Ryan Stewart
*/


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

echo "<div id='tabs'>\n";
echo "<ul>\n";
echo "<li><a href='#tabs-1'>NEWS</a></li>\n";
echo "<li><a href='#tabs-2'>OTHER</a></li>\n";
echo "</ul>\n";

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


// Predefined variables, do not edit these values
$i = 0;

// Number of news displayed
$items_per_page = $settings['newsperpage'];

add_to_title($locale['global_200'].$locale['global_077']);

if (!isset($_GET['readmore']) || !isnum($_GET['readmore'])) {
$rows = dbcount(
"(news_id)",
DB_NEWS,
groupaccess('news_visibility'." AND (news_start='0'||news_start<=".time()."
AND (news_end='0'||news_end>=".time()."
AND news_draft='0'"
);
if (!isset($_GET['rowstart']) || !isnum($_GET['rowstart'])) { $_GET['rowstart'] = 0; }
if ($rows) {
$result = dbquery(
"SELECT tn.*, tc.*, tu.user_id, tu.user_name, tu.user_status
FROM ".DB_NEWS." tn
LEFT JOIN ".DB_USERS." tu ON tn.news_name=tu.user_id
LEFT JOIN ".DB_NEWS_CATS." tc ON tn.news_cat=tc.news_cat_id
WHERE ".groupaccess('news_visibility'." AND (news_start='0'||news_start<=".time()."
AND (news_end='0'||news_end>=".time()." AND news_draft='0'
GROUP BY news_id
ORDER BY news_sticky DESC, news_datestamp DESC LIMIT ".$_GET['rowstart'].",".$items_per_page
);
$numrows = dbrows($result);
while ($data = dbarray($result)) {
$i++;
$comments = dbcount("(comment_id)", DB_COMMENTS." WHERE comment_type='N' AND comment_hidden='0' AND comment_item_id='".$data['news_id']."'";
$news_cat_image = "";
$news_subject = "<a name='news_".$data['news_id']."' id='news_".$data['news_id']."'></a>".stripslashes($data['news_subject']);
$news_cat_image = "<a href='".($settings['news_image_link'] == 0 ? "news_cats.php?cat_id=".$data['news_cat']
: FUSION_SELF."?readmore=".$data['news_id'] )."'>";
if ($data['news_image_t2'] && $settings['news_image_frontpage'] == 0) {
$news_cat_image .= "<img src='".IMAGES_N_T.$data['news_image_t2']."' alt='".$data['news_subject']."' class='news-category' /></a>";
} elseif ($data['news_cat_image']) {
$news_cat_image .= "<img src='".get_image("nc_".$data['news_cat_name'])."' alt='".$data['news_cat_name']."' class='news-category' /></a>";
} else {
$news_cat_image = "";
}
$news_news = $data['news_breaks'] == "y" ? nl2br(stripslashes($data['news_news'])) : stripslashes($data['news_news']);

$news_info = array(
"news_id" => $data['news_id'],
"user_id" => $data['user_id'],
"user_name" => $data['user_name'],
"user_status" => $data['user_status'],
"news_date" => $data['news_datestamp'],
"cat_id" => $data['news_cat'],
"cat_name" => $data['news_cat_name'],
"cat_image" => $news_cat_image,
"news_subject" => $data['news_subject'],
"news_ext" => $data['news_extended'] ? "y" : "n",
"news_reads" => $data['news_reads'],
"news_comments" => $comments,
"news_allow_comments" => $data['news_allow_comments'],
"news_sticky" => $data['news_sticky']
);

echo "<!--news_prepost_".$i."-->\n";
render_news($news_subject, $news_news, $news_info);
}
echo "<!--sub_news_idx-->\n";
if ($rows > $items_per_page) echo "<div align='center' style=';margin-top:5px;'>\n".makepagenav($_GET['rowstart'],$items_per_page,$rows,3)."\n</div>\n";
} else {
opentable($locale['global_077']);
echo "<div style='text-align:center'><br />\n".$locale['global_078']."<br /><br />\n</div>\n";
closetable();
}
} else {
$result = dbquery(
"SELECT tn.*, tc.*, tu.user_id, tu.user_name, tu.user_status FROM ".DB_NEWS." tn
LEFT JOIN ".DB_USERS." tu ON tn.news_name=tu.user_id
LEFT JOIN ".DB_NEWS_CATS." tc ON tn.news_cat=tc.news_cat_id
WHERE ".groupaccess('news_visibility'." AND news_id='".$_GET['readmore']."' AND news_draft='0'
LIMIT 1"
);
if (dbrows($result)) {
include INCLUDES."comments_include.php";
include INCLUDES."ratings_include.php";
$data = dbarray($result);
if (!isset($_POST['post_comment']) && !isset($_POST['post_rating'])) {
$result2 = dbquery("UPDATE ".DB_NEWS." SET news_reads=news_reads+1 WHERE news_id='".$_GET['readmore']."'";
$data['news_reads']++;
}
$news_cat_image = "";
$news_subject = $data['news_subject'];
if ($data['news_image_t1'] && $settings['news_image_readmore'] == "0" {
$img_size = @getimagesize(IMAGES_N.$data['news_image']);
$news_cat_image = "<a href=\"javascript:;\" onclick=\"window.open('".IMAGES_N.$data['news_image']."','','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=".($img_size[0]+20).",height=".($img_size[1]+20)."'\"><img src='".IMAGES_N_T.$data['news_image_t1']."' alt='".$data['news_subject']."' class='news-category' /></a>";
} elseif ($data['news_cat_image']) {
$news_cat_image = "<a href='news_cats.php?cat_id=".$data['news_cat']."'><img src='".get_image("nc_".$data['news_cat_name'])."' alt='".$data['news_cat_name']."' class='news-category' /></a>";
}
$news_news = stripslashes($data['news_extended'] ? $data['news_extended'] : $data['news_news']);
if ($data['news_breaks'] == "y" { $news_news = nl2br($news_news); }
$news_info = array(
"news_id" => $data['news_id'],
"user_id" => $data['user_id'],
"user_name" => $data['user_name'],
"user_status" => $data['user_status'],
"news_date" => $data['news_datestamp'],
"cat_id" => $data['news_cat'],
"cat_name" => $data['news_cat_name'],
"cat_image" => $news_cat_image,
"news_subject" => $data['news_subject'],
"news_ext" => "n",
"news_reads" => $data['news_reads'],
"news_comments" => dbcount("(comment_id)", DB_COMMENTS, "comment_type='N' AND comment_item_id='".$data['news_id']."' AND comment_hidden='0'",
"news_allow_comments" => $data['news_allow_comments'],
"news_sticky" => $data['news_sticky']
);
add_to_title($locale['global_201'].$news_subject);
echo "<!--news_pre_readmore-->";
render_news($news_subject, $news_news, $news_info);
echo "<!--news_sub_readmore-->";
if ($data['news_allow_comments']) { showcomments("N", DB_NEWS, "news_id", $_GET['readmore'], FUSION_SELF."?readmore=".$_GET['readmore']); }
if ($data['news_allow_ratings']) { showratings("N", $_GET['readmore'], FUSION_SELF."?readmore=".$_GET['readmore']); }
} else {
redirect(FUSION_SELF);
}
}

echo "</div>\n";
//END OF TAB1 CONTENT

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

//CONTENT OF TAB 2 - LIST OF ARTICLES IN ARTICLE_CAT 2 - GAME LIST


echo "</div>\n";
//END OF TAB2 CONTENT

echo "</div>\n";
?>
<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>

[/syntaxhighlighter]


And this is the result:

LINK TO IMAGE:
http://img191.imageshack.us/img191/9445/tabsnews.png


It should be possible to use it this way, right? The only problem this way is that the links to "news.php?readmore"... are not working correctly.


Oh and another question. How can I use various different tabs on single page? I mean, now I got the tabbed panel, and when I just use the tabbed panel, it works great, but if I want to add another different tabbed panel, just one works. I think it is because they use the same jquery variables... But, ¿how can I solve that?

Here is an live example:

http://www.km.hostei.com/php-fusion/news.php - The side tabbed panel works perfectly
http://www.km.hostei.com/php-fusion/viewpage.php?page_id=2 - The side panel does not work any more.

¿why?¿what's the solution?


Thanks in advance!

A simple answer to your jQuery tabs not displaying properly is simple. You are currently running the jQuery-UI javascript file in the panel, and then redeclaring it on your custom page. What you want to do is move the jQuery script from the bottom of the panel file, then add it to your themes/templates/headers.php (not sure if there's a function to do this).

Once you've done that simply remove the declaring of $('#tabs').tabs() on any page you are using them on ;)

You mean put this:



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:


It would be:


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:


Would become:

So if I use


with


In the news tabs code and


with


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


with


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.

Not necessary! Thanks alot for your help! but I've manged to solve it - 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") { die("Access Denied"; }

//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") { die("Access Denied"; }
//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'.tabs();
$('#news'.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:


Then when showing tabs do:


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


And for panels:


Just using in one panel



and in the other one:





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.

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?

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?