Question

Is there a way to set or reset color box options later, after events, like scrolling, have happened?

here is how you normally set colorbox options:

        jQuery("a[rel='pop']").colorbox({ transition:"none", top:20px;});

what I need is for the FB.canvas.getPageInfo() method to reset the ‘top’ option. So, the user has scrolled down say 300px. getPageInfo can tell you that. But, I cant figure out how to get getPageinfo() to talk to colorbox and change the setting, before opening the popup.

FB.Canvas.getPageInfo(callbak);
function callbak(info){
       i want to set the 'top' here, with info.scrollTop
        so that when colorbox pops, its positioned correctly.
}//callback

maybe what needs to happen is instead of doing the colorbox settings at (document).ready, I need to hook my rel=”pop” elements to a function that
tests for FB (because I’ll be using this page outside of fb, too.)
and then sets up colorbox,
then fires colorbox.

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
I cant figure out how to code in comments, so here is almost working code:This below works, but only on the second click, and even then, it’s using the scrollTop from the previous click. The alert() before my colorbox setting has the correct info on the first click. Apparently, it’s setting the top ‘correctly’ for the next click, but i need the top to be reset for *this click.

 jQuery("a[rel='pop']").colorbox({ transition:"none", top:"5px", maxWidth:"85%", maxHeight:"85%",
      onOpen:function(){dothething(); }});  

function dothething(){
        FB.Canvas.getPageInfo(callbak);
        function callbak(info){
            var ist = info.scrollTop;
            // alert('callbak'+ist);
            jQuery("a[rel='pop']").colorbox({  top:ist+"px"});
        }//callback
    }//dothething

Answer 1

Try:

jQuery("a[rel='pop']").click(function(e) {
  e.preventDefault();
  link = jQuery(this).attr('href');
  FB.Canvas.getPageInfo(function(info) {
    ist = info.scrollTop;
    jQuery.colorbox({href:link, transition:"none", top:ist+"px;", maxWidth:"85%",maxHeight:"85%"});
  });
});