Why doesnt my JavaScript run? I'm trying to change the background color of a Colorbox (in which nodes are presented) based on the clicked node. See https://stackoverflow.com/questions/18173943/change-background-color-of-colorbox-using-js-based-on-node-id?noredirect=1#comment26626591_18173943

This doesn't work, although I've confirmed it working for others, and on Fiddle: http://jsfiddle.net/nevster/YSgMx/

Why doesn't this work?

The site is built on latest Zen and I've added the JavaScript code in the script.js file (inside the function that says I should put it there) and added the file in the theme .info file.

JavaScript:

$(document).ready(function () {
$(".colorbox-color").colorbox({
    onComplete: function(){
        var bg = $.colorbox.element().data('bg');
        $('#cboxWrapper').css('backgroundColor', bg);
        $('#cboxLoadedContent').css('backgroundColor', bg);
    }
});
});


I'm using Drupal 7 with Views to show the nodes, together with Colorbox and Colorbox Node.
You shouldn't include the ready function, the latest Zen wraps your script in a custom behavior.  Try putting your code directly inside the custom behavior that is already included in the script.js file.

(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {

    $(".colorbox-color").colorbox({
      onComplete: function(){
        var bg = $.colorbox.element().data('bg');
        $('#cboxWrapper').css('backgroundColor', bg);
        $('#cboxLoadedContent').css('backgroundColor', bg);
      }
    });

  }
};

})(jQuery, Drupal, this, this.document);