Change thickbox popup size dynamically

Question

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.

Incredulous

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 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.net/gaby/rrH8q/

Troy

@Umar can you post a live version ? (are you using this thickbox: jquery.com/demo/thickbox ?), Also, i had a syntax error in there.. try again with the updated code... – Troy

From current version of WordPress (4.9.6) I cannot override anything of thickbox like in your code. I have to use setTimeout() to make it delay and then it work. Do you have any suggestion? – Wil

Answer 2

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"'});

Brassbound

what is $vitjs in your example? – Unsavory

It is used in place of $ to avoid conflict...But it has nothing to do with the above code..so you can simply use $ in place of $vitjs..... – Brassbound

Answer 3

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

Consultation

I didn't do what @Gaby did which was look at their resizing code, his is better, though mine would do something... – Consultation

Answer 4

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

Zygotene

Answer 5

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

Liaoning