The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
TeamSpeak viewer in slider Details »» | ||||||||||||||||||||||||||||
Hello there,
this is the first time I release a mod. I am not a pro in coding, but I hope you still like this. This modification is also available for vBulletin 3.8.x ! What is it? With this template modification, you can show your TeamSpeak viewer in a sliding box which is displayed on all pages of your vBulletin. What do I need? You should have your TS server registered at www.tsviewer.com. If not, you can do this here. What you need is the HTML code of your server viewer. You can customize and copy the code, when you click the tab "Code Generator". Installation 1.) Download and unzip the file that is attached. 2.) Upload the content of the "UPLOAD" folder to your root directory. 3.) Open headinclude_bottom template and paste the following code at the bottom: Code:
<!-- /TS Slider --> <script src="http://code.jquery.com/jquery-latest.js"></script> <div> <div id="ts_slider1" class="ts_slider1" style="left: -219px; width: 300px; position: fixed; top: 100px; background: url(/images/slider/ts_slider.png) repeat scroll 100% 0% transparent; height: 691px; z-index: 999;"> <div style="position: absolute; top: 14pt; right: 65pt; width: 253px; height: 620px; overflow: auto; color: white">TeamSpeak slider coded by <a href="http://tactical-riot-gaming.de">[TRG]Fields</a></div> <div style="position: absolute; top: 31pt; right: 73pt; width: 253px; height: 620px; overflow: auto"> *HTML code of your TS viewer goes here* </div> </div> <script type="text/javascript"> var state = 0; var wait = false; function changeSlider1() { if(state==1){ $('#ts_slider1').animate({width: 300 }, "slow", function(){state = 0;} ); } else $('#ts_slider1').animate({width: 573 }, "slow", function(){state = 1;} ); } $('#ts_slider1').click(function(){ changeSlider1(); }); </script> </div> <!-- /TS Slider --> 5.) Click "Save" and here you go! >>> Live Demo You are allowed to delete the "coded by" sentence, but I would appreciate it when you leave it as it is. To remove it, just delete this line from the code above: Code:
<div style="position: absolute; top: 14pt; right: 65pt; width: 253px; height: 620px; overflow: auto; color: white">TeamSpeak slider coded by <a href="http://tactical-riot-gaming.de">[TRG]Fields</a></div> ############################# F.A.Q. Q. The slider is blocking other modifications using jscripts. A. Simply remove <script src="http://code.jquery.com/jquery-latest.js"></script> at the beginning of the code. Q. Is it possible to disable the slider for mobile devices? A. Yes, just follow these steps: Quote:
If you like this mod:
And do not forget to mark as installed! Thanks and have fun! Download Now
Show Your Support
|
Comments |
#12
|
||||
|
||||
Very nice, Thank you for sharing.
For those reading this that use 3.8, yes this will work on 3.8. Just add the above code to the header template. http://blind-eddie.com/forum |
#13
|
|||
|
|||
Quote:
EDIT: Did you paste the code at the bottom of the header template? |
#14
|
||||
|
||||
Yes, at the bottom.
I have a how to join ts page that, the viewer on that page will not show with the slider also on that page. I used THIS SCRIPT conditional to not show it on that page. I will add your site link back into the slider as soon as I make a new slider image. |
#15
|
||||
|
||||
It's just so easy to make it match your forumstyle. Just 2 more pics for you.
|
2 благодарности(ей) от: | ||
blind-eddie, K4GAP |
#16
|
|||
|
|||
I'm thinking this might also work with such things such as Twitter and Facebook. By replacing the Teamspeak code with that of such and, changing the graphic.
Any ideas on this? CONFIRMED: Replace Teamspeak code with Twitter code and alter graphic to reflect such. Here is how it looks. The only problem is, there are two scroll bars showing. I'm sure someone can tell us how to get rid of one of them. I have attached the new image I made for the Twitter version. Feel free to use it if you wish. Note: Be sure to rename the image in the code if you use this one. I named it "twitter_slider.png". The name is not important so long as you reflect that in the code. |
3 благодарности(ей) от: | ||
blind-eddie, Fields, unit12stealth |
#17
|
|||
|
|||
Looks brilliant!
Search in the code for "overflow:auto" and change it to "overflow:hidden", this is how you should get rid of the the scrollbars. |
#18
|
|||
|
|||
That did it, thanks.
|
#20
|
|||
|
|||
Glad you like it, man
|
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|