Team:Dundee/Template/testpage
From 2014.igem.org
(Difference between revisions)
(5 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
<head> | <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 --> | <!-- jQuery --> | ||
- | <script src="https://2014.igem.org/Team:Dundee/js/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 { | |
- | 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: | + | height: 100%; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .book .page img { | |
- | + | max-width: 100%; | |
- | + | height: 100%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <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> | </script> |
Latest revision as of 22:49, 14 October 2014