Great work on this module. I use it on pretty much every site I create.

I noticed when the ColorBox is open the browser window can still be scrolled causing the ColorBox to go off screen. If the ColorBox itself is scrollable then it can create confusion if the users attempts to scroll with mouse wheel etc and the pointer is not over the box. There is a very simple fix that can be applied to colorbox.js:

(function ($) {

Drupal.behaviors.initColorbox = function (context) {
  if (!$.isFunction($.colorbox)) {
    return;
  }
  $('a, area, input', context)
    .filter('.colorbox:not(.initColorbox-processed)')
    .addClass('initColorbox-processed')
    .colorbox(Drupal.settings.colorbox);
};

{
  $(document).bind('cbox_complete', function () {
    Drupal.attachBehaviors('#cboxLoadedContent');
  });
}

// Stop browser scrolling
{
  $(document).bind('cbox_open', function(){ 
      $('body').css({overflow:'hidden'}); 
  }).bind('cbox_closed', function(){ 
      $('body').css({overflow:'auto'}); 
  });
}
// Stop browser scrolling

})(jQuery);

Tested in Chrome + FF + IE, using Image, login, and modal boxes. Code could be combined with first $(document).bind but displayed like this for clarity of code change.

CommentFileSizeAuthor
#8 1311852-disable_browser_scroll.patch1.98 KBgaborpeter

Comments

arisaves’s picture

arisaves commented

Thanks for sharing -- could come in handy for pretty much any site. This also provides a little bit of insight as to how I can bind events/use listeners with Colorbox -- I will experiment a little bit more.

frjo’s picture

frjo commented
Status: Needs review » Closed (fixed)

Fixed in at least the D7 version I believe.

SiGarb’s picture

SiGarb commented
Category: feature » support
Status: Closed (fixed) » Active

Hi, I'm very new here and this is my first query. I hope this is the right place to ask? I've got what sounds like this same problem on a non-Drupal site that I attempt to maintain for a folk band, that was designed by a web design company who are no longer maintaining it. It uses ColorBox v.1.3.17.1. I'm not a programmer, and I use Fetch to access the pages and chip away at the css, html and php to make changes by trial and error! I tried adding this code into the jquery.colorbox.js file (at the top of the Helper functions section - is that the right place?) but without success: clicking on a pic just opened it in another window. Is there a simple fix that I can use to keep the colorbox window centre screen, or at a fixed distance from the top? Many thanks.

tinker’s picture

tinker commented

@SiGarb, The fix provided above is for the Drupal implementation of Colorbox. The code on your site will be different and I cannot tell you where to put it without looking at your code. You should probably find a programmer to make the change for you.

miccelito’s picture

miccelito commented

@tinker:
Your suggested code to add

// Stop browser scrolling
{
  $(document).bind('cbox_open', function(){
      $('body').css({overflow:'hidden'});
  }).bind('cbox_closed', function(){
      $('body').css({overflow:'auto'});
  });
}
// Stop browser scrolling

Could we - instead of doing the css directly in the code - add/remove class (ie '.cbox-open') to/from body tag? And tho we could do the overflow:hidden and more needed depending on browser in our themed css ?

// Stop browser scrolling
{
  $(document).bind('cbox_open', function(){
      $('body').addClass('cbox-open');
  }).bind('cbox_closed', function(){
      $('body').removeClass('cbox-open');
  });
}
// Stop browser scrolling
body.cbox-open {
    overflow-y: hidden;
}

or

body.cbox-open {
    position:fixed;
    overflow-y:scroll;
    width:100%;
}

@frjo:

Fixed in at least the D7 version I believe.

Doesn't seem to be fixed yet in any of the D7 versions.

frjo’s picture

frjo commented
Issue summary: View changes
Status: Active » Closed (fixed)

Closing old D6 issues.

thomas1977’s picture

thomas1977 commented

Actually, I don't want to reopen this issue - however, I just wanted to say THANKS @tinker for the code suggestion. Works perfectly!

gaborpeter’s picture

gaborpeter commented
StatusFileSize
new 1311852-disable_browser_scroll.patch1.98 KB

I've created a patch based on 7.x-2.12