Hi friends!
Bearing in mind that I have no knowledge about plugins and php, I want to ask next:
I found the thing I'd like to have on my forum. It is smth that guys who made it call
"tabbed hooks".
Quote:Tabbed hooks
All hooks (recent topics, status updates, etc.) are now inside a nice fancy AJAX box with tabs. You've got to see this live. The whole "tabbed hooks" area can also be collapsed and expanded.
Code:
[b]http://live.skinbox.net/[/b]
|
choose theme VIRAL---and below the menu is the frame that contain different options: recent posts, latest files etc.
Basically, there are tabbed hooks which are all represented in a one frame.
I want to get the same for my forum: 1 tab that will contain the welcome message, 1 tab that will contain shoutbox , 1 tab that will contain recent posts ...
But I do not know how to build that. I already have the plugins I need for the tabs (meaning I have the plugin for shoutbox, recent posts) just have no single idea how to get them work together and display properly in the main window-frame.
Could you please guide me?
Thank you in advance 
(collapsing option doesn't matter much, I could live without that 
)
have you seen the jquery tabbed forums tutorial at mybb tutorials. is it the similar thing used there. we can make it on mybb.
Looking at the "thing" then that is a jQuery tab set up. RateU has posted the code for that kind of tab in this forum - I think in the garage forum. You just put it all in a set of divs and run jQuery no conflict.
Code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('abbr');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;">
<tr>
<td class="thead at tab" title="tab1" style="cursor: pointer; text-align: center;" abbr="tab1">
<strong>tab1</strong>
</td>
<td class="thead tab" title="tab2" style="cursor: pointer; text-align: center;" abbr="tab2">
<strong>tab2</strong>
</td>
<td class="thead tab" title="tab3" style="cursor: pointer; text-align: center;" abbr="tab3">
<strong>tab3</strong>
</td>
<td class="thead tab" title="tab4" style="cursor: pointer; text-align: center;" abbr="tab4">
<strong>tab4</strong>
</td>
</tr>
</table>
<div id="tab1" class="content">
{$variable}
</div>
<div id="tab2" class="content">
{$variable2}
</div>
<div id="tab3" class="content">
{$variable3}
</div>
<div id="tab4" class="content">
{$variable4}
</div>
<br class="clear" />
|
and the put the below .css in your global.css
Code:
.at {
background: #838383;
color: #ffffff;
}
#tab1, #tab2, #tab3, #tab4{display: none;}
|
Seems I missed his post. you are great !!! It works perfectly!
I have no words to thank you!
