Thread: Miscellaneous Hacks - DJ's Dynamic Tab Content for Postbit_Legacy
View Single Post
  #2  
Old 02 Jul 2008, 06:06
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Real name: Mark Daniel Martinez
Arrow

Basic Breakdown
Here's a basic explanation as to how the code works. This should help you to create new tabs and what can be edited in the code to your preferences.

The Tabs: Let's take a look back at the code you just added. In Step 4 you added a bunch of lines like this one. These are your tabs, the parts that people will actually click on to change the content view. In this example we're looking at the code for Tab 2.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

The code in red is your TITLE. It's what will show in the Tool Tip when someone mouseovers one of the tabs. Change this to your liking. I group my tabs by categories like Contact Info, TCG Info, General Info, etc. Do what cha' like.

The code in blue just a non-breaking space added in so people have something to click on. Users will see a background image, but what they'll actually be clicking is this non-breaking space. Change this space if you want to use text for your tabs instead of images. Otherwise just leave it be. (See FAQ)

The Containers: Now lets take a look at your containers. These are the DIVs that will display your content when a new tab is clicked. Each one is marked <!-- TAB [#] CONTENT --> and correspond to each of the tabs mentioned in the block of code above.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

The code in blue, the DIV, is your container, and is needed for the tabs to work. This part you would not change.

Everything on the inside is replaceable code and can be customize to look however you want. Examples of code snippets you can move into each of these tabs can be found a little further down in this post.



Creating New Tabs
Let's take a look at the Step 4 code again. Here's the code for Tab 2 again, as well as it's corresponding container.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

The green code in both blocks here is what tells Tab 2 to show container 2's content. The rel of the tab is the same as the id of the container. They're both tab2$post[postid].

So when creating additional tabs, pick up where the numbers left off on the last tab and start again. I had you install 5 tabs, so if your using all 5 and want to add another, the rel for your new tab and id for your new container would both be tab6$post[postid]. The next tab and container you add would be tab7$post[postid]. Then the next tab8$post[postid] and so on and so forth. You get the idea.



More Options

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

NOTE: This has since been set to false by default. Users have been reporting some login issues when this is set to true. So use at your own discretion.

This line of code sets the persistence of a clicked tab each time a user returns to that page during the same browser session. Set to true, and the last clicked tab will always display that tab on reload. Set to false, and it will show the tab with the ID selected each time. Note that each tab is unique, and having this set to true won't make much of a difference to your users view of the forum. The only tab that will ever persist is the one he/she clicked on, on a specific post in a specific thread, and only there. And only during the same browser session.



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Put a number inside the parenthesis to determine how many milliseconds you want to pass between each time the tabs automatically toggle themselves. I have not tried this option yet, and I can imagine that it would be very annoying. But I figured, why not let you try it.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

vBulletin IF Conditionals can be used to show/hide whole tabs, or the specific content of tabs based on a number of parameters: Usergroup Permissions, Forum IDs, User IDs, Thread IDs, Post IDs, etc. Just wrap a conditional around a whole tab and then it's container, or wrap the content of the container in any number of fashions. To learn more about what conditionals are available here are two good resources:





Default Postbit Legacy Code Bits
Here's a few of the things that come standard in vBulletin that you might want to move to the various DIV containers.

Online Status:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Posts:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Age:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Join Date:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Biography:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Interests:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Occupation:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Infractions:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Reputation:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Instant Messengers:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Common Hack Postbit Legacy Code Bits
Here's a few code bits that you'll find in some of the more common vBulletin modifications that you might have installed that you'd like to move to the DIV containers.


vBCredits:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Countries/Region Flags (Replace 8 and 9 with whatever fields your using):
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


ibProArcade (With some slight additions by me):
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Made Up Postbit Legacy Codes:
And here's at least one I just went ahead and made up for my forum:
Send User a PM/Email/Friend Request:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



If you have more examples that I can post, possible some I overlooked or mods I don't have installed, please feel free to post them and I'll add them to this post.
__________________

Last edited by Digital Jedi; 23 Sep 2009 at 21:34.
Reply With Quote