A mini dependancy-less UI lib for flipping over DOM nodes.
I am attempting to create a modal that flips. The front modal displays fine however the back modal just displays [object HTMLDivElement] instead of displaying the modal.
<script type='text/javascript'>
$('#introModal').modal('show');
window.onload = function () {
function flip() {
var front = document.getElementById('introModal');
var back_content = document.getElementById('backModal'); // Generate or pull any HTML you want for the back.
var back;
// when the correct action happens, call flip!
back = flippant.flip(front, back_content)
// this creates the back element, sizes it and flips it around.
// call the close method on the back element when it's time to close.
}
document.getElementById('testbutton').onclick = flip;
};
</script>
Source: (StackOverflow)
I have fairly good knowledge of web developement, but I've never implemented any third party Javascript plugins, so I'm a bit confused. Any help would be appreciated.
Okay, so lets say I want to use a plugin called flippant.
http://labs.mintchaos.com/flippant.js/
I got the CSS and JS File from the plugin, and put them in my tag:
<head>
<link rel="stylesheet" type="text/css" rel='nofollow' href="Record.css">
<link rel="stylesheet" type="text/css" rel='nofollow' href="flippant.css">
<script src="Record.js" type="text/javascript"></script>
<script src="flippant.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
^That would be the flippant.js and the flippant.css
Now lets say I want to apply this plugin to flip a simple div container when I click on it.
<div id="container">
</div>
Now it gives you directions/code on the website linked above, so I'm not going to link it here. It's under the "Whys and Hows" subtitle.
So let's say I want to flip the div container when I click on it from the code above, how would I do it using this plugin?
Source: (StackOverflow)
I'm using flippant.css/js and isotope.js to make flashcards for my algebra students.
But I can't get mathjax to render the HTML to math on the backside of a flashcard. Here is my url
and my code snippet that passes the string to html. Can anyone see what the fix is?
var front1 = document.getElementById('card1')
, back_content1 = '<h2>\\\(a^{n+m}\\\)</h2><button id="closeCard1">« Back</button>'
, back1;
document.getElementById("flipCard1").addEventListener('tap',function(e){
back1 = flippant.flip(front1, back_content1);
document.getElementById("closeCard1").addEventListener('tap',function(e){
back1 = back1.close();
})
})
document.getElementById("flipCard1").addEventListener('click',function(e){
back1 = flippant.flip(front1, back_content1);
document.getElementById("closeCard1").addEventListener('click',function(e){
back1 = back1.close();
})
})
Source: (StackOverflow)