Javascripts blocking each other

[GPOClan]

Hello,

I have two Javascripts running on my Forum and they are blocking each other, so I am not able to run both at the same time.

1.) The first script is a notification box:

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

The first code is in headinclude template at the bottom:

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
    <script type="text/javascript" src="jscripts/tw7s_notifications/jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="jscripts/tw7s_notifications/jquery.jgrowl.js"></script> 
    <link href="jscripts/tw7s_notifications/jquery.jgrowl.css" rel="stylesheet" type="text/css"/>
<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) -->

The second code is in the navbar template (it should be in the header template, but it only works with my style when it is in the navbar template):

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
<vb:if condition="$notifications_total">
<script type="text/javascript">

$.jGrowl('{vb:raw notifications_menubits} <br />You must view your notification(s) before this box will disappear.' , { sticky: true, header : 'New Notification(s)' } );

</script>
</vb:if>

<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) -->

2.) The second script is a teamspeak slider:

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

The code is in headinclude_bottom template 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:2pt;width:253px;height:620px;overflow:auto;color:white";>TeamSpeak</div>
<div style="position:absolute;top:31pt;right:73pt;width:253px;height:620px;overflow:auto";><div id="ts3viewer_1023542" style="width:; background-color:;"> </div>

<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1023542&text=ffffff&text_size=10&text_family=1&js=1&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=#bbbbfc&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=small-caps&text_s_decoration_h=none&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=#bbbbfc&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=000000&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=#bbbbfc&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=small-caps&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1023542, 100);
-->
</script><hr></hr>
<div id="ts3viewer_1046233" style="width:; background-color:;"> </div>

<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1046233&text=ffffff&text_size=10&text_family=1&js=1&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=#bbbbfc&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=small-caps&text_s_decoration_h=none&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=#bbbbfc&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=000000&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=#bbbbfc&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=small-caps&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1046233, 100);
-->
</script>
</div>
</div>
<script type="text/javascript">
var state = 0;
var wait = false;

function changeSlider1()
{
if(state==1){
$('#ts_slider1').animate({width: 308 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slider1').animate({width: 510 }, "slow", function(){state = 1;}
);
}

$('#ts_slider1').click(function(){
changeSlider1();
});
</script> </div>
</div>
<script type="text/javascript">
var state = 0;
var wait = false;

function changeSlider1()
{
if(state==1){
$('#ts_slider1').animate({width: 308 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slider1').animate({width: 510 }, "slow", function(){state = 1;}
);
}

$('#ts_slider1').click(function(){
changeSlider1();
});
</script> </div>

</div>
</div>

<script type="text/javascript">

var state = 0;
var wait = false;

function changeSlider1()
{
if(state==1){
$('#ts_slider1').animate({width: 307 }, "slow", function(){state =
0;}
);
}
else
$('#ts_slider1').animate({width: 573 }, "slow", function(){state =
1;}
);
}

$('#ts_slider1').click(function(){
changeSlider1();
});
</script> </div>
<!-- /TS Slider -->

I neither got any support yet, nor I found any solution for this problem, so I hope there is a coder that can help me

Best regards

[kh99]

Have you checked the browser javascript console to see if there are any errors?

[tbworld]

Yep, without a link, it's too difficult to assist, but @kh99, as always, has pointed you in the right direction.

[Zachery]

Why are you reincluding jquery a second time?

[GPOClan]

Originally Posted by kh99

Have you checked the browser javascript console to see if there are any errors?

The only error I can find is this:

TypeError: $.jGrowl is not a function

Originally Posted by Zachery

Why are you reincluding jquery a second time?

Is this the problem? I don't know how to fix that :/

[Dave]

You can just remove the second included jQuery of the Teamspeak slider.

[Zachery]

Actually, I'd use the latest jquery over the old 1.4, that is like ancient

[GPOClan]

Guys, thank you very much! I removed the jQuery form the teamspeak slider and both mods are working fine, now!

Thanks for your great support!

[Dave]

Originally Posted by GPOClan

Guys, thank you very much! I removed the jQuery form the teamspeak slider and both mods are working fine, now!

Thanks for your great support!

No problem, but don't forget to take a look at Zachery's post as well.