Monday, April 9, 2012

Drupal Thickbox Remove Scrollers


Hello Developers, how is life going ?! Today's Tip is about removing scrolling bars from the thickbox popup page, In General, and using Drupal Thickbox module.

In General ... Thickbox generates an HTML iframe. To remove the scrolling bars from it, we can use the CSS property ( overflow : hidden ; ) ... but this property doesn't work in IE and Chrome.




To fix this issue for all browsers, you can add this property to the iframe itself ( scrolling="no" ).

Drupal Thickbox Module:

1- Open your sites/all/modules/thickbox
2- Open thickbox.js
3- near the line 223, you will find this line :

      $('#TB_window').append('<div id="TB_title"><div id="TB_ajaxWindowTitle">' + caption + '</div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton" title="' + settings.close + '">' + settings.close + '</a> ' + settings.esc_key + '</div></div><iframe frameborder="0" hspace="0" src="' + urlNoQuery[0] + '" id="TB_iframeContent" name="TB_iframeContent' + Math.round(Math.random()*1000) + '" onload="tb_showIframe()" style="width:' + (ajaxContentW + 29) + 'px;height:' + (ajaxContentH + 17) + 'px;"></iframe>');

Replace it with the following :

      $('#TB_window').append('<div id="TB_title"><div id="TB_ajaxWindowTitle">' + caption + '</div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton" title="' + settings.close + '">' + settings.close + '</a> ' + settings.esc_key + '</div></div><iframe scrolling="no" frameborder="0" hspace="0" src="' + urlNoQuery[0] + '" id="TB_iframeContent" name="TB_iframeContent' + Math.round(Math.random()*1000) + '" onload="tb_showIframe()" style="width:' + (ajaxContentW + 29) + 'px;height:' + (ajaxContentH + 17) + 'px;"></iframe>');

this will remove any scrolling bar from the popup window, and THAT's IT.

No comments:

Post a Comment