Using jQuery flip Javascript Library

The following html page displays a simple card that you can flip by clicking the text.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, nofollow" />
    <title>jQuery Flip example</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script>
    <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
</head>
<body>
<div id="card"> 
  <div class="front"> 
    Front content
  </div> 
  <div class="back">
    Back content
  </div> 
</div>
    <script type="text/javascript">
      $(document).on('ready', function() {
        $("#card").flip();
      });
    </script>
</body>
</html>

The jQuery version must be 2.1.4. If you copy paste the code from the flip.js homepage, make sure you have ending script tag, otherwise you will get the error:

Uncaught TypeError: $(...).flip is not a function

Another common mistake is:

<script type="text/javascript">
  $(function(){
      $("#card").flip(); 
  });
</script>

The script is running before the entire document is loaded into the browser, so jQuery isn't actually selecting anything to flip. In jQuery to make the script wait until document load, wrap the code like this:

<script type="text/javascript">
  $(document).on('ready', function() {
    $("#card").flip();
  });
</script>

You can add some CSS to display the content as a card.

<style>
        #card {
            height: 300px;
        }
        #card .front{
            text-align: center;
            font-size: 30px;
            font-weight: 200;
            background-color: yellow;
        }

        #card .back{
            text-align: center;
            font-size: 30px;
            font-weight: 200;
            background-color: #eee;
        }
</style>

I went to the flip jQuery home page to find out how the example worked. On Chrome:

  1. Right click.
  2. Select inspect.
  3. Click on the pointer icon on the top left corner.
  4. This shows the CSS for the front class.
  5. Click on the file name that contains the front CSS class (index.html).
  6. You can now copy the CSS for front and back classes to your project.

In this article, we wrote a simple hello flip program using jQuery flip library. You also learned how to figure out how something works in CSS by using the Chrome developer tools to reverse engineer CSS functionality.


Related Articles