Team:UCLondon/Templates/Content-Slide
From 2012e.igem.org
(Difference between revisions)
Line 230: | Line 230: | ||
var openBox4 = function () { | var openBox4 = function () { | ||
$('#shadow4').center(); | $('#shadow4').center(); | ||
- | var input = ' | + | |
+ | var input = | ||
+ | |||
+ | '<div id="impress"> | ||
+ | <div id="start" class="step" > | ||
+ | <p>Creating Stunning Visualizations</p> | ||
+ | <p>Impress.js </p> | ||
+ | <p class='hint_text'>Press <em>Spacebar</em> or Tab To Get Started</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide1" class="step" data-x="-1200"> | ||
+ | <p>This Slide Moves From Left To Right</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide2" class="step" data-x="1200"> | ||
+ | <p>This Slide Moves From Right To Left</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide3" class="step" data-x="2200" data-y="500"> | ||
+ | <p>This Slide Moves From Right To Left and Bottom To Top</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide4" class="step" data-x="2200" data-y="-500"> | ||
+ | <p>This Slide Moves Top To Bottom</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide5" class="step" data-x="3200" data-rotate="150"> | ||
+ | <p>This Slide Rotates Clockwise Around z-axis</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide6" class="step" data-x="6200" data-scale='3'> | ||
+ | <p>This Slide Scales 3 Times</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide7" class="step" data-x="4200" data-y='1500' data-z='1500'> | ||
+ | <p>Away</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide8" class="step" data-x="4900" data-y='1500' data-z='100'> | ||
+ | <p>Towards</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide9" class="step" data-x="5600" data-y='1500' data-z='-1500'> | ||
+ | <p>Futher Towards</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="slide10" class="step" data-x="6600" data-y='3000' data-scale='10'> | ||
+ | <p>Visualization Slide Positions</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="fallback-message"> | ||
+ | <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p> | ||
+ | <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <script type="text/javascript" src="http://1stwebdesigner.com/demos/Visualization/js/impress.js"></script> | ||
+ | <script type="text/javascript">impress().init();</script>'; | ||
$('#shadow4').toggle('slow', function() { | $('#shadow4').toggle('slow', function() { | ||
Line 263: | Line 323: | ||
if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ | if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ | ||
- | $('#shadow4').children('#box-content4').html(loading); | + | //$('#shadow4').children('#box-content4').html(loading); |
(d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); | (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); | ||
(d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); | (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); |
Revision as of 03:01, 19 October 2012
'; $('#shadow4').toggle('slow', function() { $(this).children('#box-content4').html(input); }); return false; } var closeBox4 = function() { var d = document; if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen(); } $('#shadow4').toggle('slow', function() { $(this).children('#box-content4').html(loading); }); } /* fullscreen functions */ var fstoggle = function() { var d = document; if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ //$('#shadow4').children('#box-content4').html(loading); (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen(); } else { var e = document.getElementById('shadow4'); (e.requestFullScreen == undefined) ? "" : e.requestFullScreen(); (e.webkitRequestFullScreen == undefined) ? "" : e.webkitRequestFullScreen(); (e.mozRequestFullScreen == undefined) ? "" : e.mozRequestFullScreen(); } } $(document).ready(function(event) { loading = $('#load2').parent().html(); $('body').off('click', '.play', openBox2); $('body').on('click', '.play', openBox2); $('body').off('click', '#close-box2', closeBox2); $('body').on('click', '#close-box2', closeBox2); /* slide deck box */ $('body').off('click', '.run-slides', openBox4); $('body').on('click', '.run-slides', openBox4); $('body').off('click', '#close-box4', closeBox4); $('body').on('click', '#close-box4', closeBox4); /* fullscreen mode */ $('body').off('click', '#fullscreen',fstoggle); $('body').on('click', '#fullscreen', fstoggle); });