Search code examples
jquerycolorbox

When using colorbox jQuery plugin to display two different sets of content, the first set of content is shown when the colorbox is closed

jQuery 1.6.4 ColorBox 1.3.19

I open up a colorbox using the following code:

$.colorbox({inline: true,
            href: '#floatbox',
            innerHeight: '480',
            innerWidth: '530',
            top: '15%'});

Inside of '#floatbox' is a button, which, when clicked, ultimately causes the following 2nd invocation of colorbox:

$.colorbox({html: 'some_valid_html',
            transition: 'none',
            escKey: false,
            overlayClose: false);

What I observe is that the 2nd, HTML content is displayed correctly, but before the call to 

$.colorbox.close()

later, the contents of '#floatbox' (the content from the 1st invocation) are flashed on the screen. This is not what I expect. Once the content from the 1st invocation is removed from the screen, I don't want the user to see it again.

This is the behavior in Chrome/Safari.

I've tried several things, including:

1) Forcibly removing '#floatbox' from the DOM before the 2nd call to $.colorbox.

2) Binding the 2nd call to $.colorbox to the link that is clicked in the 1st colorbox content.

3) Manipulating the $.colorbox settings to "undo" the 'inline' and 'href' properties from the first invocation (although it doesn't really appear like I should need to do that anyway).

It's as though ColorBox makes a copy of the DOM node from the 1st invocation and holds onto it.

Here are some questions:

1) Is it possible that the 'inline' and 'href' settings from the 1st invocation are being remembered somehow?

2) Is there any way to manipulate the current settings of an opened colorbox?

Any other thoughts are appreciated.

Thanks, Wes

Solution

  • It's as though ColorBox makes a copy of the DOM node from the 1st invocation and holds onto it.

    ColorBox doesn't copy that element, it moves the node from it's original place in the DOM. When you change content, it moves it back.

    1) Is it possible that the 'inline' and 'href' settings from the 1st invocation are being remembered somehow?

    No, that info is discarded. I'm not sure what is causing you these problems, but I suspect it's an oversight in the implementation. I would look through your code to make sure you aren't making accidental calls to colorbox.