Change the dynamic popup of a thick window

Question

I am using ThickBox to open a popup on my page. There is a tab in the popup that I need to resize the popup of the ThickBox on. How can i do this?

Thanks in advance.

Answer 1

This is the code they use.

$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'}); if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'}); } 

so you can use it with minor changes (assuming you are using a modern version of jQuery).

 $('#yourbutton').click(function() { var TB_WIDTH = 100, TB_HEIGHT = 100; // set the new width and height dimensions here.. $("#TB_window").animate({ marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px', marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px' }); }); 

Demo at http://jsfiddle.net/gaby/rrH8q/

Answer 2

Attach a click event handler to the specified tab, which resizes and fields TB_Window, to center it again, for example.

 $("#tab").click(function() { $("#TB_window").css("height", newHeight); $("#TB_window").css("width", newWidth); $("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 ); $("#TB_window").css("margin-left", ($(window).width()-newWidth)/2); }); 

Answer 3

A small correction in Gaby aka G. Petrioli will respond so that the popup also sets the fields correctly:

 var TB_WIDTH = 500, TB_HEIGHT = 400; // set the new width and height dimensions here.. $("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10) + 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) + 'px"'}); 

Answer 4

I did something like this. This needs to be restarted if wiewport is changed when the popup is open.

 function tb_position() { if(TB_WIDTH > $(window).width()) { $("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'}); $("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'}); $("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'}); } else $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'}); } 

Answer 5

You must enclose this inside setTimeout so that this is done after the thick box is opened, and not when the button is clicked. This usually happens between “pushing a button” and “opening a thick drawer”.

 var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(), TB_HEIGHT = 400; // set the new width and height dimensions here.. setTimeout(function() { jQuery("#TB_window").css({ marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px', marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px' }); }, 0);