I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?

Thanks in advance.

I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?

Thanks in advance.

• javascript
• jquery
• popup
• thickbox

Share Improve this question Follow edited Jul 14, 2011 at 20:15 Pointy 414k6262 gold badges594594 silver badges628628 bronze badges asked Jul 14, 2011 at 20:09 MUSMUS 1,45044 gold badges1717 silver badges3030 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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 the same with a slight change (assuming you use 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/gaby/rrH8q/

A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also 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"'});

Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.

$("#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);
});

I did something like this. This needs to be re-launched if the wiewport is resized while 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'});
}

You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".

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