Mini Mods - Innovative Signature Showcase

Innovative Signature Showcase for vBulletin 4.0
Compatible with vB4 Beta (All) and vB4 RC (All) and vBulletin Gold, pretty much 4.0.x until 4.1 is released.

By:

This is very similar to DJ's Dynamic Tab Content for Postbit Legacy found here:

https://vborg.vbsupport.ru/showthread.php?t=184136

Basically I decided to use this in my signatures and so can you, it slides in different content, the first is your signature per the boards allowed use and usergroup permissions, the second through fifth are per new profile fields you create and users simply fill in the images URL into their Options via USERCP.

** You can add more tabs/slide "dots" with other content and you can even use codes for scripts and vB codes versus images to make this achieve more! *I've had an mp3 Player in one of the "tabs" see the demo, it's slide/tab #6

Screenshot is included of this working on a 4.0 Beta 3 Install.
*The tab script used within this modification currently only compatible with FF1+ IE5+ Opr7+
Per: http://www.dynamicdrive.com/dynamici...tabcontent.htm
However it should not present an issue in other browsers unless they have show placeholders or similar enabled for images in which case little red X's might appear so you can conditional code it if desired not to show, please PM me for the code and instructions.

*Full install instructions included in the zip, once unzipped please view Install.html also the demo has two of the five images reused but hover to see the description is accurate

Future Updates to include full instructions on how to utilize this signature postbit or postbit_legacy modification so it's not just images and that will include many ideas I have not had time to look into just yet!

Files have been updated and commented to include credit to all involved:

/***********************************************
* Tab Content script v2.2- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* June 23rd, 09 Code re-used by TheLastSuperman per Digital Jedi's mod marked as re-useable code, all credit remains that of Dynamic Drive and then for the original use in postbit, credits go to Digital Jedi. */
/* June 23rd, 09 File names and image names changed, folder location has changed as well, all was done so it would not interfer if you have DJ's mod installed as well, in my opinion each is like an add-on per say but DJ nailed this nice function a while back ;) S-MAN */

Updated August 23rd, 10 Cleaned up install.html instructions, renames some css and other misc changes.
Updated August 5th, 09 Spare </if> caught by Loco.M (Thanks )
Updated November 15th, 09 for vBulletin 4.0

TheLastSuperman
http://www.innovationbyinstinct.com

[ProFifaLeagues]

Thats Great Mike cheers!!!

[TheLastSuperman]

Update - Cleaned up the install.html file and tried to make details very simple. I expect to release a full product soon with option to enable/disable per forum basis and on/off in admincp and auto-template install... well 99.9% auto .

[Xencored]

Mike. Your demo is dead :X

Mike

[TheLastSuperman]

Originally Posted by Animemike

Mike. Your demo is dead :X

Mike

But the screenshot is still good ftw although it does not show the true functionality of this... DJ's demo get's the point across though.

FYI I used to be the main admin at that site, things went south in RL so I decided to code for a living.. I didn't have time for games or tournaments anymore and since I've been busy actually working they moved onto phpBB :erm:... even after getting a free Suite from me but so far it's going well, life is good and a full product for the signature showcase after the "Opening Soon" in my sig has passed .

I just posted that I was off to bed so now I must lol

- Mike

[EquinoxWorld]

Awesome mod , great work, although I can't get the buttons to show on any of them. I'm using FF and Chrome and neither show them. Also is there any way to make the page not "jump" when a user has this mod. Seems though it makes the page jump , when trying to make a post this can be REALLY annoying. Awesome work though, thank you for the addition.

EDITED:. To make the pages not jump I have added an additional CSS for class .tabcontent and placed a minimum-height so that after the first sig is displayed (if it has other additional lines apart from the sig) the page will not jump back . The buttons not showing is still an issue for us though : ( .

[TheLastSuperman]

Originally Posted by EquinoxWorld

Awesome mod , great work, although I can't get the buttons to show on any of them. I'm using FF and Chrome and neither show them. Also is there any way to make the page not "jump" when a user has this mod. Seems though it makes the page jump , when trying to make a post this can be REALLY annoying. Awesome work though, thank you for the addition.

EDITED:. To make the pages not jump I have added an additional CSS for class .tabcontent and placed a minimum-height so that after the first sig is displayed (if it has other additional lines apart from the sig) the page will not jump back . The buttons not showing is still an issue for us though : ( .

Sometimes you need to add a / in front of any image URL, it seems last night before releasing I forgot to add the code back in (I have my images in another directory so the url was wrong in the css but don't tell anyone ) to the correct url.. it was a late night err morning rather . I've cleaned up the code a bit more and changed the .tabcontent to .tabcontentss. Do me a favor, download the new .zip and overwrite all the old files then let me know if you have any issues.

[TheLastSuperman]

Originally Posted by EquinoxWorld

Also is there any way to make the page not "jump" when a user has this mod. Seems though it makes the page jump , when trying to make a post this can be REALLY annoying. Awesome work though, thank you for the addition.

EDITED:. To make the pages not jump I have added an additional CSS for class .tabcontent and placed a minimum-height so that after the first sig is displayed (if it has other additional lines apart from the sig) the page will not jump back . The buttons not showing is still an issue for us though : ( .

What did you add to the CSS a min/max-height or other? Also thanks for the catch on the images I mentioned that when sending out the update just now . *One thing to remember is... some will want the post to become shorter/longer with the different content that is shown, it shows interaction and you can quit clicking the "dots" for it to stop then simply click Edit or Reply etc. or some like you will not like that, I imagine it's not an issue in DJ's version for userinfo in the postbit_legacy because it's already so tall and you don't notice any extra space when switching between although all of this is simply a matter of preference.

[EquinoxWorld]

Originally Posted by TheLastSuperman

What did you add to the CSS a min/max-height or other? Also thanks for the catch on the images I mentioned that when sending out the update just now . *One thing to remember is... some will want the post to become shorter/longer with the different content that is shown, it shows interaction and you can quit clicking the "dots" for it to stop then simply click Edit or Reply etc. or some like you will not like that, I imagine it's not an issue in DJ's version for userinfo in the postbit_legacy because it's already so tall and you don't notice any extra space when switching between although all of this is simply a matter of preference.

Well for our case I added 650px for minimum-height and no max. My reasoning behind this is that because only the first sig will have those extra lines that user can edit through their profile , the other images are just images, so max height in this case is not needed. I added 650px because we allow our members to have about 15 lines on their sig (max amount of lines we allow for the highest usergroup), so one should see how many lines they allow or how many characters and adjust accordingly. I also did not add the max height because we have the sig slider as an option to buy in our shop , and one of our requisite before purchasing is that the additional images must be the same size, although this measure was because of the issue we were having with the pages jumping, this way I would only have to control the first sig with min-height and not worry about the rest because they would be smaller or the same size. This is not an issue with the other mod (DJ's) because there is no additional content aside from the one created , in this case one has to take in account what the user has added to their sigs. Another thing I tried was to have it to position:absolute; but this was causing the extra lines to overlap onto the next post if there was alot of lines added, although this did little to fixing the problem. The only additional CSS I have added is min-height: 650; and so far no jumping . Check it out here: http://www.aniworlds.net/forum/galle...h-edition.html

[EquinoxWorld]

Originally Posted by TheLastSuperman

Sometimes you need to add a / in front of any image URL, it seems last night before releasing I forgot to add the code back in (I have my images in another directory so the url was wrong in the css but don't tell anyone ) to the correct url.. it was a late night err morning rather . I've cleaned up the code a bit more and changed the .tabcontent to .tabcontentss. Do me a favor, download the new .zip and overwrite all the old files then let me know if you have any issues.

Will do : ) Thanks for the update TLS

[TheLastSuperman]

Originally Posted by EquinoxWorld

Well for our case I added 650px for minimum-height and no max. My reasoning behind this is that because only the first sig will have those extra lines that user can edit through their profile , the other images are just images, so max height in this case is not needed. I added 650px because we allow our members to have about 15 lines on their sig (max amount of lines we allow for the highest usergroup), so one should see how many lines they allow or how many characters and adjust accordingly. I also did not add the max height because we have the sig slider as an option to buy in our shop , and one of our requisite before purchasing is that the additional images must be the same size, although this measure was because of the issue we were having with the pages jumping, this way I would only have to control the first sig with min-height and not worry about the rest because they would be smaller or the same size. This is not an issue with the other mod (DJ's) because there is no additional content aside from the one created , in this case one has to take in account what the user has added to their sigs. Another thing I tried was to have it to position:absolute; but this was causing the extra lines to overlap onto the next post if there was alot of lines added, although this did little to fixing the problem. The only additional CSS I have added is min-height: 650; and so far no jumping . Check it out here: http://www.aniworlds.net/forum/galle...h-edition.html

Hmm then try this code:

		<!-- Postbit Slide by TheLastSuperman start -->
			<vb:if condition="$post['signature']">
			<blockquote class="signature restore">
<div align="center"><a class="musername" href="member.php?u={vb:raw post.userid}">{vb:raw post.username}</a>'s Signature Showcase
<br />
<div id="postbittabspost{vb:raw post.postid}" class="smanslide">
 <ul>
<li><span title="View Tab 1"><a href="#" rel="tab1post{vb:raw post.postid}" id="selectedpost{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5post{vb:raw post.postid}"> </a></span></li>
 </ul>
<br style="clear: center" />
</div>
<div class="smallfont">
 
<!-- SLIDE 1 CONTENT -->
<div id="tab1post{vb:raw post.postid}" class="tabcontentss">
<div class="info">				
<div class="signaturecontainer">
{vb:raw post.signature}
</div>
</div>
</div>
 
<!-- SLIDE 2 CONTENT -->
<div id="tab2post{vb:raw post.postid}" class="tabcontentss">
 <div class="info">				
<img border="0" src="{vb:raw post.field5}" border="0"/>
</div>
</div>
 
<!-- SLIDE 3 CONTENT -->
<div id="tab3post{vb:raw post.postid}" class="tabcontentss">
 <div class="info">
<img border="0" src="{vb:raw post.field6}" border="0"/>
</div>
</div>
 
<!-- SLIDE 4 CONTENT -->
<div id="tab4post{vb:raw post.postid}" class="tabcontentss">
<div class="info">
<img border="0" src="{vb:raw post.field7}" border="0"/>
</div>
</div>
 
<!-- SLIDE 5 CONTENT -->
<div id="tab5post{vb:raw post.postid}" class="tabcontentss">
<div class="info">
<img border="0" src="{vb:raw post.field8}" border="0"/>
</div>
</div>

</div>
 
<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabspost{vb:raw post.postid}")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>  
</div>
</blockquote>
<vb:else />
			<!-- No Signature so show all Tabs as showcase in case of purchase -->
			<blockquote class="signature restore">
<div align="center"><a class="musername" href="member.php?u={vb:raw post.userid}">{vb:raw post.username}</a>'s Signature Showcase
<br />
<div id="postbittabspost{vb:raw post.postid}" class="smanslide">
 <ul>
<li><span title="View Tab 1"><a href="#" rel="tab1post{vb:raw post.postid}" id="selectedpost{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 2"><a href="#" rel="tab2post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 3"><a href="#" rel="tab3post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 4"><a href="#" rel="tab4post{vb:raw post.postid}"> </a></span></li>
<li><span title="View Tab 5"><a href="#" rel="tab5post{vb:raw post.postid}"> </a></span></li>
 </ul>
<br style="clear: center" />
</div>
<div class="smallfont">
 
<!-- SLIDE 1 CONTENT -->
<div id="tab1post{vb:raw post.postid}" class="tabcontentss">
<div class="info">				
<img border="0" src="{vb:raw post.field???}" border="0"/>
</div>
</div>
 
<!-- SLIDE 2 CONTENT -->
<div id="tab2post{vb:raw post.postid}" class="tabcontentss">
 <div class="info">				
<img border="0" src="{vb:raw post.field5}" border="0"/>
</div>
</div>
 
<!-- SLIDE 3 CONTENT -->
<div id="tab3post{vb:raw post.postid}" class="tabcontentss">
 <div class="info">
<img border="0" src="{vb:raw post.field6}" border="0"/>
</div>
</div>
 
<!-- SLIDE 4 CONTENT -->
<div id="tab4post{vb:raw post.postid}" class="tabcontentss">
<div class="info">
<img border="0" src="{vb:raw post.field7}" border="0"/>
</div>
</div>
 
<!-- SLIDE 5 CONTENT -->
<div id="tab5post{vb:raw post.postid}" class="tabcontentss">
<div class="info">
<img border="0" src="{vb:raw post.field8}" border="0"/>
</div>
</div>

</div>
 
<script type="text/javascript">
var mytabs=new ddtabcontent("postbittabspost{vb:raw post.postid}")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()
</script>  
</div>
</blockquote>
			<!-- /No Signature so show all Tabs as showcase in case of purchase -->
			</vb:if>
            <!-- /Postbit Slide by TheLastSuperman end -->

So just in case they purchase before making a sig or if they simply don't have one it will show all tabs, be sure to replace the new profile field number labeled ??? in my code above with the new field number or you can relabel from the beginning with the appropriate id's too. Don't foget you can use fancy scripts inside a tab so if you wanted them to be able to show something else off simply add in the code to one of the tabs and now that script with it's content shows instead of an image .

Originally Posted by EquinoxWorld

Will do : ) Thanks for the update TLS

No problem