I have a thickbox that pops up when you click on a link. Depending on the user's browser size I want the thickbox to be a constant 500px or so width and the height to change dynamically depending on the height of user's browser. Is this possible?
I have a thickbox that pops up when you click on a link. Depending on the user's browser size I want the thickbox to be a constant 500px or so width and the height to change dynamically depending on the height of user's browser. Is this possible?
Share Improve this question asked Nov 30, 2010 at 23:10 ToddTodd 311 silver badge2 bronze badges4 Answers
Reset to default 4In my case : (CSS only)
#TB_window {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 90%;
margin: 0 !important;
}
#TB_ajaxContent {
width: 100% !important;
height: auto !important;
max-width: 100%;
box-sizing: border-box;
}
another option is to use JQuery to work out the browser size and then resize thickbox to suit. this is not as elegant as the CSS solution but just to plete the answer... here is a method do get it done.
// set the displayWidth/Height to be 90% of the window
var displayWidth = $(window).width() * 0.9;
var displayHeight = $(window).height() * 0.9;
// Animate the thickbox window to the new size (with 50px padding
$("#TB_window").animate({
marginLeft: 0 - (displayWidth + 50) / 2,
marginTop: 0 - (displayHeight + 50) / 2,
height: displayHeight + 50,
width: displayWidth + 30
}, {
duration: 800
});
$("#TB_ajaxContent").animate({
height: displayHeight,
width: displayWidth
}, {
duration: 800
});
You can adjust the css to make the height change dynamically. Something like this should work:
#TB_window {
top:0;
height:100%;
margin-top:0 !important;
border-top:0;
border-bottom:0;
}
Tested answer using just CSS:
@media all and (max-width: 640px){
#TB_window {
top: 0 !important;
left: 0 !important;
margin-top: 0 !important;
margin-left: 0 !important;
height: 100%;
width: 100% !important;
}
#TB_iframeContent{
max-width:100%;
width:100%;
}
}