javascriptjquerycolorbox

Resizing Colorbox Not Working!

I loaded a colorbox modal with contents from another page of the website (AJAX example on the official demo). This page has a Show more button that when clicked, causes more contents to be shown. I also added additional code to attempt to resize the modal to show all of the content.

CODE:

$("#button_writereview").colorbox.resize();

$("#button_writereview").colorbox.resize({innerWidth:560, innerHeight:750});

$("#button_writereview").colorbox.resize({Width:560, Height:750});

$.colorbox.resize();

$.colorbox.resize({innerWidth:560, innerHeight:750});

$(this).colorbox.resize(); 

$.fn.colorbox.resize();

$('#button_writereview').css('height',500);

None of the above codes do anything except throw an error Uncaught TypeError: Cannot call method 'resize' of undefined

I just cant seem to figure out the resize!! I'm guessing its a problem calling the parent page from a click event in the modal.

Solution

    1. there may be a jquery conflict as everybody is in love with the $ anyway you can use jQuery noConflict like

      <script type="text/javascript" src"/Scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript"> 
        jq = jQuery.noConflict(true); 
 </script>

    now use jq instead of $

    1. wrap your code inside

      $(function(){

      });

    2. make sure both jquery.js and colorbox.js are loaded, sometimes they are included in the page header but didnt get loaded ...