jQuery Skills Diagram with Raphaël not working if two other custom jscripts are also running

Question

I have the following scripts called on a site:

<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/scripts.js"></script>
<script defer src="js/jquery.flexslider-min.js" ></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js" ></script>
<script src="js/modernizr.html"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.gmap.js"></script>
<script src="js/skrollr.min.js"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

raphael.js and init.js set up a Skills Diagram (as found here). The issue is that the diagram doesn't work unless I disable both scripts.js and main.js (which are custom scripts and I'm including them in the 'NOT WORKING' Fiddle).

If I place raphael.js and init.js above the other two, then the Diagram is partially built. So evidently the other two scripts, together (because if I omit one or the other nothing changes), are causing something to not happen or happen incorrectly in one or the other of the two scripts, raphael.js and init.js.

I've been trying to find what exactly occurs in both scripts.js and main.js that could be causing either raphael.js or init.js to fail. Maybe someone out there can figure it out, because it's a mystery to me.

WORKING: In this Fiddle, the normal diagram, without those problematic scripts, is working fine.

NOT WORKING: In this Fiddle, I'm including the script.js and main.js scripts and, voilá, the diagram no longer works: it disappears!

score 0 · Accepted Answer · answered Jun 18 '13 at 18:47

OK! Found the answer! YAY!

Well, I know how to fix it, but am not sure WHY it was broken in the first place. Though I suppose one of the scripts I'm including is setting things so that jQuery functions can't be just introduced by $(...)... but, rather, need to be inside jQuery.noConflict()(function($){ ... }. So, for what it's worth, I had to wrap these pieces of code in the init.js with the above call:

jQuery.noConflict()(function ($) {
  $('.get').find('.arc').each(function (i) {
    var t = $(this),
      color = t.find('.color').val(),
      value = t.find('.percent').val(),
      text = t.find('.text').text();

    rad += 30;
    var z = r.path().attr({
      arc: [value, color, rad],
      'stroke-width': 26
    });

    z.mouseover(function () {
      this.animate({
        'stroke-width': 50,
        opacity: .75
      }, 1000, 'elastic');
      if (Raphael.type != 'VML') //solves IE problem
        this.toFront();
      title.stop().animate({
        opacity: 0
      }, speed, '>', function () {
        this.attr({
          text: text + '\n' + value + '%'
        }).animate({
          opacity: 1
        }, speed, '<');
      });
    }).mouseout(function () {
      this.stop().animate({
        'stroke-width': 26,
        opacity: 1
      }, speed * 4, 'elastic');
      title.stop().animate({
        opacity: 0
      }, speed, '>', function () {
        title.attr({
          text: defaultText
        }).animate({
          opacity: 1
        }, speed, '<');
      });
    });
  });
});

AND

jQuery.noConflict()(function($){
  $(function(){ o.init(); });
});

If anyone out there know how to explain the WHY, then your welcome to add to this answer and educate us further!

jQuery Skills Diagram with Raphaël not working if two other custom jscripts are also running

1 Answers1