Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery noConflict - Multiple libraries.

    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);
    Last edited by VIPStephan; 09-15-2012 at 07:16 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    See:- *** WARNING: Questions posted here will be deleted! ***.

    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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: <!-- (text here) -->. 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •