I’m trying to get a presentation working with the reveal.js conjoined with features of this flipin plugin , but I lose the flip effect which is the desired feature and get
ReferenceError: Can’t find variable: jQuery
with ref to line 1 or simply the error message if I change something -I’ve tried all the popular and not so popular variances on the variable. This would be common except the code works perfectly fine on in it’s own ,so I’m puzzled.
The problem code:
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
Any ideas?
I’m thinking maybe I missed something in the html:
<head>
<meta charset="utf-8">
<title>HUE2</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="lib/zenburn.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<div id="main">
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">◄</a>
<a class="right" href="#">►</a>
<a class="up" href="#">▲</a>
<a class="down" href="#">▼</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
<script src="lib/highlight.js"></script>
<script src="lib/classList.js"></script>
<script src="js/reveal.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.flip.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script>
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
// Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
alert( '"customevent" has fired' );
} );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.indexh & event.indexv
} );
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
// Loops the presentation, defaults to false
loop: false,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: query.theme || 'neon', // default/neon
// Transition style
transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
});
hljs.initHighlightingOnLoad();
</body>
Does anyone see something I don’t?
Looks like the Flip plugin needs jQueryUI.
Also you need to include jQuery first, like this: