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 m开发者_StackOverflow中文版ore 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.

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 $

3. wrap your code inside

   $(function(){

   });

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