Team:Virginia/Test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{Template:Team:Virginia:Test}}
<html>
<html>
-
  <head>
+
<head>
-
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+
<meta name="viewport" content="width = 1050, user-scalable = no" />
-
    <script type="text/javascript">
+
<script type="text/javascript" src="http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
-
      google.load("visualization", "1", {packages:["geochart"]});
+
<script type="text/javascript" src="http://www.turnjs.com/extras/modernizr.2.5.3.min.js"></script>
-
      google.setOnLoadCallback(drawRegionsMap);
+
</head>
 +
<body>
-
      function drawRegionsMap() {
+
<div class="flipbook-viewport">
 +
<div class="container">
 +
<div class="flipbook">
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/f/f6/VGEM_39.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/e/e8/VGEM_31.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/f/f6/VGEM_39.jpg)"></div>
 +
<div style="background-image:url(https://static.igem.org/mediawiki/2014/e/e8/VGEM_31.jpg)"></div>
 +
</div>
 +
</div>
 +
</div>
-
          var data = google.visualization.arrayToDataTable([
 
-
              ['Region Code', 'Sub-Continent', 'Popularity'],
 
-
              ['005', 'South America', 200],
 
-
              ['154', 'Northern Europe', 150],
 
-
              ['034', 'Southern Asia', 80],
 
-
          ]);
 
 +
<script type="text/javascript">
 +
function loadApp() {
-
          var data2 = google.visualization.arrayToDataTable([
+
// Create the flipbook
-
              ['Region Code', 'Sub-Continent', 'Popularity'],
+
-
              ['005', 'South America', 200],
+
-
              ['154', 'Northern Europe', 150],
+
-
              ['034', 'Southern Asia', 80],
+
-
          ]);
+
-
          var options = {
+
$('.flipbook').turn({
-
              resolution: 'subcontinents'
+
// Width
-
          };
+
-
          var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
+
width:922,
-
          var chart2 = new google.visualization.GeoChart(document.getElementById('regions_div2'));
+
 +
// Height
-
          chart.draw(data, options);
+
height:600,
-
          chart2.draw(data2, options);
+
// Elevation
-
      }
+
-
    </script>
+
 +
elevation: 50,
 +
 +
// Enable gradients
-
  </head>
+
gradients: true,
-
  <body>
+
-
    <div id="regions_div"></div>
+
// Auto center this flipbook
-
    <div id="regions_div2"></div>
+
 
-
  </body>
+
autoCenter: true
 +
 
 +
});
 +
}
 +
 
 +
// Load the HTML4 version if there's not CSS transform
 +
 
 +
 
 +
$(document).keydown(function(e){
 +
 
 +
var previous = 37, next = 39, esc = 27;
 +
 
 +
switch (e.keyCode) {
 +
case previous:
 +
 
 +
// left arrow
 +
$('.flipbook').turn('previous');
 +
e.preventDefault();
 +
 
 +
break;
 +
case next:
 +
 
 +
//right arrow
 +
$('.flipbook').turn('next');
 +
e.preventDefault();
 +
 
 +
break;
 +
case esc:
 +
 +
$('.flipbook-viewport').zoom('zoomOut');
 +
e.preventDefault();
 +
 
 +
break;
 +
}
 +
});
 +
 
 +
yepnope({
 +
test : Modernizr.csstransforms,
 +
yep: ['http://www.thebalancingact.com/assets/js/turn/lib/turn.js'],
 +
nope: ['http://www.thebalancingact.com/assets/js/turn/lib/turn.html4.min.js'],
 +
both: ['http://www.thebalancingact.com/assets/css/turn/basic/basic.css'],
 +
complete: loadApp
 +
});
 +
 
 +
</script>
 +
 
 +
</body>
</html>
</html>

Revision as of 04:15, 16 October 2014

Retrieved from "http://2014.igem.org/Team:Virginia/Test"