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 :)");
}
});
});
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.