vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)
-   -   Miscellaneous Hacks - TeamSpeak viewer in slider (https://vborg.vbsupport.ru/showthread.php?t=312446)

Fields 06-25-2014 10:00 PM

TeamSpeak viewer in slider
 
1 Attachment(s)
Hello there,

First of all: Thanks to blind-eddie for testing it under vBulletin 3.8 and his feedback.

This modification is also available for vBulletin 4.x.x !

This is the first time I release a mod. I am not a pro in coding, but I hope you still like this.

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

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

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!

rockerzteam 07-04-2014 11:10 PM

Yes thanks a lot for this useful mod. For many of us who run a gaming community this comes in use a lot.

Blind-Eddie is a great person. He has helped me out a lot and I wouldn't ask for a better tester than him. Great work to the both of you.

rockerzteam 07-05-2014 02:26 AM

Edit: It works.

OUTL4W 08-08-2014 03:28 PM

how can I reduce the mouse click area that triggers the animation?

Fields 08-08-2014 03:42 PM

Quote:

Originally Posted by OUTL4W (Post 2510360)
how can I reduce the mouse click area that triggers the animation?

Unfortunately, this is not possible. I'm sorry.

OUTL4W 08-21-2014 04:42 PM

is there any way to disable if on mobile?...seems very easy to trigger by accident.

Fields 08-21-2014 05:43 PM

I got it working under vB4.2.2, but it seems like this can't be done with vB3.8, because the mod you need is only compatible with vB4.x. You can try it anyway.

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

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

Click save.

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

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

<vb:if condition="!$vboptions['isMobile']">
Under "<!-- /TS Slider -->" (at the very end of the slider code):
Code:

</vb:if>
Let me know if you got it :)

Trek 08-27-2014 10:46 PM

Cool mod, thanks for sharing it. I changed the colors up a bit and moved it over to the right side of the page as that worked better for my site design. But thanks again for sharing this!

Trek 08-27-2014 10:47 PM

Ohh yeah, one other thing, you have the same code duplicated three times. It's the code for the changeSlider1 function, that function and it's surrounding script tags.

Fields 08-28-2014 06:08 AM

Glad you like it dude :)

Thanks for your attention, I will change it asap!


All times are GMT. The time now is 09:23 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01154 seconds
  • Memory Usage 1,738KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (5)bbcode_code_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete