Colorbox does not resize after container widened

Question

I actually posted a similar question before and resolved it in a way that I thought my code was very buggy and that the problem must lie somewhere in that.

So what I did was to create a simple page with a colorbox ajax modal and a normal div example on the page itself.

What I'm trying to do is to change the size of the container so that I can show an additional div - which works on the main page. I does not, however work inside the modal even after executing

$.fn.colorbox.resize();

or

$('.modal1').colorbox.resize();

Here is the code itself:

$("button").click(function(){
        $(".container").width('300');
    $('.left').show("slide", { direction: "right" }, 200);
    $.fn.colorbox.resize();
    $('.modal1').colorbox.resize();
});

And here is the example page I made

I tried to do it as cleanly as possible so that it's easy to read. Thanks everyone! :)

Answer 1

You are loading your colobox content from an external file, hence, first of all, you need to apply a live selector for your button.

Then pass your colorbox resize method the width, it seems to have trouble auto-resizing it, eventually because of that delayed sliding animation.

$("button").live('click', function(){
    $(".container").width('300');
    $('.left').show("slide", { direction: "right" }, 200);
    $('.modal1').colorbox.resize({width: 300});
});