CODEWITHSUNDEEP
javascriptjquerythickbox
Todd
Todd

Reputation: 31

Resizing JQuery thickbox window dynamically

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?

Upvotes: 3

Views: 5887

Answers (4)

l2aelba
l2aelba

Reputation: 22177

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

Upvotes: 4

Dylan Downhill
Dylan Downhill

Reputation: 1

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

Upvotes: 0

LucasS
LucasS

Reputation: 461

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

Upvotes: 3

Phil McCullick
Phil McCullick

Reputation: 7170

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

Upvotes: 0

Related Questions