Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Tabbed hooks
trialnick Offline
Junior Member
**
Posts: 13
Joined: Oct 2010
Post: #1
Question Tabbed hooks
Hi friends! Ange

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 Heart

(collapsing option doesn't matter much, I could live without that Biggrin)



Attached File(s) Thumbnail(s)
   
(This post was last modified: 02-08-2011 11:45 AM by trialnick.)
02-08-2011 11:26 AM
Find all posts by this user Quote this message in a reply
1master1 Offline
Member
***
Posts: 232
Joined: Oct 2010
Post: #2
RE: Tabbed hooks
have you seen the jquery tabbed forums tutorial at mybb tutorials. is it the similar thing used there. we can make it on mybb.
02-08-2011 02:40 PM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #3
RE: Tabbed hooks
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
			<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;}



[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 02-08-2011 02:51 PM by leefish.)
02-08-2011 02:48 PM
Visit this user's website Find all posts by this user Quote this message in a reply
trialnick Offline
Junior Member
**
Posts: 13
Joined: Oct 2010
Post: #4
RE: Tabbed hooks
Seems I missed his post. you are great !!! It works perfectly! Yipi

I have no words to thank you! 50star.GIF
02-08-2011 07:53 PM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: