StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The library only provides the method, you still have to call it somewhere in your own code like this:</p> <pre><code>var element = document.getElementById('container'); element.onclick = function() { // code from your library }; </code></pre> <p>/Edit: regarding the question in the comment:</p> <blockquote> <p>Yeah, I did that, but it is still not working. Maybe I need to add the flippant.min.js file that also came with it? I just added the JS and CSS File from Flippant to the header. Although there doesn't look like there is much in the flippant.min.js file.</p> </blockquote> <p>The .min version of a file is the same code as the usual file, it's just a compressed version to save some bytes. I think the problem you had is <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup" rel="nofollow">Unobtrusive JavaScript</a>.</p> <p>You can either register an event handler on the html element itself like this:</p> <pre><code><button onclick="flip()">Flip</button> </code></pre> <p>or in your JavaScript wrapped by this function:</p> <pre><code>window.onload = function () { }; </code></pre> <p>What probably happend is, that you tried to register an event on an element which wasn't rendered from the browser at the time of the script execution.</p> <p>I tried it out myself and got this Code working:</p> <pre><code>window.onload = function () { function flip() { var front = document.getElementById('container') var back_content = "I'm the back!"; // 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. back.close(); } document.getElementById('flip').onclick = flip; }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload