I am trying to make a flash card studying web app for a school project and I wanted to use Flip! I have an issue, though when I put the anchors with their click events bound to the flip function inside the divs to be flipped. I am new to jQuery. Any help would be appreciated. Is there a flip forum? My code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flippant</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
//]]>
</script>
<script type="text/javascript" src="jquery.flip.js"></script>
<script type="text/javascript">
var f2b = function(){
$("#card").flip({
direction: 'tb',
color: '#B34212',
content: $('#back')
});
}
var b2f = function(){
$("#card").flip({
direction: 'tb',
color: '#B34212',
content: $('#front')
});
}
$(document).ready(function(){
$("#flip1").click(f2b);
$("#flip2").click(b2f);
$("#flip2").click();
});
</script>
<style type="text/css">
.back { display: none; }
.front { display: none; }
</style>
</head>
<body>
<div class="card" id="card"></div>
<div class="front" id="front">
This is <br />
the front <br />
of the card. <br />
<a href="#" id="flip1" title="flip to back">Flip1</a>
</div>
<div class="back" id="back">
This is<br />
the back<br />
of the card.<br />
<a href="#" id="flip2" title="flip to front">Flip2</a>
</div>
</body>
</html>