jQuery DIV Flip

Question

This is the HTML

<article class="post">
    <div class="post-inner">
        <div class="post-content">
            // stuff here   
            <button class="order">Order</button>
        </div>
        <div class="post-content-back">
            // stuff here
            <button class="back">Back</button>
        </div><!-- / .post-back -->
    </div>
</article>

I'm using this flippy plugin to flip front and back views, but it just doesn't work for some reason that I can't figure:

jQuery(".post .order").bind("click",function(e){
    e.preventDefault();
    jQuery(this).parents(".post-content").flippy({
        content:jQuery(this).next().find(".post-content-back"),
        direction:"LEFT",
        duration:"750",
        onStart:function(){
            alert("Let's flip");
        },
        onFinish:function(){
            alert("ok, it's flipped :)");
        }
    });
});

Answer 1

You need to supply a background-color to the .post-content element.

The plugin does this on line #217

_Color = convertColor($this.css("background-color"));

and it is grabbing the background-color property, which if not supplied is defaulting to rgba(0, 0, 0, 0) (well it does for me on Chrome)

When flipping line #312 uses that color string like this:

ctx.fillStyle = (_Ang > 90) ? changeColor(_Color_target,Math.floor(Math.sin(rad)*_Light)) : changeColor(_Color,-Math.floor(Math.sin(rad)*_Light));

and calls the changeColor(colorHex,step) function at line #441, which is expecting a hex value for the color. Not supplying a hex string causes the script to explode when it tries to extract hex values for red, green, blue from rgba(0, 0, 0, 0) with the error Uncaught ReferenceError: g is not defined

The function tries to use gb as red, a( as green and 0, as blue.

Added a demo but it's quite a localised question so I don't think there is benefit to inlining all that code in this answer.

@tommarshall's answer is also very relevant as you do have a selector issue finding the .post-content-back element.

Answer 2

The problem here was that way that you were fetching the content.

jQuery(this).next().find(".post-content-back"),

This will return the next element (which is .post-content-back) and then look for an element with the class .post-content-back inside it. And then you were returning the jQuery object itself rather than the content.

Here's what you actually wanted:

jQuery(this).next(".post-content-back").html();

However it's also better to fetch the content before initialising the flippy plugin and storing it in a variable.

Here's a working example - http://jsfiddle.net/SqD6x/