JQuery noConflict - Multiple libraries.

helterskelter · 09-14-2012, 11:55 PM

Hey everyone,
I'm trying to put two different jquery applications into one website.
I'm using Lightbox for a photo gallery and i'm trying to implement soundcloud's stratus player.
I have read 50 different forums to try and find a solution but nothing is working for me. My photo gallery is working fine but the soundcloud player isn't showing up. When I remove the lightbox photo gallery, then the Soundcloud player shows up fine, and vice versa.

I have tried the noConflict code but that doesn't seem to be working either. The stratus.js file is a remote file which was the first problem. However I copied the code and pasted it into a new js page and saved it to my main site folder so I can edit the code.

If someone can help me out i'd appreciate it.

Here is the code I'm working with

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hellooperatormusic.com</title>
<style type="text/css">body {
background-color: #333;
}
</style>

<head>

<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />	
<link rel="stylesheet" type="text/css" href="js/lightbox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="js/index.css" />

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="js/stratus.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"> </script>

<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript"></script>

</head>

!-->Soundcloud player code<--!

<script type="text/javascript">
jq(document).ready(function(){
$.stratus({
links: 'http://soundcloud.com/foofighters/sets/wasting-light'
});
});
</script>

!-->stratus.js<--!

(function() {
var jq=$.noConflict();
$ = jQuery;
(function($){var g,d,j=1,a,b=this,f=!1,h="postMessage",e="addEventListener",c,i=b[h]&&!$.browser.opera;$[h]=function(k,l,m){if(!l){return}k=typeof k==="string"?k:$.param(k);m=m||parent;if(i){m[h](k,l.replace(/([^:]+:\/\/[^\/]+).*/,"$1"))}else{if(l){m.location=l.replace(/#.*$/,"")+"#"+(+new Date)+(j++)+"&"+k}}};$.receiveMessage=c=function(l,m,k){if(i){if(l){a&&c();a=function(n){if((typeof m==="string"&&n.origin!==m)||($.isFunction(m)&&m(n.origin)===f)){return f}l(n)}}if(b[e]){b[l?e:"removeEventListener"]("message",a,f)}else{b[l?"attachEvent":"detachEvent"]("onmessage",a)}}else{g&&clearInterval(g);g=null;if(l){k=typeof m==="number"?m:typeof k==="number"?k:100;g=setInterval(function(){var o=document.location.hash,n=/^#?\d+&/;if(o!==d&&n.test(o)){d=o;l({data.replace(n,"")})}},k)}}}})(jQuery);;
$.fn.stratus = function(settings) {
return $.stratus(settings);
};
$.stratus = function(settings) {
var root_url, src;
root_url = settings.env === 'development' ? 'http://example.com:3000' : 'http://stratus.sc';
$('head').append("<link rel='stylesheet' href='" + root_url + "/stratus.css' type='text/css'/>");
if (settings.align === 'top') {
$('head').append("<style>#stratus{ top: 0; }</style>");
}
if (settings.position === 'absolute') {
$('head').append("<style>#stratus{ position: absolute; }</style>");
}
if (settings.offset) {
$('head').append("<style>#stratus{ " + settings.align + ": " + settings.offset + "px !important; }</style>");
}
$('body').append("<div id='stratus'><iframe allowtransparency='true' frameborder='0' scrolling='0'></div>");
src = root_url + '/player?' + $.param(settings, true) + '&link=' + encodeURIComponent(document.location.href);
$('#stratus iframe').attr({
src: src
});
$('#stratus iframe').load(function() {
return $(this).css({
visibility: 'visible'
});
});
$('#stratus').show();
$('a.stratus').click(function() {
$.postMessage($(this).attr('href'), src, $('#stratus iframe')[0].contentWindow);
return false;
});
return $.receiveMessage(function(e) {
return $('#stratus').toggleClass('open');
}, root_url);
};
}).call(this);

Philip M · 09-15-2012, 08:29 AM

See:- http://www.codingforums.com/showthread.php?t=17515.

You will not get any reply in this forum which is intended to be used only to
post a completed (working) script for showcasing/benefit of others.

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar.

VIPStephan · 09-15-2012, 07:37 PM

First of all: With JavaScript, order matters. If a variable is defined only after a function is executed that relies on this variable, the function will not work because it doesn’t know the variable yet. The same goes for plugins that rely on a JS framework. The core framework needs to be the first thing and any plugins/extensions/dependencies have to come after that in the code, otherwise the plugins/extensions/dependencies don’t know what to do.

Look at your code again. Do you see this?

Code:

<script type="text/javascript" src="js/stratus.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"> </script>

The order is wrong, jQuery needs to come first:

Code:

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/stratus.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

Secondly, what’s this?

Code:

!-->Soundcloud player code<--!

…

!-->stratus.js<--!

Did you get that from SoundCloud or did you make that up yourself?
You can’t just write random stuff in your HTML code, proper HTML comments look like this: . Like that and nothing else.

Lastly: jQuery’s noconflict function should only be the very, very, very last resort and should only be used if you know what you’re doing (well, that goes for coding in general). Don’t just put it in and think it will immediately solve your problems. Again, order matters. But I’m not gonna explain the proper use of noconflict to you right now because you don’t need it anyway. If you still wanna know then RTFM.

What does the SoundCloud documentation tell you about including the player code? What you posted here looks messy and is kinda unclear.