Team:Dundee/Template/testpage

From 2014.igem.org

(Difference between revisions)
 
(451 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
 +
<head>
 +
<title>Dundee 2014 Team</title>
 +
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
   
 +
 +
  <link href="https://2014.igem.org/Team:Dundee/stylesheet/notebook?action=raw&ctype=text/css" rel="stylesheet">
 +
 +
  <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
 +
  <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 +
 
 +
 +
 +
<!-- jQuery -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>
 +
   
 +
<!-- Turn js -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>
 +
 +
<style type="text/css">
 +
 +
html, body {
 +
    margin: 0;
 +
    height: 100%;
 +
}
 +
 +
body {
 +
    background-color: #333;
 +
}
 +
 +
body.hide-overflow {
 +
    overflow: hidden;
 +
}
 +
 +
/* helpers */
 +
 +
.t {
 +
    display: table;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
.tc {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
}
 +
 +
.rel {
 +
    position: relative;
 +
}
 +
 +
/* book */
 +
 +
.book {
 +
    margin: 5% auto;
 +
    width: 60%;
 +
    height: 60%;
 +
    -webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
}
 +
 +
.book .page {
 +
    height: 100%;
 +
}
 +
 +
.book .page img {
 +
    max-width: 100%;
 +
    height: 100%;
 +
}
 +
 +
</style>
 +
</head>
<body>
<body>
-
 
+
<div class="t">
 +
    <div class="tc rel">
 +
        <div class="book" id="book">
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" /></div>
 +
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" /></div>
 +
        </div>
 +
    </div>
 +
</div>
 +
 
 +
 
 +
<script type="text/javascript">
 +
 
 +
/*
 +
* Turn.js responsive book
 +
*/
 +
 
 +
/*globals window, document, $*/
 +
 
 +
(function () {
 +
    'use strict';
 +
 
 +
    var module = {
 +
        ratio: 1.38,
 +
        init: function (id) {
 +
            var me = this;
 +
 
 +
            // if older browser then don't run javascript
 +
            if (document.addEventListener) {
 +
                this.el = document.getElementById(id);
 +
                this.resize();
 +
                this.plugins();
 +
 
 +
                // on window resize, update the plugin size
 +
                window.addEventListener('resize', function (e) {
 +
                    var size = me.resize();
 +
                    $(me.el).turn('size', size.width, size.height);
 +
                });
 +
            }
 +
        },
 +
        resize: function () {
 +
            // reset the width and height to the css defaults
 +
            this.el.style.width = '';
 +
            this.el.style.height = '';
 +
 
 +
            var width = this.el.clientWidth,
 +
                height = Math.round(width / this.ratio),
 +
                padded = Math.round(document.body.clientHeight * 0.9);
 +
 
 +
            // if the height is too big for the window, constrain it
 +
            if (height > padded) {
 +
                height = padded;
 +
                width = Math.round(height * this.ratio);
 +
            }
 +
 
 +
            // set the width and height matching the aspect ratio
 +
            this.el.style.width = width + 'px';
 +
            this.el.style.height = height + 'px';
 +
 
 +
            return {
 +
                width: width,
 +
                height: height
 +
            };
 +
        },
 +
        plugins: function () {
 +
            // run the plugin
 +
            $(this.el).turn({
 +
                gradients: true,
 +
                acceleration: true
 +
            });
 +
            // hide the body overflow
 +
            document.body.className = 'hide-overflow';
 +
        }
 +
    };
 +
 
 +
    module.init('book');
 +
}());
 +
</script>
-
<!-- JS import  WILL NEED CHANGED DONE LOCAL FOR BS -->
 
-
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
-
<script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 
</body>
</body>
</html>
</html>

Latest revision as of 22:49, 14 October 2014

Dundee 2014

Dundee 2014

Dundee 2014 Team

Retrieved from "http://2014.igem.org/Team:Dundee/Template/testpage"