CODEWITHSUNDEEP
jqueryhtml
djack109
djack109

Reputation: 1377

Getting started with MetroJS

A rarely venture into jquery but stumbled across Metro JS http://www.drewgreenwell.com/projects/metrojs I was quite impressed with it so thought I would give it a go. I like to keep things simple. Being no jquery expert I can't seem to get the flip tile working so any help would be appreciated. My full code is below.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    <link rel="stylesheet" href="metrojs.css" type="text/css">
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="metrojs.js"></script>
    <script language="javascript" type="text/javascript">
    //animate on click

    var $tile1 = $("#tile1").liveTile();
    $("#tile1").on("click", function(){
        $("#tile1").liveTile('play', 0);
    });

    var $tile2 = $("#tile2").liveTile();
    $("#tile2").on("click", function(){
        $("#tile2").liveTile("play", 0);
    });

    </script>

        <script type="text/javascript">
            $(document).ready(function() {
                $(".live-tile,#tile1,#tile2").liveTile();
            });
        </script>


    </head>

    <body>
    <h1>Animate on Click</h1>
    <div class="tiles red">
        <div class="live-tile" id="tile1" data-mode="flip">        
            <div>
                <a class="full" href="#">front</a>
                <span class="tile-title">front title</span>
            </div>
            <div>
                <p>this tile flips once vertically when clicked using a repeat count of 0</p>
                <span class="tile-title">back title</span>
            </div>
        </div>
        <div class="live-tile blue" id="tile2" data-direction="horizontal" data-mode="flip">     
            <div>front
                  <span class="tile-title">front title</span>
            </div>
            <div>
                <p>this tile flips horizontally on an interval or when when clicked
                   <span class="tile-title">back title</span>
                </p>
            </div>
        </div>
    </div>
    </body>

    </html>

Upvotes: 0

Views: 589

Answers (1)

Michael0x2a
Michael0x2a

Reputation: 64008

It looks like you need to include jQuery in order for metro.js to work.

You can downloaded the latest version of jQuery here. Save it in the same folder as the rest of your code, and add the line:

<script src="jquery.2.1.1.min.js" type="text/javascript"></script>

Make sure to put this line BEFORE you include metrojs.js -- you need to load jQuery before loading metro.js.

In the future, you can debug this by opening up the web console, which will report any Javascript errors that occur on a webpage, in addition to tons of other useful info. In this case, running your webpage caused the console to report that jQuery and $ were undefined, which helped me identify the problem.

Instructions on accessing the web/debug console as well as other useful developer tools for Firefox, Chrome, and IE are available online.

Upvotes: 1

Related Questions