Cambia la dimensione popup della thickbox in modo dinamico

Question

Sto usando ThickBox per aprire popup nella mia pagina. In popup c'è una scheda sul clic su cui ho bisogno di cambiare la dimensione della finestra popup di ThickBox. Come lo posso fare ?

Grazie in anticipo.

Answer 1

Questo è il codice che usano

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

modo da poter utilizzare lo stesso con un leggero cambiamento (a patto di utilizzare una versione moderna di 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 http://jsfiddle.net/gaby/rrH8q/

Answer 2

Collegare un gestore di eventi click a detta scheda che modifica le dimensioni e i margini TB_Window per centrarlo nuovamente, ad es.

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

Una piccola correzione in Gaby aka la risposta di G. Petrioli in modo che popup deve impostare i margini anche in modo corretto:

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

ho fatto qualcosa di simile. Questo deve essere rilanciato se il wiewport viene ridimensionato mentre il popup è aperto.

function tb_position() { 
 

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

Answer 5

si deve racchiudere questo all'interno di un setTimeout in modo che questo sarà fatto dopo che il thickbox è aperto, non quando il pulsante è clic. Di solito, accade tra "Clic del pulsante" e "apertura di 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);