Miscellaneous Hacks - TeamSpeak viewer in slider

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:

<!-- /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 -->

4.) Make sure to replace the red-marked section with the HTML code from tsviewer.com.
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:

<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>

Please feel free to edit the image provided in the attachment, but don't forget to adjust the code above

#############################
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:

1.) Download the following mod, unzip, upload and install the files:
https://vborg.vbsupport.ru/showthread.php?t=292704

Credits go to BirdOPrey5

2.) Edit the plugin "Mobile Browser Check":
Add the following lines at the bottom:

if ($vbulletin->detect->isMobile())
  $vbulletin->options['isMobile'] = 1;

Click save.

3.) Open your headinclude_bottom template (where you put the code for the slider) and add this:

Above "<!-- /TS Slider -->" (at the very beginning of the slider code):

<vb:if condition="!$vboptions['isMobile']">

Under "<!-- /TS Slider -->" (at the very end of the slider code):

</vb:if>

#############################

If you like this mod:

• do not hesitate to make a donation HERE
• rate it!
• nominate as MOTM

And do not forget to mark as installed!

Thanks and have fun!

[Fields]

Originally Posted by eMike

Excellent work!
5 stars and MOTM nomination!

Thank you very much

[manoloz]

MOTM nomination for you.
Thank you!

[eMike]

Is it possible to have one on each side? For instance a Twitter slider on the left and a TS viewer on the right?

... and if yes, how would I go about modifying the code?

[Fields]

Unfortunately, I never got it working on the right side
You could maybe try to paste the slider code twice, in order to display two sliders one below the other on the left side.

[OUTL4W]

even after removing the javascript code you suggested...my dbtech sb is still stuck on loading...tried placing in headinclude_bottom and header...same results.

the 3.8 version works fine on my other forum when placed in the header template which doesn't conflict with the dbtech sb on that forum.

[Fields]

Originally Posted by OUTL4W

even after removing the javascript code you suggested...my dbtech sb is still stuck on loading...tried placing in headinclude_bottom and header...same results.

the 3.8 version works fine on my other forum when placed in the header template which doesn't conflict with the dbtech sb on that forum.

Could you please provide a link to the dbtech mod?

[OUTL4W]

Originally Posted by Fields

Could you please provide a link to the dbtech mod?

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

[Fields]

You could try to paste the slider code in your FORUMHOME template after <body> in order to see if it's working there.

[Keythacker]

any plans on updating this to work with the current vb 4.2.2? Would be awesome.

[Fields]

This works great with vB 4.2.2, check my site