Multiple Jquery scripts on same page conflict - javascript

Ok, I have seen a couple of questions on this topic - I have an html5 page and I am trying to apply a music stream player but the jquery script is conflicting with another jquery script.
My code is below, I have tried the no conflict method but to no avail I might be applying it wrong. This is just the script portion of my code I have video gallery playing also; the gallery plays fine but the player shows but doesn't play at all. Everytime I load the page I get a message stating : Adobe Flash Player security null is trying to connect with an internet based location which is webservinghosting.ca (the site I'm streaming the station from).
<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.6/jquery.min.js"></script>
<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jq_1_6 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.forms').dcSlickForms();
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 900,
content_height: 400,
auto: true,
interval: 3000,
continuous: false,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: false,
transition: 'fade', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onload' /* onload/onhover/show */
});
});
</script>
<link type="text/css" href="http://www.websavershosting.ca/jplayer/skin/jplayer.websavers.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.websavershosting.ca/jplayer/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://fennel.websavers.ca:2199/system/streaminfo.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div id="jp-album-art">
<img id="cc_strinfo_trackimageurl_wlezfm" class="cc_streaminfo" />
</div>
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>mute</li>
<li>unmute</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-title"><span id="cc_strinfo_summary_wlezfm" class="cc_streaminfo">Loading Track ...</span></div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#jquery_jplayer_1").jPlayer({
ready: function () {
jQuery(this).jPlayer("setMedia", {
mp3: "http://209.172.54.130:9025/;stream/1"
});
},
swfPath: "http://www.websavershosting.ca/jplayer/Jplayer.swf",
supplied: "mp3",
solution: navigator.userAgent.indexOf("Trident/6")>-1 ? "flash" : "html,flash"
});
});
</script>

You are using jQuery file twice causing issues.
try removing last one:
<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
if you need to use multiple files on same page.
<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script> $113 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
Now to access version 1.1.3 you need to use $113 like
$113('.element').val();
while $ for version 1.6.2.

Try this:
if you have more jquery scripts:
<script src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var first= $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</script>

Related

Before/After Plugin [javascript/jquery] does not load correctly after auto size adjustment

First of all: It's my first time using javascript.
I wanted to implement the Before/After Plugin into Powerpoint. So I created a html file that I loaded with a webbrowser object in Powerpoint. That worked basically but the plugin requires me to define the height and width statically for the pictures I use:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container">
<div><img alt="before" src="pics1/before.jpg" width="3696" height="1583" /></div>
<div><img alt="after" src="pics1/after.jpg" width="3696" height="1583" /></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
</script>
</body>
</html>
So I wanted to implement the function that the size is statically defined but determined once in the beginning by the size of the screen. After experimenting a bit I found a solution that works partly:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
/* <![CDATA[ */
var wi=screen.availWidth-20;
var img1=document.createElement("img");
img1.alt="before";
img1.src="pics1/before.jpg";
img1.height=wi*img1.height/img1.width;
img1.width=wi;
document.getElementById("container").appendChild(img1);
var img2=document.createElement("img");
img2.alt="after";
img2.src="pics1/after.jpg";
img2.height=wi*img2.height/img2.width;
img2.width=wi;
document.getElementById("container").appendChild(img2);
/* ]]> */
</script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
/* ]]> */
</script>
</body>
</html>
The problem now is/are following:
Firefox: Does not load the pictures at the first time but after refreshing it works perfectly.
IExplorer: It does not show anything.
Chrome: It does not show aynthing.
Powerpoint WebBrowser: It does not show aynthing.
I already tried to fix by the "$(document).ready(function() {..." part but it does not help at all.
What's wrong here?

Jquery conflicting using 2 libraries and same function

I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>

CSS menu is not working properly if i place my Image slide show

I just tired to fix it that is when i place my Image Slide show then footer menu is not working properly. But if i remove a javascript code then Image Slide Show is not working.
A javascript code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0
/jquery.min.js"></script>
Total Javascript code for the page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0
/jquery.min.js"></script> <!--if i remove this code then footer menu is working-->
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>
My site link:
http://creativeartbd.com/BCSA/
You're usng both mootools and jquery, they both use '$'. So you'll need to use jquery noconflict. Change your code to something along these line:
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0
/jquery.min.js"></script> <!--if i remove this code then footer menu is working-->
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j( document ).ready(function() {
$j('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>

jQuery 1.10.2 and jQuery UI 1.10.3

I downloaded jQuery UI 1.10.3.
And it comes with an older version of jQuery which is 1.9.1.
And I have a later version of jQuery: 1.10.2.
But jQuery UI seems does not like to work with 1.10.2...
Is there anyway to make it works?
Or I should just live with it..
<script src="js/jquery-1.9.1.js"></script>
<!--
<script src="jquery-1.10.2.min.js">
-->
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
<script src = song_Selector.js>
</script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
Codes are above, without the <html> tag.
When you are loading the script, you've forgotten the end tags, and you've also forgotten your <head> tags if this is the whole document:
<!-- <script src="js/jquery-1.9.1.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src = song_Selector.js></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
What happened was actually the following when you uncommented jQuery 1.10.2:
<script src="jquery-1.10.2.min.js">
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
As any text inside a <script> tag is ignored with an src attribute set and will not be parsed, this will not be loaded.
Before, it would have worked fine as it would have simply been the following:
<script src="js/jquery-ui-1.10.3.custom.js">
</script>
</script>
... with the text inside the tag being ignored, as there is a src attribute (with this having no effect).
you can this by function load script
function loadscript(url){
var doc = document.getelementbytagname("head");
var script = document.createlement("script") ;
script.url = script
}

How to make Zurb Joyride run _once_ for each user [duplicate]

I'm using Foundation Joyride and every time I load the webpage the tour starts, but how do I only start the tour for the first time the webpage is loaded?
My settings are ...
$(window).load(function() {
//Foundation Joyride (Tour)
$("#tour").joyride({
'cookieMonster': true,
'cookieName': 'JoyRide',
'cookieDomain': 'mydomain.co.uk/',
'postRideCallback' : function () {
$(this).joyride('destroy');
},
cookieMonster: false
});
});
Got it working at last and it turned out to be the order in which the header files were declared.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="foundation.css">
<script type="text/javascript" src="foundation.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.foundation.joyride.js"></script>
<script>
$(window).load(function() {
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide'
});
});
</script>
</head>
<body>
<ol id="tour">
<li><p>This is the tour.</p></li>
</ol>
</body>
</html>
You have to use the cookieMonster option se to true, with your domain or false in cookieDomain.
Also remove the cookieMonster: false outside of the parenthesis.
To let joyride use cookies you must include the jQuery.cookie library in your page (https://github.com/carhartl/jquery-cookie)
Here is a sample:
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide',
cookieDomain: false
});
In this way you'll see the tour only the first time you visit the page (or when you clear the cookies).

Categories

Resources