Stratus 2, jQuery and Adobe Muse

Question

I am having trouble with the "Stratus 2" web-player on my website. I have downloaded and put "Jquery" into the public folder. It is named jquery.js

I have then attached the following code right before the end body tag.

<html class="html">
<head>

<script type="text/javascript">
   if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.scrolleffects.js", "jquery.musepolyfill.bgsize.js", "jquery.watch.js", "webpro.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "index.css"], "outOfDate":[]};
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $.stratus({
      download: false,
      align: 'top',
      user:false,
      color:'E8C58B',
      links: 'https://soundcloud.com/man-in-a-loft-downtown/sets/the-latest'
    });
  });
</script>

I have also tried entering the code in the head tags too. The player doesn't show. Any thoughts?

I'm getting this error on the console

$.stratus is not a function

But I see that the stratus.js file did load.

FULL HEAD CODE: http://shrib.com/aA2V6JqX

Please take a look and edit accordingly.

Literally nothing happens, I cannot see the player at the bottom of the window. Take a look: www.iagomusic.com — Rupert Stamp, Aug 14 '14 at 12:46
Check your console to see if your JavaScript files are getting loaded https://developer.chrome.com/devtools/docs/network — Ruan Mendes, Aug 14 '14 at 12:47
I am new to website development. Please could you explain the error in more of an "Idiots Guide"? — Rupert Stamp, Aug 14 '14 at 12:51
It appears this plugin only works with jquery 1.7.2. I love to take the credit but see http://stackoverflow.com/questions/21508936/soundcloud-stratus-player-wont-work I have tried it myself in fiddle and it indeed works with jquery 1.7.2. A simple googling of "stratus 2 not working" would of given you the answer you need — Huangism, Aug 14 '14 at 12:55
@Huangism To the quick fingers closing this question. There was an error on the page because of a jQuery conflict, the OP was loading two different versions. Reopen it. — Ruan Mendes, Aug 14 '14 at 15:46

Ruan Mendes · Accepted Answer · 2014-08-14T15:45:24.723

I'm listening to your music player right now after mucking around in your site, sounds nice!

You are loading two different versions of jQuery.

// version 1.8.3
window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.scrolleffects.js", "jquery.musepolyfill.bgsize.js", "jquery.watch.js", "webpro.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "index.css"], "outOfDate":[]};

And 1.7.2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

If you examine the generated HTML, you'll see that Muse is loading jQuery after your stratus plugin is loaded, therefore overwriting it.

A bad, but working solution is to wait until jQuery that Muse loads is loaded, but I don't know of an easy way to detect that, so you can just give it a busy wait. Remove your line that loads 1.7.2 and change your initialization script to

function checkjQuery() {
    if (window.jQuery) {
      $.getScript( "http://stratus.sc/stratus.js", function() {
        $.stratus({
          download: false,
          align: 'top',
          user:false,
          color:'E8C58B',
          links: 'https://soundcloud.com/man-in-a-loft-downtown/sets/the-latest'
        });
      });
    } else {
      setTimeout(checkjQuery, 10);
    }
}
checkjQuery();

Shijin TR · Answer 2 · 2014-08-14T13:11:23.487

1

Upgrade your jQuery version to 1.7 or more,And change $('body').stratus( insted of $.stratus(

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('body').stratus({
  links: 'https://soundcloud.com/iagoofficial/iago-hold-back'
 });
});
</script>
</head>
<body>
</body>
</html>

edited Aug 14 '14 at 13:11

answered Aug 14 '14 at 13:05

Shijin TR

7,516
10
55
122

They are already using 1.7.2, see my answer (and the website they linked to – Ruan Mendes Aug 14 '14 at 13:06
@Shin This code doesn't load Muse, that's why it works for you – Ruan Mendes Aug 14 '14 at 13:23

Stratus 2, jQuery and Adobe Muse

2 Answers2