Colorbox positioning on top of another element

Question

I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).

I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:

                onOpen:function() { 
                        $('#colorbox').removeAttr('top');
                        $('#colorbox').css('top','200px');
                        },

It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.

So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.

Thanks in advance!

Edit: full code below

$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
                innerWidth:660, 
                innerHeight:720, 
                returnFocus: true, 
                overlayClose: true,
                fixed: false,
                iframe: true,
                href: loadUrl,
                opacity: 0.6,
                reposition: true,
                onOpen:function() { 
                        $('#colorbox').removeAttr('top');//test
                        $('#colorbox').css('top','200px');//test
                        }, 
                onLoad: function() {
                        $('#colorbox').removeAttr('top');//test
                        $('#colorbox').css('top','200px');//test
                        },
                onClosed:function() { 

                        }
    });
return false;


});

EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)

Answer 1

The jsfiddle was helpful, I was able to use the same code as you and get it working.

This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.

Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:

<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>

<div class="unitKontejner">             
  <div style="float:right;">
    <a id="rezervuj" href="http://www.imgur.com">
      <div class="reserveIt">
        <div class="reserveIt-content">
          open colorbox&nbsp;»
        </div>
      </div>
    </a>
  </div>
</div>

Here's the script that you can put in the head:

<script>
$(document).ready(function(){

// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.    
  $("#rezervuj").colorbox({
    iframe:true,
    innerWidth:660, 
    innerHeight:720,
    opacity: 0.6,
    top: 0,
    left: 0
  });

// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded. 
 $(document).bind('cbox_complete', function(){

// Grab the position of the button,
// colorbox can be positioned relative to it.
  var pos = $(rezervuj).position();
  //console.log(pos);

  // Set the position of the colorbox div
  // You can add to or subtract from the pos values
  // Example: top: (pos.top + 20) + "px"
  $("#colorbox").css({
      position: "absolute",
      top: pos.top + "px",
      left: pos.left + "px"
  }).show();
 });

});
</script>

Answer 2

you can also try this.

$.colorbox({
                width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
                onComplete: function () {
                    $('#colorbox').removeAttr('top');//test
                    $('#colorbox').css('top', '100px');//test
                    $('#colorbox').removeAttr('display');//test
                    $('#colorbox').css('display', 'block');//test
                },
                onLoad: function () {
                    $('#colorbox').removeAttr('display');//test
                    $('#colorbox').css('display', 'none');//test
                },
            });