How to make Auto Height on Colorbox?

Question

I use a jQuery plugin called ColorBox, and basically it creates a jquery mod, however the modal has a fixed height of size “500”, and I want it to have a minimum height, but also I have diverging menus in modal mode I would like automatically expand. How can I do it?

The code I have now is:

$(".colorboxlink1").colorbox({ opacity:"0.2", width:"450", height:"500", title:"To close this dialog click X icon at the right", iframe:true }); 

Iv tried to remove Height from this and use CSS, but this did not work. Iv tried to put what I know about jquery on this line, but nothing works, but I'm pretty new to jQuery. Does anyone have any idea?

Answer 1

You can use this:

 $('.colorboxlink1').colorbox({ onComplete : function() { $(this).colorbox.resize(); } }); 

And this is in your code after the colorbox has been initialized:

 $.colorbox.resize(); 

Answer 2

I had a similar situation, and I used the setTimeout function to give colorbox some time to load, and then called the resize method.

I called colorbox

 var profileHeight=jQuery('#profile').height(); //Get the height of the container setTimeout(function (){ jQuery.colorbox({ html:jQuery('#profile').html(), width:'50%', height:profileHeight, opacity:0.5})} , 600); //Wait 700ms then resize setTimeout(function(){jQuery(this).colorbox.resize();},700); 

This provided me with the functionality I needed. The modal window always resizes the contents of the container

Answer 3

Using the current version of ColorBox, you can specify the maximum sizes in percent:

 $(".colorboxlink1").colorbox({ maxWidth: '95%', maxHeight: '95%' }); 

Answer 4

You can bind an event like this and trigger a resize:

 $(document).bind('cbox_complete', function() { $.colorbox.resize(); }); 

search for “event hooks” to find out what else you can link here: http://www.jacklmoore.com/colorbox/