|
|
| (484 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <!DOCTYPE html> | + | <html class="demo-1"> |
| - | <html lang="en" class="no-js demo-1">
| + | <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'> |
| - | <head>
| + | <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> |
| - | <meta charset="UTF-8" />
| + | <div id="background"> |
| - | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
| + | |
| - | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| + | <!-- begin header--> |
| - | <title>BookBlock: A Content Flip Plugin - Demo 1</title>
| + | <div id="header-wrapper"> |
| - | <meta name="description" content="Bookblock: A Content Flip Plugin - Demo 1" />
| + | <div id="top-header"> |
| - | <meta name="keywords" content="javascript, jquery, plugin, css3, flip, page, 3d, booklet, book, perspective" />
| + | <div> |
| - | <meta name="author" content="Codrops" />
| + | <img id="header-image" src="https://static.igem.org/mediawiki/2014/7/77/HokkaidoU_Top_Header.png"> |
| - | <link rel="shortcut icon" href="../favicon.ico">
| + | </div> |
| - | <link rel="stylesheet" type="text/css" href="css/default.css" />
| + | </div> |
| - | <link rel="stylesheet" type="text/css" href="css/bookblock.css" />
| + | </div> |
| - | <!-- custom demo style -->
| + | <!-- end header--> |
| - | <link rel="stylesheet" type="text/css" href="css/demo1.css" />
| + | <!-- begin Menu--> |
| - | <script>
| + | <div class="box"> |
| - | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
| + | <div id="box-wrapper"> |
| - | * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
| + | <a href="http://igemhokkaidou.wordpress.com"><img style="position:relative; float:left; left:150px;" src="https://static.igem.org/mediawiki/2014/7/75/HokkaidoU_top_logo.png"></a> |
| - | */;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
| + | <ul id="ldd_menu" class="ldd_menu"> |
| - | </script>
| + | <li> |
| - | </head>
| + | <span class="menu-list" ><span style="position:relative; top:10px;" href="#">Top</span></span><!-- Increases to 510px in width--> |
| - | <body>
| + | </li> |
| - | <div class="container">
| + | <li class="menu_button"> |
| - | <!-- Top Navigation -->
| + | <span class="menu-list"><span style="position:relative; top:10px;">RNA in Love</span></span><!-- Increases to 510px in width--> |
| - | <div class="codrops-top clearfix">
| + | <div class="ldd_submenu" style="left:-415px; width:970px;"> |
| - | <a class="codrops-icon codrops-icon-prev" href=" http:// tympanus. net/ codrops/ 2012/08/29/multiple-area-charts-with-d3-js/"> <span>Previous Demo</ span></ a> | + | <ul style="margin-left:20px;"> |
| - | < span class=" right"><a class="codrops-icon codrops-icon-drop" href=" http:// tympanus. net/ codrops/ 2012/09/03/bookblock-a-content-flip-plugin/"> <span>Back to the Codrops Article</span></a></ span> | + | <li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Overview/Background">Overview</a></li> |
| - | </div>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Overview/Background">Background</a></li> |
| - | <header>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Overview/Achievements">Achievements</a></li> |
| - | <h1>BookBlock <span>A Content Flip Plugin</span></h1>
| + | </ul> |
| - | <nav class="codrops-demos">
| + | <ul> |
| - | <a class="current-demo" href=" index. html"> Demo 1</a> | + | <li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem">H-stem System</a></li> |
| - | <a href="index2.html">Demo 2</a>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#Overview">Overview</a></li> |
| - | <a href=" index3. html"> Demo 3</a> | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#asRNA_stabilization">Stabilization</a></li> |
| - | <a href="index4.html">Demo 4</a>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#Modelling">Modelling</a></li> |
| - | <a href=" index5. html"> Demo 5</a> | + | <li class=" ldd_contents" ><a href=" https:/ /2014. igem. org/Team: HokkaidoU_Japan/Projects/H_Stem#Construct" >Construct</a >< /li> |
| - | </nav>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#How_To_Use">How To Use</a></li> |
| - | </header>
| + | </ul> |
| - | <div class="main clearfix">
| + | <ul> |
| - | <div class="bb-custom-wrapper">
| + | < li class=" ldd_heading"><a href=" https:// 2014. igem.org/ Team:HokkaidoU_Japan/ Projects/ asB0034"> Anti-sense B0034</ a></ li> |
| - | <h3>Illustrations by <a href=" http:// dribbble. com/ kevinhowdeshell"> Kevin Howdeshell</a></ h3> | + | < li class=" ldd_contents"><a href=" https:// 2014. igem.org/ Team:HokkaidoU_Japan/ Projects/ asB0034"> Overview</a></ li> |
| - | <div id="bb-bookblock" class="bb-bookblock">
| + | < li class=" ldd_contents"><a href=" https://2014.igem. org/Team:HokkaidoU_Japan/Projects/asB0034#Method"> Method</a ></li> |
| - | <div class="bb-item">
| + | < li class=" ldd_contents"><a href=" https://2014. igem.org/Team:HokkaidoU_Japan/Projects/asB0034#Results"> Results</a ></li> |
| - | <a href=" http:// drbl. in/ bKVq"><img src="images/ demo1/ 1.jpg" alt="image01"/></a> | + | < li class=" ldd_contents"><a href=" https://2014. igem.org/Team:HokkaidoU_Japan/Projects/asB0034#Conclusion"> Conclusion</a></ li> |
| - | </div>
| + | </ul> |
| - | <div class="bb-item">
| + | <ul> |
| - | <a href=" http:// drbl. in/ ciTX"><img src="images/ demo1/ 2.jpg" alt="image02"/></a> | + | < li class=" ldd_heading"><a href=" https:// 2014. igem.org/Team:HokkaidoU_Japan/Projects/ Length"> Length Variation</a></ li> |
| - | </div>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Length">Overview</a></li> |
| - | <div class="bb-item">
| + | < li class=" ldd_contents"><a href=" https:// 2014. igem.org/ Team:HokkaidoU_Japan/ Projects/ Length#Method"> Method</a></ li> |
| - | <a href=" http:// drbl. in/ cLHx"><img src="images/ demo1/ 3.jpg" alt="image03"/></a> | + | < li class=" ldd_contents"><a href=" https:// 2014. igem.org/ Team:HokkaidoU_Japan/ Projects/ Length#Results"> Results</a></ li> |
| - | </div> | + | < li class=" ldd_contents"><a href=" https:// 2014. igem.org/ Team:HokkaidoU_Japan/ Projects/ Length#Conclusion"> Conclusion</a ></li> |
| - | <div class="bb-item"> | + | </ul> |
| - | <a href=" http:// drbl. in/ bAfn">< img src="images/ demo1/ 4.jpg" alt=" image04"/></a> | + | <ul> |
| - | </div>
| + | <li class=" ldd_heading"><a href=" https:// 2014. igem.org/ Team:HokkaidoU_Japan/Materials"> Extra Materials</ a></ li> |
| - | <div class="bb-item">
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Parts">Parts</a></li> |
| - | <a href=" http:// drbl. in/ dcbE">< img src="images/ demo1/ 5.jpg" alt=" image05"/></a> | + | < li class=" ldd_contents"><a href=" https:// 2014. igem.org/Team:HokkaidoU_Japan/ Notebook"> Notebook</ a></ li> |
| - | </div> | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Safety">Safety</a></li> |
| | + | </ul> |
| | </div> | | </div> |
| - | <nav>
| + | </li> |
| - | <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
| + | <li class="menu_button"> |
| - | <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
| + | <span class="menu-list"><span style="position:relative; top:10px;">Outreach</span></span> |
| - | <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a> | + | <div class="ldd_submenu" style="width:590px; left:-230px;"> |
| - | <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a> | + | <ul style="margin-left:20px;"> |
| - | </nav>
| + | <li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Univ_festival">Univ. Festival</a></li> |
| - | </div>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Univ_festival#Education">Education</a></li> |
| - | </div>
| + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Univ_festival#Survey">Survey</a></li> |
| - | </div><!-- /container -->
| + | </ul> |
| - | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
| + | <ul> |
| - | <script>
| + | <li class="ldd_heading"><a href=" https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Survey" >High School</a></li> |
| - | (function() { | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Survey#Education">Education</a></li> |
| | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Survey#Survey">Survey</a></li> |
| | + | </ul> |
| | + | <ul> |
| | + | <li class="ldd_heading"><a href=" https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Discussion" >Discussion</a></li> |
| | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Discussion#Background">Background</a></li> |
| | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Discussion#Evaluation">Evaluation</a></li> |
| | + | </ul> |
| | + | </div> |
| | + | </li> |
| | + | <li class="menu_button"> |
| | + | <span class="menu-list"><span style="position:relative; top:10px;">About Us</span></span> |
| | + | <div class="ldd_submenu" style="width:204px; left: -30px;"> |
| | + | <ul style="margin-left:20px;"> |
| | + | <li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/About_Us">About Us</a></li> |
| | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/About_Us#Acknowledgements">Acknowledgements</a></li> |
| | + | <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/About_Us#Team">Team</a></li> |
| | + | </ul> |
| | + | </div> |
| | + | </li> |
| | + | </ul> |
| | + | <a href="https://igem.org/Main_Page"><img style="position:relative;float:right;top:-40px;right:135px;" src="https://static.igem.org/mediawiki/2014/0/07/HokkaidoU_Top_HQ.png"></a> |
| | | | |
| - | var event = jQuery.event,
| + | </div> |
| | + | </div> |
| | | | |
| - | //helper that finds handlers by type and calls back a function, this is basically handle
| + | <!--end menu--> |
| - | // events - the events object
| + | <div class="container"> |
| - | // types - an array of event types to look for
| + | |
| - | // callback(type, handlerFunc, selector) - a callback
| + | |
| - | // selector - an optional selector to filter with, if there, matches by selector
| + | |
| - | // if null, matches anything, otherwise, matches with no selector
| + | |
| - | findHelper = function( events, types, callback, selector ) {
| + | |
| - | var t, type, typeHandlers, all, h, handle,
| + | |
| - | namespaces, namespace,
| + | |
| - | match;
| + | |
| - | for ( t = 0; t < types.length; t++ ) {
| + | |
| - | type = types[t];
| + | |
| - | all = type.indexOf(".") < 0;
| + | |
| - | if (!all ) {
| + | |
| - | namespaces = type.split(".");
| + | |
| - | type = namespaces.shift();
| + | |
| - | namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)");
| + | |
| - | }
| + | |
| - | typeHandlers = (events[type] || []).slice(0);
| + | |
| | | | |
| - | for ( h = 0; h < typeHandlers.length; h++ ) { | + | <div class="bb-custom-wrapper"> |
| - | handle = typeHandlers[h];
| + | <div style="margin: 100px 0 -80px;"> |
| - |
| + | <h1 style="font-family: 'Special Elite', cursive; font-size: 48px;">~ RNA in love ~</h1> |
| - | match = (all || namespace.test(handle.namespace));
| + | <h3 style="font-family: 'Special Elite', cursive; font-size: 24px;">This year iGEM HokkaidoU invites you to a lovely story ...</h3> |
| - |
| + | </div> |
| - | if(match){ | + | <div id="bb-bookblock" class="bb-bookblock"> |
| - | if(selector){
| + | <div class="bb-item"> |
| - | if (handle.selector === selector ) {
| + | <div class="left-page-top"></div> |
| - | callback(type, handle.origHandler || handle.handler);
| + | <div class="right-page-top"> |
| - | }
| + | <img class="top-picture" src="https://static.igem.org/mediawiki/2014/9/90/Cover1.png"> |
| - | } else if (selector === null){
| + | </div> |
| - | callback(type, handle.origHandler || handle.handler, handle.selector);
| + | </div> |
| - | }
| + | |
| - | else if (!handle.selector ) {
| + | |
| - | callback(type, handle.origHandler || handle.handler);
| + | |
| - |
| + | |
| - | }
| + | |
| - | }
| + | |
| - |
| + | |
| - |
| + | |
| - | }
| + | |
| - | }
| + | |
| - | };
| + | |
| | | | |
| - | /**
| + | <div class="bb-item"> |
| - | * Finds event handlers of a given type on an element.
| + | <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png"> |
| - | * @param {HTMLElement} el
| + | <div class="left-page"> |
| - | * @param {Array} types an array of event names
| + | <div class="text-box"> |
| - | * @param {String} [selector] optional selector
| + | <p> |
| - | * @return {Array} an array of event handlers
| + | This is a love story of one shy girl called Annie. She was very hesitant, but her passion for him was second to none. One day, Cupid found Annie and helped her. Well, how would the future of her romance going to be? |
| - | */
| + | |
| - | event.find = function( el, types, selector ) {
| + | |
| - | var events = ( $._data(el) || {} ).events,
| + | |
| - | handlers = [],
| + | |
| - | t, liver, live;
| + | |
| | | | |
| - | if (!events ) {
| + | </p> |
| - | return handlers;
| + | </div> |
| - | }
| + | </div> |
| - | findHelper(events, types, function( type, handler ) {
| + | <div class="right-page"> |
| - | handlers.push(handler);
| + | <div class="page-vertical-top"> |
| - | }, selector);
| + | <div class="left-up"> |
| - | return handlers;
| + | <img style="width:101px;margin-bottom:10px; top:20px;" class="character-pic" src="https://static.igem.org/mediawiki/2014/c/c6/HokkaidoU_Top_Book_as.png"> |
| - | };
| + | <p style="line-height:10px; font-weight:bold; position:relative; top:10px;"> |
| - | /**
| + | Annie / asRNA |
| - | * Finds all events. Group by selector.
| + | </p> |
| - | * @param {HTMLElement} el the element
| + | <p style="line-height:20px; font-size:15px; position:relative; top:10px;"> |
| - | * @param {Array} types event types
| + | The shiest girl in the village, but has a feeling to Mike in secrecy. |
| - | */
| + | </p> |
| - | event.findBySelector = function( el, types ) {
| + | </div> |
| - | var events = $._data(el).events,
| + | |
| - | selectors = {},
| + | |
| - | //adds a handler for a given selector and event
| + | |
| - | add = function( selector, event, handler ) {
| + | |
| - | var select = selectors[selector] || (selectors[selector] = {}),
| + | |
| - | events = select[event] || (select[event] = []);
| + | |
| - | events.push(handler);
| + | |
| - | };
| + | |
| | | | |
| - | if (!events ) {
| + | <div class="right-up"> |
| - | return selectors;
| + | <img class="character-pic" src="https://static.igem.org/mediawiki/2014/b/b8/HokkaidoU_Top_Book_mRNA.png"> |
| - | }
| + | <p style="line-height:10px; font-weight:bold; position:relative; top:10px;"> |
| - | //first check live:
| + | Mike / mRNA |
| - | /*$.each(events.live || [], function( i, live ) {
| + | </p> |
| - | if ( $.inArray(live.origType, types) !== -1 ) {
| + | <p style="line-height:20px; font-size:15px; position:relative; top:10px;"> |
| - | add(live.selector, live.origType, live.origHandler || live.handler);
| + | The most popular boy in the village, but a little indecisive. |
| - | }
| + | </p> |
| - | });*/
| + | </div> |
| - | //then check straight binds
| + | |
| - | findHelper(events, types, function( type, handler, selector ) {
| + | |
| - | add(selector || "", type, handler);
| + | |
| - | }, null);
| + | |
| | | | |
| - | return selectors;
| + | </div> |
| - | };
| + | |
| - | event.supportTouch = "ontouchend" in document;
| + | |
| - |
| + | |
| - | $.fn.respondsTo = function( events ) {
| + | |
| - | if (!this.length ) {
| + | |
| - | return false;
| + | |
| - | } else {
| + | |
| - | //add default ?
| + | |
| - | return event.find(this[0], $.isArray(events) ? events : [events]).length > 0;
| + | |
| - | }
| + | |
| - | };
| + | |
| - | $.fn.triggerHandled = function( event, data ) {
| + | |
| - | event = (typeof event == "string" ? $.Event(event) : event);
| + | |
| - | this.trigger(event, data);
| + | |
| - | return event.handled;
| + | |
| - | };
| + | |
| - | /**
| + | |
| - | * Only attaches one event handler for all types ...
| + | |
| - | * @param {Array} types llist of types that will delegate here
| + | |
| - | * @param {Object} startingEvent the first event to start listening to
| + | |
| - | * @param {Object} onFirst a function to call
| + | |
| - | */
| + | |
| - | event.setupHelper = function( types, startingEvent, onFirst ) {
| + | |
| - | if (!onFirst ) {
| + | |
| - | onFirst = startingEvent;
| + | |
| - | startingEvent = null;
| + | |
| - | }
| + | |
| - | var add = function( handleObj ) {
| + | |
| | | | |
| - | var bySelector, selector = handleObj.selector || "";
| + | <div class="page-vertical-bottom"> |
| - | if ( selector ) {
| + | <div class="left-bottom"> |
| - | bySelector = event.find(this, types, selector);
| + | <img class="character-pic" src="https://static.igem.org/mediawiki/2014/0/0f/HokkaidoU_Top_Book_Ribosome.png"> |
| - | if (!bySelector.length ) {
| + | <p style="line-height:10px; font-weight:bold; position:relative; top:10px;"> |
| - | $(this).delegate(selector, startingEvent, onFirst);
| + | Rachel / ribosome |
| - | }
| + | </p> |
| - | }
| + | <p style="line-height:20px; font-size:15px; position:relative; top:10px;"> |
| - | else {
| + | The most confident girl in the village. She loves Mike and approaches him positively. |
| - | //var bySelector = event.find(this, types, selector);
| + | </p> |
| - | if (!event.find(this, types, selector).length ) {
| + | </div> |
| - | event.add(this, startingEvent, onFirst, {
| + | |
| - | selector: selector,
| + | |
| - | delegate: this
| + | |
| - | });
| + | |
| - | }
| + | |
| | | | |
| - | }
| + | <div class="right-bottom"> |
| | + | <img style="top:40px;" class="character-pic" src="https://static.igem.org/mediawiki/2014/8/8f/HokkaidoU_Top_Book_cupid.png"> |
| | + | <p style="line-height:10px; font-weight:bold; position:relative; top:60px;"> |
| | + | Cupid / HokkaidoU |
| | + | </p> |
| | + | <p style="line-height:20px; font-size:15px; position:relative; top:60px;"> |
| | + | A wonderful sprite in the village. He sometimes helps a villager whimsically. |
| | + | </p> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| - | },
| |
| - | remove = function( handleObj ) {
| |
| - | var bySelector, selector = handleObj.selector || "";
| |
| - | if ( selector ) {
| |
| - | bySelector = event.find(this, types, selector);
| |
| - | if (!bySelector.length ) {
| |
| - | $(this).undelegate(selector, startingEvent, onFirst);
| |
| - | }
| |
| - | }
| |
| - | else {
| |
| - | if (!event.find(this, types, selector).length ) {
| |
| - | event.remove(this, startingEvent, onFirst, {
| |
| - | selector: selector,
| |
| - | delegate: this
| |
| - | });
| |
| - | }
| |
| - | }
| |
| - | };
| |
| - | $.each(types, function() {
| |
| - | event.special[this] = {
| |
| - | add: add,
| |
| - | remove: remove,
| |
| - | setup: function() {},
| |
| - | teardown: function() {}
| |
| - | };
| |
| - | });
| |
| - | };
| |
| - | })(jQuery);
| |
| - | (function($){
| |
| - | var isPhantom = /Phantom/.test(navigator.userAgent),
| |
| - | supportTouch = !isPhantom && "ontouchend" in document,
| |
| - | scrollEvent = "touchmove scroll",
| |
| - | // Use touch events or map it to mouse events
| |
| - | touchStartEvent = supportTouch ? "touchstart" : "mousedown",
| |
| - | touchStopEvent = supportTouch ? "touchend" : "mouseup",
| |
| - | touchMoveEvent = supportTouch ? "touchmove" : "mousemove",
| |
| - | data = function(event){
| |
| - | var d = event.originalEvent.touches ?
| |
| - | event.originalEvent.touches[ 0 ] :
| |
| - | event;
| |
| - | return {
| |
| - | time: (new Date).getTime(),
| |
| - | coords: [ d.pageX, d.pageY ],
| |
| - | origin: $( event.target )
| |
| - | };
| |
| - | };
| |
| | | | |
| - | /**
| + | <div class="bb-item"> |
| - | * @add jQuery.event.swipe
| + | <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png"> |
| - | */
| + | <div class="page-vertical-top"> |
| - | var swipe = $.event.swipe = {
| + | <div style="width:70%; left:50px; top:77px;font-size:23px; line-height:40px;" class="left-page"> |
| - | /**
| + | Once upon a time, there was a girl, Annie. She fell in love with Mike who was the darling of the town. But she had a formidable rival, Rachel. She was very positive to her love so that she always wanted to monopolize Mike. |
| - | * @attribute delay
| + | </div> |
| - | * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500.
| + | <div class="right-page"> |
| - | *
| + | <img style="left:745px; width:170px;top:20px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/3/3d/HokkaidoU_Top_Picture_watch.png"> |
| - | * A user must perform the swipe motion in this much time.
| + | </div> |
| - | */
| + | </div> |
| - | delay : 500,
| + | <div class="page-vertical-bottom"> |
| - | /**
| + | <div class="left-page"> |
| - | * @attribute max
| + | <img style="bottom:12px;left:-50px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/d/d4/HokkaidoU_Top_Picutre_mRNA-Ribosome.png"> |
| - | * The maximum distance the pointer must travel in pixels. The default is 75 pixels.
| + | </div> |
| - | */
| + | <div style="width:59%; left:350px; top:15px;font-size:23px; line-height:40px;" class="right-page"> |
| - | max : 75,
| + | Contrasting to her, as Annie was too shy, it was difficult for her only to approach to Mike. Nevertheless, she never stopped thinking about Mike. Cupid found such poor Annie. |
| - | /**
| + | </div> |
| - | * @attribute min
| + | </dvi> |
| - | * The minimum distance the pointer must travel in pixels. The default is 30 pixels.
| + | </div> |
| - | */
| + | </div> |
| - | min : 30
| + | |
| - | };
| + | |
| | | | |
| - | $.event.setupHelper( [
| |
| | | | |
| - | /**
| |
| - | * @hide
| |
| - | * @attribute swipe
| |
| - | */
| |
| - | "swipe",
| |
| - | /**
| |
| - | * @hide
| |
| - | * @attribute swipeleft
| |
| - | */
| |
| - | 'swipeleft',
| |
| - | /**
| |
| - | * @hide
| |
| - | * @attribute swiperight
| |
| - | */
| |
| - | 'swiperight',
| |
| - | /**
| |
| - | * @hide
| |
| - | * @attribute swipeup
| |
| - | */
| |
| - | 'swipeup',
| |
| - | /**
| |
| - | * @hide
| |
| - | * @attribute swipedown
| |
| - | */
| |
| - | 'swipedown'], touchStartEvent, function(ev){
| |
| - | var
| |
| - | // update with data when the event was started
| |
| - | start = data(ev),
| |
| - | stop,
| |
| - | delegate = ev.delegateTarget || ev.currentTarget,
| |
| - | selector = ev.handleObj.selector,
| |
| - | entered = this;
| |
| - |
| |
| - | function moveHandler(event){
| |
| - | if ( !start ) {
| |
| - | return;
| |
| - | }
| |
| - | // update stop with the data from the current event
| |
| - | stop = data(event);
| |
| | | | |
| - | // prevent scrolling
| + | <div class="bb-item"> |
| - | if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) {
| + | <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png"> |
| - | event.preventDefault();
| + | <div class="page-vertical-top"> |
| - | }
| + | <div style="width:30%;" class="left-page"> |
| - | };
| + | <img style="top:-2px; left:-43px; width:320px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/d/dc/HokkaidoU_Top_Book_Cupid.png"> |
| | + | </div> |
| | + | <div style="width:70%; right:5%; top:90px;font-size:23px; line-height:40px;" class="right-page"> |
| | + | As Cupid wanted to help Annie’s love, he casted a spell over her. This was the wonderful magic STEM. Enchanted, her clothes turned into greatly beautiful clothes. |
| | + | </div> |
| | + | </div> |
| | + | <img style="position:absolute; top:225px; left:199px; width:488px; border-radius:50px;" src="https://static.igem.org/mediawiki/2014/3/30/HokkaidoU_Top_Book_kirakira.png"> |
| | + | <div class="page-vertical-bottom"> |
| | + | <div style="width:65%; left:30px;font-size:23px; line-height:40px; top:41px;" class="left-page"> |
| | + | She was very surprised to look at herself in a mirror because the girl in a mirror appeared like not herself to her. Owing to wonderful magic, she was able to have confidence and a little courage to go to Mike. |
| | + | </div> |
| | + | <div class="right-page"> |
| | + | <img style="left:633px; bottom:24px; width:362px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/e/e4/HokkaidoU_Top_Book_Transform.png"> |
| | + | </div> |
| | | | |
| - | // Attach to the touch move events
| + | </div> |
| - | $(document.documentElement).bind(touchMoveEvent, moveHandler)
| + | </div> |
| - | .one(touchStopEvent, function(event){
| + | |
| - | $(this).unbind( touchMoveEvent, moveHandler);
| + | |
| - | // if start and stop contain data figure out if we have a swipe event
| + | |
| - | if ( start && stop ) {
| + | |
| - | // calculate the distance between start and stop data
| + | |
| - | var deltaX = Math.abs(start.coords[0] - stop.coords[0]),
| + | |
| - | deltaY = Math.abs(start.coords[1] - stop.coords[1]),
| + | |
| - | distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
| + | |
| | | | |
| - | // check if the delay and distance are matched
| |
| - | if ( stop.time - start.time < swipe.delay && distance >= swipe.min ) {
| |
| - | var events = ['swipe'];
| |
| - | // check if we moved horizontally
| |
| - | if( deltaX >= swipe.min && deltaY < swipe.min) {
| |
| - | // based on the x coordinate check if we moved left or right
| |
| - | events.push( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" );
| |
| - | } else
| |
| - | // check if we moved vertically
| |
| - | if(deltaY >= swipe.min && deltaX < swipe.min){
| |
| - | // based on the y coordinate check if we moved up or down
| |
| - | events.push( start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" );
| |
| - | }
| |
| | | | |
| - | // trigger swipe events on this guy
| + | <div class="bb-item"> |
| - | $.each($.event.find(delegate, events, selector), function(){
| + | <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png"> <div style="left:100px; top:89px; width:80%;font-size:23px; line-height:40px;" class="page-vertical-top"> |
| - | this.call(entered, ev, {start : start, end: stop}) | + | Mike fell in love with changed Annie at a first sight. |
| - | })
| + | “Just a small change of myself makes my world more wonderful than I have dreamed ever.” |
| - |
| + | Although Annie couldn’t hide her surprise, she felt very happy. |
| - | }
| + | And then, Annie and Mike were together happily forever. |
| - | }
| + | |
| - | // reset start and stop
| + | |
| - | start = stop = undefined;
| + | |
| - | })
| + | |
| - | });
| + | |
| - | | + | |
| - | })(jQuery)
| + | |
| - | </script>
| + | |
| - | <script>
| + | |
| - | /**
| + | |
| - | * jquery.bookblock.js v2.0.1
| + | |
| - | * http://www.codrops.com
| + | |
| - | *
| + | |
| - | * Licensed under the MIT license.
| + | |
| - | * http://www.opensource.org/licenses/mit-license.php
| + | |
| - | *
| + | |
| - | * Copyright 2013, Codrops
| + | |
| - | * http://www.codrops.com
| + | |
| - | */
| + | |
| - | ;( function( $, window, undefined ) {
| + | |
| - | | + | |
| - | 'use strict';
| + | |
| - | | + | |
| - | // global
| + | |
| - | var $window = $(window),
| + | |
| - | Modernizr = window.Modernizr;
| + | |
| - | | + | |
| - | // https://gist.github.com/edankwan/4389601
| + | |
| - | Modernizr.addTest('csstransformspreserve3d', function () {
| + | |
| - | var prop = Modernizr.prefixed('transformStyle');
| + | |
| - | var val = 'preserve-3d';
| + | |
| - | var computedStyle;
| + | |
| - | if(!prop) return false;
| + | |
| - | | + | |
| - | prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
| + | |
| - | | + | |
| - | Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
| + | |
| - | computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
| + | |
| - | });
| + | |
| - | | + | |
| - | return (computedStyle === val);
| + | |
| - | });
| + | |
| - | | + | |
| - | /*
| + | |
| - | * debouncedresize: special jQuery event that happens once after a window resize
| + | |
| - | *
| + | |
| - | * latest version and complete README available on Github:
| + | |
| - | * https://github.com/louisremi/jquery-smartresize
| + | |
| - | *
| + | |
| - | * Copyright 2012 @louis_remi
| + | |
| - | * Licensed under the MIT license.
| + | |
| - | *
| + | |
| - | * This saved you an hour of work?
| + | |
| - | * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
| + | |
| - | */
| + | |
| - | var $event = $.event,
| + | |
| - | $special,
| + | |
| - | resizeTimeout;
| + | |
| - | | + | |
| - | $special = $event.special.debouncedresize = {
| + | |
| - | setup: function() {
| + | |
| - | $( this ).on( "resize", $special.handler );
| + | |
| - | },
| + | |
| - | teardown: function() {
| + | |
| - | $( this ).off( "resize", $special.handler );
| + | |
| - | },
| + | |
| - | handler: function( event, execAsap ) {
| + | |
| - | // Save the context
| + | |
| - | var context = this,
| + | |
| - | args = arguments,
| + | |
| - | dispatch = function() {
| + | |
| - | // set correct event type
| + | |
| - | event.type = "debouncedresize";
| + | |
| - | $event.dispatch.apply( context, args );
| + | |
| - | };
| + | |
| - | | + | |
| - | if ( resizeTimeout ) {
| + | |
| - | clearTimeout( resizeTimeout );
| + | |
| - | }
| + | |
| - | | + | |
| - | execAsap ?
| + | |
| - | dispatch() :
| + | |
| - | resizeTimeout = setTimeout( dispatch, $special.threshold );
| + | |
| - | },
| + | |
| - | threshold: 150
| + | |
| - | };
| + | |
| - | | + | |
| - | $.BookBlock = function( options, element ) {
| + | |
| - | this.$el = $( element );
| + | |
| - | this._init( options );
| + | |
| - | };
| + | |
| - | | + | |
| - | // the options
| + | |
| - | $.BookBlock.defaults = {
| + | |
| - | // vertical or horizontal flip
| + | |
| - | orientation : 'vertical',
| + | |
| - | // ltr (left to right) or rtl (right to left)
| + | |
| - | direction : 'ltr',
| + | |
| - | // speed for the flip transition in ms
| + | |
| - | speed : 1000,
| + | |
| - | // easing for the flip transition
| + | |
| - | easing : 'ease-in-out',
| + | |
| - | // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
| + | |
| - | shadows : true,
| + | |
| - | // opacity value for the "shadow" on both sides (when the flipping page is over it)
| + | |
| - | // value : 0.1 - 1
| + | |
| - | shadowSides : 0.2,
| + | |
| - | // opacity value for the "shadow" on the flipping page (while it is flipping)
| + | |
| - | // value : 0.1 - 1
| + | |
| - | shadowFlip : 0.1,
| + | |
| - | // if we should show the first item after reaching the end
| + | |
| - | circular : false,
| + | |
| - | // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´
| + | |
| - | nextEl : '',
| + | |
| - | // if we want to specify a selector that triggers the prev() function
| + | |
| - | prevEl : '',
| + | |
| - | // autoplay. If true it overwrites the circular option to true
| + | |
| - | autoplay : false,
| + | |
| - | // time (ms) between page switch, if autoplay is true
| + | |
| - | interval : 3000,
| + | |
| - | // callback after the flip transition
| + | |
| - | // old is the index of the previous item
| + | |
| - | // page is the current item´s index
| + | |
| - | // isLimit is true if the current page is the last one (or the first one)
| + | |
| - | onEndFlip : function(old, page, isLimit) { return false; },
| + | |
| - | // callback before the flip transition
| + | |
| - | // page is the current item´s index
| + | |
| - | onBeforeFlip : function(page) { return false; }
| + | |
| - | };
| + | |
| - | | + | |
| - | $.BookBlock.prototype = {
| + | |
| - | _init : function(options) {
| + | |
| - | // options
| + | |
| - | this.options = $.extend( true, {}, $.BookBlock.defaults, options );
| + | |
| - | // orientation class
| + | |
| - | this.$el.addClass( 'bb-' + this.options.orientation );
| + | |
| - | // items
| + | |
| - | this.$items = this.$el.children( '.bb-item' ).hide();
| + | |
| - | // total items
| + | |
| - | this.itemsCount = this.$items.length;
| + | |
| - | // current item´s index
| + | |
| - | this.current = 0;
| + | |
| - | // previous item´s index
| + | |
| - | this.previous = -1;
| + | |
| - | // show first item
| + | |
| - | this.$current = this.$items.eq( this.current ).show();
| + | |
| - | // get width of this.$el
| + | |
| - | // this will be necessary to create the flipping layout
| + | |
| - | this.elWidth = this.$el.width();
| + | |
| - | var transEndEventNames = {
| + | |
| - | 'WebkitTransition': 'webkitTransitionEnd',
| + | |
| - | 'MozTransition': 'transitionend',
| + | |
| - | 'OTransition': 'oTransitionEnd',
| + | |
| - | 'msTransition': 'MSTransitionEnd',
| + | |
| - | 'transition': 'transitionend'
| + | |
| - | };
| + | |
| - | this.transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )] + '.bookblock';
| + | |
| - | // support css 3d transforms && css transitions && Modernizr.csstransformspreserve3d
| + | |
| - | this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d;
| + | |
| - | // initialize/bind some events
| + | |
| - | this._initEvents();
| + | |
| - | // start slideshow
| + | |
| - | if ( this.options.autoplay ) {
| + | |
| - | this.options.circular = true;
| + | |
| - | this._startSlideshow();
| + | |
| - | }
| + | |
| - | },
| + | |
| - | _initEvents : function() {
| + | |
| - | | + | |
| - | var self = this;
| + | |
| - | | + | |
| - | if ( this.options.nextEl !== '' ) {
| + | |
| - | $( this.options.nextEl ).on( 'click.bookblock touchstart.bookblock', function() { self._action( 'next' ); return false; } );
| + | |
| - | }
| + | |
| - | | + | |
| - | if ( this.options.prevEl !== '' ) {
| + | |
| - | $( this.options.prevEl ).on( 'click.bookblock touchstart.bookblock', function() { self._action( 'prev' ); return false; } );
| + | |
| - | }
| + | |
| - | | + | |
| - | $window.on( 'debouncedresize', function() {
| + | |
| - | // update width value
| + | |
| - | self.elWidth = self.$el.width();
| + | |
| - | } );
| + | |
| - | | + | |
| - | },
| + | |
| - | _action : function( dir, page ) {
| + | |
| - | this._stopSlideshow();
| + | |
| - | this._navigate( dir, page );
| + | |
| - | },
| + | |
| - | _navigate : function( dir, page ) {
| + | |
| - | | + | |
| - | if ( this.isAnimating ) {
| + | |
| - | return false;
| + | |
| - | }
| + | |
| - | | + | |
| - | // callback trigger
| + | |
| - | this.options.onBeforeFlip( this.current );
| + | |
| - | | + | |
| - | this.isAnimating = true;
| + | |
| - | // update current value
| + | |
| - | this.$current = this.$items.eq( this.current );
| + | |
| - | | + | |
| - | if ( page !== undefined ) {
| + | |
| - | this.current = page;
| + | |
| - | }
| + | |
| - | else if ( dir === 'next' && this.options.direction === 'ltr' || dir === 'prev' && this.options.direction === 'rtl' ) {
| + | |
| - | if ( !this.options.circular && this.current === this.itemsCount - 1 ) {
| + | |
| - | this.end = true;
| + | |
| - | }
| + | |
| - | else {
| + | |
| - | this.previous = this.current;
| + | |
| - | this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;
| + | |
| - | }
| + | |
| - | }
| + | |
| - | else if ( dir === 'prev' && this.options.direction === 'ltr' || dir === 'next' && this.options.direction === 'rtl' ) {
| + | |
| - | if ( !this.options.circular && this.current === 0 ) {
| + | |
| - | this.end = true;
| + | |
| - | }
| + | |
| - | else {
| + | |
| - | this.previous = this.current;
| + | |
| - | this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1;
| + | |
| - | }
| + | |
| - | }
| + | |
| - | | + | |
| - | this.$nextItem = !this.options.circular && this.end ? this.$current : this.$items.eq( this.current );
| + | |
| - |
| + | |
| - | if ( !this.support ) {
| + | |
| - | this._layoutNoSupport( dir );
| + | |
| - | } else {
| + | |
| - | this._layout( dir );
| + | |
| - | }
| + | |
| - | | + | |
| - | },
| + | |
| - | _layoutNoSupport : function(dir) {
| + | |
| - | this.$items.hide();
| + | |
| - | this.$nextItem.show();
| + | |
| - | this.end = false;
| + | |
| - | this.isAnimating = false;
| + | |
| - | var isLimit = dir === 'next' && this.current === this.itemsCount - 1 || dir === 'prev' && this.current === 0;
| + | |
| - | // callback trigger
| + | |
| - | this.options.onEndFlip( this.previous, this.current, isLimit );
| + | |
| - | },
| + | |
| - | // creates the necessary layout for the 3d structure
| + | |
| - | _layout : function(dir) {
| + | |
| - | | + | |
| - | var self = this,
| + | |
| - | // basic structure: 1 element for the left side.
| + | |
| - | $s_left = this._addSide( 'left', dir ),
| + | |
| - | // 1 element for the flipping/middle page
| + | |
| - | $s_middle = this._addSide( 'middle', dir ),
| + | |
| - | // 1 element for the right side
| + | |
| - | $s_right = this._addSide( 'right', dir ),
| + | |
| - | // overlays
| + | |
| - | $o_left = $s_left.find( 'div.bb-overlay' ),
| + | |
| - | $o_middle_f = $s_middle.find( 'div.bb-flipoverlay:first' ),
| + | |
| - | $o_middle_b = $s_middle.find( 'div.bb-flipoverlay:last' ),
| + | |
| - | $o_right = $s_right.find( 'div.bb-overlay' ),
| + | |
| - | speed = this.end ? 400 : this.options.speed;
| + | |
| - | | + | |
| - | this.$items.hide();
| + | |
| - | this.$el.prepend( $s_left, $s_middle, $s_right );
| + | |
| - |
| + | |
| - | $s_middle.css({
| + | |
| - | transitionDuration: speed + 'ms',
| + | |
| - | transitionTimingFunction : this.options.easing
| + | |
| - | }).on( this.transEndEventName, function( event ) {
| + | |
| - | if ( $( event.target ).hasClass( 'bb-page' ) ) {
| + | |
| - | self.$el.children( '.bb-page' ).remove();
| + | |
| - | self.$nextItem.show();
| + | |
| - | self.end = false;
| + | |
| - | self.isAnimating = false;
| + | |
| - | var isLimit = dir === 'next' && self.current === self.itemsCount - 1 || dir === 'prev' && self.current === 0;
| + | |
| - | // callback trigger
| + | |
| - | self.options.onEndFlip( self.previous, self.current, isLimit );
| + | |
| - | }
| + | |
| - | });
| + | |
| - | | + | |
| - | if ( dir === 'prev' ) {
| + | |
| - | $s_middle.addClass( 'bb-flip-initial' );
| + | |
| - | }
| + | |
| - | | + | |
| - | // overlays
| + | |
| - | if (this.options.shadows && !this.end) {
| + | |
| - | | + | |
| - | var o_left_style = (dir === 'next') ? {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'
| + | |
| - | } : {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear',
| + | |
| - | opacity: this.options.shadowSides
| + | |
| - | },
| + | |
| - | o_middle_f_style = (dir === 'next') ? {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'
| + | |
| - | } : {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms',
| + | |
| - | opacity: this.options.shadowFlip
| + | |
| - | },
| + | |
| - | o_middle_b_style = (dir === 'next') ? {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms',
| + | |
| - | opacity: this.options.shadowFlip
| + | |
| - | } : {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'
| + | |
| - | },
| + | |
| - | o_right_style = (dir === 'next') ? {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear',
| + | |
| - | opacity: this.options.shadowSides
| + | |
| - | } : {
| + | |
| - | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'
| + | |
| - | };
| + | |
| - | | + | |
| - | $o_middle_f.css(o_middle_f_style);
| + | |
| - | $o_middle_b.css(o_middle_b_style);
| + | |
| - | $o_left.css(o_left_style);
| + | |
| - | $o_right.css(o_right_style);
| + | |
| - | | + | |
| - | }
| + | |
| - | | + | |
| - | setTimeout( function() {
| + | |
| - | // first && last pages lift slightly up when we can't go further
| + | |
| - | $s_middle.addClass( self.end ? 'bb-flip-' + dir + '-end' : 'bb-flip-' + dir );
| + | |
| - | | + | |
| - | // overlays
| + | |
| - | if ( self.options.shadows && !self.end ) {
| + | |
| - | | + | |
| - | $o_middle_f.css({
| + | |
| - | opacity: dir === 'next' ? self.options.shadowFlip : 0
| + | |
| - | });
| + | |
| - | | + | |
| - | $o_middle_b.css({
| + | |
| - | opacity: dir === 'next' ? 0 : self.options.shadowFlip
| + | |
| - | });
| + | |
| - | | + | |
| - | $o_left.css({
| + | |
| - | opacity: dir === 'next' ? self.options.shadowSides : 0
| + | |
| - | });
| + | |
| - | | + | |
| - | $o_right.css({
| + | |
| - | opacity: dir === 'next' ? 0 : self.options.shadowSides
| + | |
| - | });
| + | |
| - | | + | |
| - | }
| + | |
| - | }, 25 );
| + | |
| - | },
| + | |
| - | // adds the necessary sides (bb-page) to the layout
| + | |
| - | _addSide : function( side, dir ) {
| + | |
| - | var $side;
| + | |
| | | | |
| - | switch (side) {
| + | </div> |
| - | case 'left':
| + | <div class="page-vertical-bottom"> |
| - | /*
| + | <div class="left-page"> |
| - | <div class=" bb-page " style="z- index:102;"> | + | <img style="width:113px;bottom:90px;left:-45px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/6/69/HokkaidoU_Top_Book_Ribosome_ki-.png"> |
| - | | + | <img style="width:180px; bottom:-14px; left:28px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/c/c5/HokkaidoU_Top_Book_one-eye.png"> |
| - | <div class="bb-outer">
| + | </div> |
| - | <div class="bb-content">
| + | <div class="right-page"> |
| - | <div class="bb-inner">
| + | <img style="width:180px; left:570px; bottom:-28px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/8/81/HokkaidoU_Top_Book_newas.png"> |
| - | dir==='next' ? [content of current page] : [content of next page]
| + | </div> |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div class=" bb- overlay" ></div> | + | |
| - | </div>
| + | |
| - | </div>
| + | |
| | </div> | | </div> |
| - | */
| + | </div> |
| - | $side = $('<div class="bb-page"><div class="bb- back">< div class=" bb- outer" ><div class=" bb-content"><div class="bb-inner">' + ( dir === 'next' ? this.$current.html() : this. $nextItem. html() ) + '</ div></ div><div class="bb-overlay"></ div></ div></ div></div>'). css( 'z-index', 102 ); | + | <div class="bb-item"> |
| - | break;
| + | <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png"> |
| - | case 'middle':
| + | <div class="left-page"> |
| - | /*
| + | <img class="picture-last" src="https://static.igem.org/mediawiki/2014/4/43/HokkaidoU_Top_Book_last.png"> |
| - | <div class="bb-page" style="z-index:103;">
| + | </div> |
| - | | + | <div class="right-page"> |
| - | <div class="bb-outer">
| + | <img class="picture-fin" src="https://static.igem.org/mediawiki/2014/8/82/Fin.png"> |
| - | <div class="bb-content">
| + | </div> |
| - | <div class="bb-inner">
| + | </div> |
| - | dir==='next' ? [content of current page] : [content of next page]
| + | </div> |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div class="bb-flipoverlay"></div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div class="bb-back">
| + | |
| - | <div class="bb-outer">
| + | |
| - | <div class="bb-content">
| + | |
| - | <div class="bb-inner">
| + | |
| - | dir==='next' ? [content of next page] : [content of current page]
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div class="bb-flipoverlay"></div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | */
| + | |
| - | $side = $('<div class=" bb-page">< div class=" bb- front" ><div class=" bb-outer"><div class="bb-content"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</ div></ div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this. elWidth + 'px"><div class="bb-inner">' + ( dir === 'next' ? this. $nextItem.html() : this.$current.html() ) + '</ div></ div><div class="bb-flipoverlay"></ div></ div></ div></div>'). css( 'z-index', 103 ); | + | |
| - | break;
| + | |
| - | case 'right':
| + | |
| - | /*
| + | |
| - | <div class="bb-page" style="z-index:101;">
| + | |
| - | <div class="bb-front">
| + | |
| - | <div class="bb-outer">
| + | |
| - | <div class="bb-content">
| + | |
| - | <div class="bb-inner">
| + | |
| - | dir==='next' ? [content of next page] : [content of current page]
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div class="bb-overlay"></div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | */
| + | |
| - | $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">' + ( dir === 'next' ? this.$nextItem.html() : this.$current.html() ) + '</div></div><div class="bb-overlay"></div></div></div></div>').css( 'z-index', 101 );
| + | |
| - | break;
| + | |
| - | }
| + | |
| | | | |
| - | return $side;
| |
| - | },
| |
| - | _startSlideshow : function() {
| |
| - | var self = this;
| |
| - | this.slideshow = setTimeout( function() {
| |
| - | self._navigate( 'next' );
| |
| - | if ( self.options.autoplay ) {
| |
| - | self._startSlideshow();
| |
| - | }
| |
| - | }, this.options.interval );
| |
| - | },
| |
| - | _stopSlideshow : function() {
| |
| - | if ( this.options.autoplay ) {
| |
| - | clearTimeout( this.slideshow );
| |
| - | this.options.autoplay = false;
| |
| - | }
| |
| - | },
| |
| - | // public method: flips next
| |
| - | next : function() {
| |
| - | this._action( this.options.direction === 'ltr' ? 'next' : 'prev' );
| |
| - | },
| |
| - | // public method: flips back
| |
| - | prev : function() {
| |
| - | this._action( this.options.direction === 'ltr' ? 'prev' : 'next' );
| |
| - | },
| |
| - | // public method: goes to a specific page
| |
| - | jump : function( page ) {
| |
| | | | |
| - | page -= 1;
| + | <nav> |
| - | | + | <a id="bb-nav-prev" href="#"><i class="fa fa-angle-left fa-2x"></i></a> |
| - | if ( page === this.current || page >= this.itemsCount || page < 0 ) {
| + | <a id="bb-nav-next" href="#"><i class="fa fa-angle-right fa-2x"></i></a> |
| - | return false;
| + | </nav> |
| - | }
| + | </div> |
| - | | + | </div><!-- /container --> |
| - | var dir;
| + | <div style="height:300px;" class="wrapper"> |
| - | if( this.options.direction === 'ltr' ) {
| + | <a href="https://static.igem.org/mediawiki/2014/e/ee/HokkaidoU_Top_Book.pdf"><img style="float:left;" src="https://static.igem.org/mediawiki/2014/a/a1/HokkaidoU_pdf_cupidresized.png"></a> |
| - | dir = page > this.current ? 'next' : 'prev';
| + | </div> |
| - | }
| + | <!--begin footer--> |
| - | else {
| + | |
| - | dir = page > this.current ? 'prev' : 'next';
| + | |
| - | }
| + | |
| - | this._action( dir, page );
| + | |
| - | | + | |
| - | },
| + | |
| - | // public method: goes to the last page
| + | |
| - | last : function() {
| + | |
| - | this.jump( this.itemsCount );
| + | |
| - | },
| + | |
| - | // public method: goes to the first page
| + | |
| - | first : function() {
| + | |
| - | this.jump( 1 );
| + | |
| - | },
| + | |
| - | // public method: check if isAnimating is true
| + | |
| - | isActive: function() {
| + | |
| - | return this.isAnimating;
| + | |
| - | },
| + | |
| - | // public method: dynamically adds new elements
| + | |
| - | // call this method after inserting new "bb-item" elements inside the BookBlock
| + | |
| - | update : function () {
| + | |
| - | var $currentItem = this.$items.eq( this.current );
| + | |
| - | this.$items = this.$el.children( '.bb-item' );
| + | |
| - | this.itemsCount = this.$items.length;
| + | |
| - | this.current = $currentItem.index();
| + | |
| - | },
| + | |
| - | destroy : function() {
| + | |
| - | if ( this.options.autoplay ) {
| + | |
| - | this._stopSlideshow();
| + | |
| - | }
| + | |
| - | this.$el.removeClass( 'bb-' + this.options.orientation );
| + | |
| - | this.$items.show();
| + | |
| - | | + | |
| - | if ( this.options.nextEl !== '' ) {
| + | |
| - | $( this.options.nextEl ).off( '.bookblock' );
| + | |
| - | }
| + | |
| - | | + | |
| - | if ( this.options.prevEl !== '' ) {
| + | |
| - | $( this.options.prevEl ).off( '.bookblock' );
| + | |
| - | }
| + | |
| - | | + | |
| - | $window.off( 'debouncedresize' );
| + | |
| - | }
| + | |
| - | }
| + | |
| - | | + | |
| - | var logError = function( message ) {
| + | |
| - | if ( window.console ) {
| + | |
| - | window.console.error( message );
| + | |
| - | }
| + | |
| - | };
| + | |
| - | | + | |
| - | $.fn.bookblock = function( options ) {
| + | |
| - | if ( typeof options === 'string' ) {
| + | |
| - | var args = Array.prototype.slice.call( arguments, 1 );
| + | |
| - | this.each(function() {
| + | |
| - | var instance = $.data( this, 'bookblock' );
| + | |
| - | if ( !instance ) {
| + | |
| - | logError( "cannot call methods on bookblock prior to initialization; " +
| + | |
| - | "attempted to call method '" + options + "'" );
| + | |
| - | return;
| + | |
| - | }
| + | |
| - | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
| + | |
| - | logError( "no such method '" + options + "' for bookblock instance" ); | + | |
| - | return;
| + | |
| - | }
| + | |
| - | instance[ options ].apply( instance, args );
| + | |
| - | });
| + | |
| - | }
| + | |
| - | else {
| + | |
| - | this.each(function() {
| + | |
| - | var instance = $.data( this, 'bookblock' );
| + | |
| - | if ( instance ) {
| + | |
| - | instance._init();
| + | |
| - | }
| + | |
| - | else {
| + | |
| - | instance = $.data( this, 'bookblock', new $.BookBlock( options, this ) );
| + | |
| - | }
| + | |
| - | });
| + | |
| - | }
| + | |
| - | return this;
| + | |
| - | };
| + | |
| - | | + | |
| - | } )( jQuery, window );
| + | |
| - | </script>
| + | |
| - | <script>
| + | |
| - | var Page = (function() {
| + | |
| - |
| + | |
| - | var config = {
| + | |
| - | $bookBlock : $( '#bb-bookblock' ),
| + | |
| - | $navNext : $( '#bb-nav-next' ),
| + | |
| - | $navPrev : $( '#bb-nav-prev' ),
| + | |
| - | $navFirst : $( '#bb-nav-first' ),
| + | |
| - | $navLast : $( '#bb-nav-last' )
| + | |
| - | },
| + | |
| - | init = function() {
| + | |
| - | config.$bookBlock.bookblock( {
| + | |
| - | speed : 800,
| + | |
| - | shadowSides : 0.8,
| + | |
| - | shadowFlip : 0.7
| + | |
| - | } );
| + | |
| - | initEvents();
| + | |
| - | },
| + | |
| - | initEvents = function() {
| + | |
| - |
| + | |
| - | var $slides = config.$bookBlock.children();
| + | |
| - | | + | |
| - | // add navigation events
| + | |
| - | config.$navNext.on( 'click touchstart', function() {
| + | |
| - | config.$bookBlock.bookblock( 'next' );
| + | |
| - | return false;
| + | |
| - | } );
| + | |
| - | | + | |
| - | config.$navPrev.on( 'click touchstart', function() {
| + | |
| - | config.$bookBlock.bookblock( 'prev' );
| + | |
| - | return false;
| + | |
| - | } );
| + | |
| - | | + | |
| - | config.$navFirst.on( 'click touchstart', function() {
| + | |
| - | config.$bookBlock.bookblock( 'first' );
| + | |
| - | return false;
| + | |
| - | } );
| + | |
| - | | + | |
| - | config.$navLast.on( 'click touchstart', function() {
| + | |
| - | config.$bookBlock.bookblock( 'last' );
| + | |
| - | return false;
| + | |
| - | } );
| + | |
| - |
| + | |
| - | // add swipe events
| + | |
| - | $slides.on( {
| + | |
| - | 'swipeleft' : function( event ) {
| + | |
| - | config.$bookBlock.bookblock( 'next' );
| + | |
| - | return false;
| + | |
| - | },
| + | |
| - | 'swiperight' : function( event ) {
| + | |
| - | config.$bookBlock.bookblock( 'prev' );
| + | |
| - | return false;
| + | |
| - | }
| + | |
| - | } );
| + | |
| - | | + | |
| - | // add keyboard events
| + | |
| - | $( document ).keydown( function(e) {
| + | |
| - | var keyCode = e.keyCode || e.which,
| + | |
| - | arrow = {
| + | |
| - | left : 37,
| + | |
| - | up : 38,
| + | |
| - | right : 39,
| + | |
| - | down : 40
| + | |
| - | };
| + | |
| | | | |
| - | switch (keyCode) {
| + | <div id="footer-wrapper" style="background-color: #d92424; margin-top: 0;"> |
| - | case arrow.left:
| + | <div id="footer-content"> |
| - | config.$bookBlock.bookblock( 'prev' );
| + | <div id="footer-logo"> |
| - | break;
| + | <a href="http://igemhokkaidou.wordpress.com"><img style="height:150px;position:relative;" src="https://static.igem.org/mediawiki/2014/3/39/HokkaidoU_logo_transparent.png"></a> |
| - | case arrow.right:
| + | </div> |
| - | config.$bookBlock.bookblock( 'next' );
| + | <div id="footer-twitter"> |
| - | break;
| + | <a href="http://twitter.com/igem_hokkaidou"><img style="height:150px; position:relative; bottom:0;" src="https://static.igem.org/mediawiki/2014/3/3b/HokkaidoU_Footer_Twitter.png"></a> |
| - | }
| + | </div> |
| - | } );
| + | |
| - | };
| + | |
| | | | |
| - | return { init : init };
| |
| | | | |
| - | })();
| + | </div> |
| - | </script>
| + | </div> |
| - | <script>
| + | </div><!--background--> |
| - | Page.init();
| + | |
| - | </script>
| + | |
| - | </body>
| + | |
| | </html> | | </html> |
| | + | {{Team:HokkaidoU_Japan/CSS}} |
| | + | {{Team:HokkaidoU_Japan/Top_Header/CSS}} |
| | + | {{Team:HokkaidoU_Japan/LargeDropDown/CSS}} |
| | + | {{Team:HokkaidoU_Japan/JS}} |
| | + | {{Team:HokkaidoU_Japan/Book/CSS}} |
| | + | {{Team:HokkaidoU_Japan/Footer/CSS}} |
"
