Hello everyone,

I had a project that required this block to be region-specific rather than apply to the entire page. I have done some significant revisions to the module and rolled them up as a patch.

With this patch, you will need to re-save your settings on the Floating Block configuration page, but you will now have the added bonus of being able to specify a container DIV that everything will float within. When the block reaches the bottom of the DIV, it will stop moving.

To put a block into a div, use this format:

#block-block-1|#main

... assuming that you want Drupal's first block to float within a container in your theme called #main. I've noted that this module seems to prefer working with ID tags (#) more than classes (.) for you noobs out there, this tip might come in handy.

This development was sponsored by TP1 Drupal development in Montréal.

I have also included an install file (which did not get into the patch - git weirdness) so if you are the author of this module I recommend adding it! If you are a site builder applying the above patch, just ignore it. The install file will prompt site builders to re-save their settings to gain the new functionality. If you're reading this you've already been warned!

CommentFileSizeAuthor
floating_block.install.txt276 bytesAnonymous (not verified)
floating_block-11.patch6.72 KBAnonymous (not verified)

Comments

sibany’s picture

Version: 7.x-1.x-dev » 6.x-1.x-dev

great work Ryan Weal! :D

Testing....

Sincerely yours ,
M.sibany

sibany’s picture

Hey, Ryan Weal!

i did the patch
i follow the instructions..

i got error Parse error: syntax error, unexpected T_DOUBLE_ARROW in /home/........../public_html/sites/default/modules/floating_block/floating_block.module on line 43

ok what am doing wrong!!

i looked in the module file on line 43

and i looked on the old file module

  $form = array();
  $form['floating_block_to_apply'] = array(

was missing i past it and no error... but still no floating block

idid add #block-ad-12|#main and saved

in blocks i saved the block

run a cron

flashed all catch

heres the code files

the floating_block.js file

// $Id: floating_block.js,v 1.1.2.2 2011/01/06 17:09:26 alexpott Exp $

/**
 * Provides the ability to fix a html block to a position on the page when the 
 * browser is scroled.
 *
 * This code is based on tableheader.js
 */

// Keep track of all floating blocks.
var floating_blocks = [];

Drupal.blockFloatDoScroll = function () {
  if (typeof(Drupal.blockFloatOnScroll) == 'function') {
    Drupal.blockFloatOnScroll();
  }
};

/**
 * Attaches the floating_block behavior.
 */
Drupal.behaviors.blockFloat = {
     if (jQuery.isFunction(context.parent)) {
       context = context.parent();
       doResize = false;
   }  
    $(Drupal.settings.floating_block).each(function (i, selector) {
    $(selector.toString() + ':not(.blockFloat-processed)', context).each(function (j, block) {
    }
    var settings = Drupal.settings.floating_block;

    // Cycle through all of the blocks we want to float, tagging them if necessary
    $(settings['selectors']).each(function (i, selector) {
      var item = selector.split('|');
      $(item[0].toString() + ':not(.blockFloat-processed)', context).each(function (j, block) {
         var blockInfo = [];
        blockInfo.original_position = $(block).offset();
        blockInfo.original_offset = $(block).offset();
        blockInfo.original_position = $(block).position();
         blockInfo.original_css_position = $(block).css("position");
         blockInfo.original_identifier = 'blockFloat-' + floating_blocks.length;
         blockInfo.viewHeight = 0;
        blockInfo.container = item[1];
        blockInfo.minOffset = 0;
        blockInfo.maxOffset = 0;
         floating_blocks.push(blockInfo);
        // Initialzing block positioning.
         tracker(blockInfo);
         $(block).addClass('blockFloat-processed ' + blockInfo.original_identifier);
       });
Drupal.behaviors.blockFloat = {
       // Save positioning data.
       var viewHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
       var block = $('.' + e.original_identifier);
      e.minOffset = e.original_offset.top;
      if (e.container) {
        var containerHeight = $(e.container).height();
        e.minOffset = Math.round($(e.container).position().top);
        e.maxOffset = Math.round(containerHeight + e.minOffset - e.blockHeight - 10);
      }
      else {
        e.maxOffset = viewHeight;
      }

       if (block.length > 0) {
         if (e.viewHeight != viewHeight) {
           if (e.reset) {
             //reset block so we can calculate new position
            block.css({left: e.original_position.left + 'px', position: e.original_css_position, top: e.original_position.top + 'px'});
            e.original_position = $(block).offset();
            block.css({left: e.original_offset.left + 'px', position: e.original_css_position, top: e.original_offset.top + 'px'});
            e.original_offset = $(block).offset();
             e.original_css_position = $(block).css("position");
           }
           e.viewHeight = viewHeight;
           e.docHeight = $(document).height();
          e.vPosition = e.original_position.top;
          e.hPosition = e.original_position.left;
          e.vPosition = e.original_offset.top;
          e.hPosition = e.original_offset.left;
           e.blockHeight = block.height();
         }
 
         // Track horizontal positioning relative to the viewport and set position.
         var current_position = block.offset();
         var hScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
        var vOffset = (document.documentElement.scrollTop || document.body.scrollTop) - e.vPosition;
        // The offset begins!
        var scrolli = (document.documentElement.scrollTop || document.body.scrollTop) ;
 
        if (vOffset > 0) {
        // make sure we're scrolling within the right region
        if (scrolli > e.minOffset && scrolli <= e.maxOffset ) { // && scrolli < e.maxOffset) {
           //Don't let the bottom of the block go beneath the document height
           var topPosition = 0;
           if ((current_position.top + e.blockHeight) > e.docHeight) {
Drupal.behaviors.blockFloat = {
           block.css({left: -hScroll + e.hPosition + 'px', position: 'fixed', top: topPosition + 'px'});
         }
         else {
          block.css({left: e.original_position.left + 'px', position: e.original_css_position, top: e.original_position.top + 'px'});
          // nearing the top
          if (scrolli < e.minOffset) {
            block.css({left: e.original_offset.left + 'px', position: e.original_css_position, top: e.original_offset.top + 'px'});
            block.css({left: '0px', position: e.original_css_position, top: '0px'});
          }
          // nearing the bottom
          else {
            block.css({left: e.original_position.left + 'px', position: 'relative', top: (containerHeight - e.blockHeight) + 'px'});
            block.css({left: '0px', position: 'relative', top: (containerHeight - e.blockHeight) + 'px'});
          }
         }
       }
     }
Drupal.behaviors.blockFloat = {
         time = null;
       }, 250);
     };
    
  
     if (doResize) {
       $(window).resize(resize);
     }
   }
 };

and here the floating_block.module..

// $Id: floating_block.module,v 1.1 2010/06/01 08:50:56 alexpott Exp $

/**
 * @file
 * Allows regions of the site to float.
 */

/**
 * Implementation of hook_init().
 */
function floating_block_init() {
   $selectors = preg_split("/(\r\n|\n)/", variable_get('floating_block_to_apply', ''));
   if (count($selectors)) {
    drupal_add_js(array('floating_block' => $selectors), array('type' => 'setting', 'scope' => JS_DEFAULT));
    drupal_add_js(array('floating_block' => array(
      'selectors' => $selectors,
    )), array('type' => 'setting', 'scope' => JS_DEFAULT));
     $path = drupal_get_path('module', 'floating_block');
     drupal_add_js($path . '/floating_block.js');
   }
  }

/**
 * Implementation of hook_menu().
 */
function floating_block_menu() {
  $items = array();
  $items['admin/settings/floating_block'] = array(
    'title' => 'Floating block',
    'description' => 'Configure floating block.',
    'access arguments' => array('administer site configuration'),
    'page callback' => 'drupal_get_form',
    'page arguments' => array('floating_block_admin')
  );
  return $items;
}

/**
 * Form to config floating block settings.
 */
function floating_block_admin($form, &$form_state) {
  $form = array();
  $form['floating_block_to_apply'] = array(
     '#type' => 'textarea',
     '#title' => t('CSS Classes/Selectors to <em>Include</em>'),
     '#default_value' => variable_get('floating_block_to_apply', ''),
    '#description' => t('CSS selectors including id or class where to apply the floating block to. For example use #sidebar-left for ID, .sidebar-left for classes, and/or #floating-block .floating_block for combination. One selector per line.'),
    '#description' => t('CSS selectors of blocks you want to float followed by an optional container id, separated with a | symbol, one per line. For example use #block-block-1 to float on the entire page or #block-block-1|#main to float Block 1 within a container in your theme called #main.'),
   );
   return system_settings_form($form);
 }

what am i missing!?

Sincerely your,
M.sibany

Anonymous’s picture

Version: 6.x-1.x-dev » 7.x-1.x-dev

The patch was for the 7.x branch (from git, which seems newer than the 7.x-dev branch), so I'm not certain it will work in D6. I do not have any D6 sites I can test this on at my office. If I have time on the weekend I will see what happens when it is used in D6... it is probably something minor but it can sometimes be hard to debug this stuff. Sorry in advance if I do not have time to review, I do not do much D6 work anymore.

alexpott’s picture

Status: Active » Fixed

Hi Ryan,

Thanks for your excellent work. Your interest and others has prompted me to re-visit this module and include the functionality you've added. See http://drupalcode.org/project/floating_block.git/commit/c817344

The upgrade from your patch to the new dev version will require you to re-configure floating blocks as I've made some significant changes to the how this module is configured.

The way to configure a floating block to be contained is now:

#block-block-1|container=#main

This format allows for (a) nicer javascript (b) additional settings - i've already added padding_top and padding_bottom eg.

#block-block-1|container=#main,padding_top=5,padding_bottom=10

The latest dev version of the module showing the new container functionality is demoed here: http://dev.vit-al.co.uk/floating_block7/

Once I have test this in various versions of IE I'll release it. Any feedback would be gratefully received - tentatively setting to fixed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jitumiet’s picture

Issue summary: View changes

Can any one tell me the steps how to apply this patch for floating block module. In which file I have to change code.

I am using http://ftp.drupal.org/files/projects/floating_block-7.x-1.2.tar.gz