Question

I have found numerous jQuery plugins that allow you to “flip” an element; SmashUp Labs’ Flip! plugin seems most popular/useful, and it is what I am currently using.

Meanwhile, there are, of course, numerous solutions here and elsewhere for toggling between two different existing divs, but none of them touch on flipping.

But what I need is for both things to happen. The problem I’m finding with Flip! is that it includes the content as part of the function call, while I actually want to use the flip to toggle between two different existing divs. I’ve gotten this to look more-or-less right using an iframe but then I’m using a fairly unnecessary iframe and I also have to wait for that frame to load after the flip, which looks bad.

Both “sides” of the flipped div are too large and complex to be reasonably inserted into the function call, and I cannot use something like $('div').text() because that creates a copy of the div rather than revealing the one that I already have.

So, does anyone know of any library that does flipping, but allows you to specify an element to be made visible after the flipping is over? Or has anyone done this kind of thing with Flip!, perhaps using its callback functions?

Answer 1

You could try to put the two divs on top of the flip box, using CSS absolute position, so that the content of the div is on top of the background of the flip box, looks like it’s in the box.

For example, you got div1 and div2, by default when page loads, div1 is displaying and div2 has style display:none, then you hook up the callbacks in Flip like:

$("#flipbox").flip({
    direction:'tb',
    onBefore: function(){
        $('#div1').hide();
    },
    onEnd: function(){
        $('#div2').show();
    }
});

Both contents of div1 and div2 are on top of the flip box, so they looked like contained.