Why doesnt my JavaScript run?

Question

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.

Answer 1

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);

Answer 2

Instead of changing the background color on the onComplete event, try to add it on the onOpen event. Maybe the onComplete is never called because of a load error ...

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

Answer 3

Its unclear in your post how you are rendering the images (ie, views, display suite, etc.) so I'll give a generic (static) example for a html page or block. Also, I'll assume you're using the colorbox module to supply the library to Drupal.

1. Using your JSFiddle example (http://jsfiddle.net/UFtrK/112/), I made a basic page with Full HTML as the text format. The only thing that differs is the classes. For example:

<a class="colorbox-color colorbox inline" data-bg="#ccf" href="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" title="On the Ohoopee as an adult"><img src="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg"/></a>

2. In scripts.js I added the following code in between

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

and

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

Drupal.behaviors.cbox = {
      attach: function (context, settings) {
        $(".colorbox-color").colorbox( {
          rel:'colorbox-color',
          onComplete: function(){
            var bg = $.colorbox.element().data('bg');
            $('#cboxWrapper').css('backgroundColor', bg);
            $('#cboxLoadedContent').css('backgroundColor', bg);
          }
        });  
      }
};

3. Go to admin/config/media/colorbox and make sure that "Enable Colorbox inline" is selected.

4. Clear your cache and give it a try!

Answer 4

Have you tried using context?

$('#cboxWrapper', context).css('backgroundColor', bg);

It makes sure your CSS is ran with the new markup.

Did you check that your selector actually works?

console.log($('#cboxWrapper')); // Then check your console