orientation.html

<!--
/*
 * jQMultiTouch -- The jQuery of Multi-touch
 * Copyright (C) 2010-2014 Michael Nebeling. All rights reserved.
 *
 * jQMultiTouch is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * jQMultiTouch is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with jQMultiTouch. If not, see <http://www.gnu.org/licenses/>.
 *
 * See the README and LINCENSE files for further information.
 *
 */
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <!--<meta name="viewport" content="width=device-width, user-scalable=no"/>-->

    <title>jQMultiTouch Orientation Demo</title>

    <!-- include jQuery -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

    <!-- include jQMultiTouch -->
    <script src="../js/jquery.multitouch.js" type="text/javascript"></script>
    <script src="../js/jquery.multitouch-orientable.js" type="text/javascript"></script>

    <link href="../css/jquery.multitouch.css" rel="stylesheet" type="text/css">

    <style>
        #photo {
            background: blue;
            border: 1px solid black;
            left: 10px;
            top: 10px;
            width: 950px;
            height: 500px;
            position: absolute;
        }
        #photo.landscape {
            left: 10px;
            top: 10px;
            width: 590px;
            height: 400px;
        }
        #photo.landscape-90 {
            left: 370px;
        }
        #tags {
            background: red;
            border: 1px solid black;
            left: 10px;
            top: 520px;
            width: 950px;
            height: 300px;
            position: absolute;
        }
        #tags.landscape {
            left: 610px;
            top: 10px;
            width: 350px;
            height: 400px;
        }
        #tags.landscape-90 {
            left: 10px;
        }
    </style>
</head>

<body style="width: 100%; height: 100%">
    <div id="photo" class="orientable"></div>

    <div id="tags" class="orientable"></div>
</body>

</html>