Team:HokkaidoU Japan

From 2014.igem.org

(Difference between revisions)
 
(474 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- prepend 3 lines BEFORE html tag -->
 
-
{{Team:HokkaidoU_Japan/CSS}}
 
-
{{Team:HokkaidoU_Japan/Book/CSS}}
 
-
{{Team:HokkaidoU_Japan/Book/JS_HEAD}}
 
-
{{Team:HokkaidoU_Japan/Top_Header/CSS}}
 
-
{{Team:HokkaidoU_Japan/Top_Header/JS}}
 
-
 
<html class="demo-1">
<html class="demo-1">
-
<!--begin header-->
+
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
-
<div id="top-header">
+
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-
  <div id="bookmark-wrapper">
+
<div id="background">
-
  <div id="bookmark-position">
+
-
  <div class="bookmark" id="bookmark1">
+
<!-- begin header-->
-
    Top
+
<div id="header-wrapper">
-
  </div>
+
   <div id="top-header">
-
  <div class="bookmark" id="bookmark2">
+
     <div>
-
    Project
+
<img id="header-image" src="https://static.igem.org/mediawiki/2014/7/77/HokkaidoU_Top_Header.png">
-
   </div>
+
     </div>
-
  <div class="bookmark" id="bookmark3">
+
-
     Human Practice
+
-
  </div>
+
-
  <div class="bookmark" id="bookmark4">
+
-
     About Us
+
-
  </div>
+
-
  </div>
+
   </div>
   </div>
 +
</div>
 +
<!-- end header-->
 +
<!-- begin Menu-->
 +
    <div class="box">
 +
  <div id="box-wrapper">
 +
<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>
 +
      <ul id="ldd_menu" class="ldd_menu">
 +
                                <li>
 +
                                <span class="menu-list" ><span style="position:relative; top:10px;" href="#">Top</span></span><!-- Increases to 510px in width-->
 +
                                </li>
 +
<li class="menu_button">
 +
<span class="menu-list"><span style="position:relative; top:10px;">RNA in Love</span></span><!-- Increases to 510px in width-->
 +
<div class="ldd_submenu" style="left:-415px; width:970px;">
 +
<ul style="margin-left:20px;">
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Overview/Background">Overview</a></li>
 +
<li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Overview/Background">Background</a></li>
 +
<li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Overview/Achievements">Achievements</a></li>
 +
</ul>
 +
<ul>
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem">H-stem System</a></li>
 +
                                                        <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#Overview">Overview</a></li>
 +
                                                        <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#asRNA_stabilization">Stabilization</a></li>
 +
                                                        <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#Modelling">Modelling</a></li>
 +
                                                        <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#Construct">Construct</a></li>
 +
                                                        <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/H_Stem#How_To_Use">How To Use</a></li>
 +
</ul>
 +
<ul>
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/asB0034">Anti-sense B0034</a></li>
 +
            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/asB0034">Overview</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/asB0034#Method">Method</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/asB0034#Results">Results</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/asB0034#Conclusion">Conclusion</a></li>
 +
</ul>
 +
<ul>
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Length">Length Variation</a></li>
 +
            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Length">Overview</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Length#Method">Method</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Length#Results">Results</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Projects/Length#Conclusion">Conclusion</a></li>
 +
</ul>
 +
<ul>
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Materials">Extra Materials</a></li>
 +
            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Parts">Parts</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Notebook">Notebook</a></li>
 +
                                                            <li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Safety">Safety</a></li>
 +
</ul>
 +
</div>
 +
</li>
 +
<li class="menu_button">
 +
<span class="menu-list"><span style="position:relative; top:10px;">Outreach</span></span>
 +
<div class="ldd_submenu" style="width:590px; left:-230px;">
 +
<ul style="margin-left:20px;">
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Univ_festival">Univ. Festival</a></li>
 +
<li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Univ_festival#Education">Education</a></li>
 +
<li class="ldd_contents"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Univ_festival#Survey">Survey</a></li>
 +
</ul>
 +
<ul>
 +
<li class="ldd_heading"><a href="https://2014.igem.org/Team:HokkaidoU_Japan/Outreach/Survey">High School</a></li>
 +
<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>
 +
    </div>
</div>
</div>
-
<!--end header-->
+
 
 +
<!--end menu-->
<div class="container">
<div class="container">
-
<div class="main clearfix">
+
 
<div class="bb-custom-wrapper">
<div class="bb-custom-wrapper">
 +
<div style="margin: 100px 0 -80px;">
 +
<h1 style="font-family: 'Special Elite', cursive; font-size: 48px;">~ RNA in love ~</h1>
 +
<h3 style="font-family: 'Special Elite', cursive; font-size: 24px;">This year iGEM HokkaidoU invites you to a lovely story ...</h3>
 +
</div>
<div id="bb-bookblock" class="bb-bookblock">
<div id="bb-bookblock" class="bb-bookblock">
 +
                                            <div class="bb-item">
 +
                                              <div class="left-page-top"></div>
 +
                                              <div class="right-page-top">
 +
                                            <img class="top-picture" src="https://static.igem.org/mediawiki/2014/9/90/Cover1.png">
 +
                                              </div>    
 +
                                            </div>
 +
<div class="bb-item">
<div class="bb-item">
-
                                                <img src="https://static.igem.org/mediawiki/2014/7/7c/Maestromini.png">
+
                                                    <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png">                                                              
-
</div>
+
    <div class="left-page">
-
<div class="bb-item">
+
<div class="text-box">
-
<img src="https://static.igem.org/mediawiki/2014/7/7c/Maestromini.png">
+
<p>
-
</div>
+
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?
-
<div class="bb-item">
+
-
<img src="https://static.igem.org/mediawiki/2014/7/7c/Maestromini.png">
+
-
</div>
+
-
<div class="bb-item">
+
-
　　　　　　　　　　　　　　　<img src="https://static.igem.org/mediawiki/2014/7/7c/Maestromini.png">
+
-
</div>
+
-
<div class="bb-item">
+
-
<img src="https://static.igem.org/mediawiki/2014/7/7c/Maestromini.png">
+
-
</div>
+
-
</div>
+
-
<nav>
+
-
<a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
+
-
<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
+
-
<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
+
-
<a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
+
-
</nav>
+
-
</div>
+
-
</div>
+
-
</div><!-- /container -->
+
-
                <script>
+
-
(function() {
+
-
var event = jQuery.event,
+
</p>
 +
</div>
 +
                                                    </div>
 +
                                                    <div class="right-page">
 +
<div class="page-vertical-top">
 +
<div class="left-up">
 +
<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
 +
</p>
 +
<p  style="line-height:20px; font-size:15px; position:relative; top:10px;">
 +
The shiest girl in the village, but has a feeling to Mike in secrecy.
 +
</p>
 +
</div>
-
//helper that finds handlers by type and calls back a function, this is basically handle
+
<div class="right-up">
-
// events - the events object
+
<img class="character-pic" src="https://static.igem.org/mediawiki/2014/b/b8/HokkaidoU_Top_Book_mRNA.png">
-
// types - an array of event types to look for
+
<p style="line-height:10px; font-weight:bold; position:relative; top:10px;">
-
// callback(type, handlerFunc, selector) - a callback
+
Mike / mRNA
-
// selector - an optional selector to filter with, if there, matches by selector
+
</p>
-
//    if null, matches anything, otherwise, matches with no selector
+
<p style="line-height:20px; font-size:15px; position:relative; top:10px;">
-
findHelper = function( events, types, callback, selector ) {
+
The most popular boy in the village, but a little indecisive.
-
var t, type, typeHandlers, all, h, handle,
+
</p>
-
namespaces, namespace,
+
</div>
-
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>
-
handle = typeHandlers[h];
+
-
+
-
match = (all || namespace.test(handle.namespace));
+
-
+
-
if(match){
+
-
if(selector){
+
-
if (handle.selector === selector  ) {
+
-
callback(type, handle.origHandler || handle.handler);
+
-
}
+
-
} else if (selector === null){
+
-
callback(type, handle.origHandler || handle.handler, handle.selector);
+
-
}
+
-
else if (!handle.selector ) {
+
-
callback(type, handle.origHandler || handle.handler);
+
-
+
-
}
+
-
}
+
-
+
-
+
-
}
+
-
}
+
-
};
+
-
/**
+
<div class="page-vertical-bottom">
-
* Finds event handlers of a given type on an element.
+
<div class="left-bottom">
-
* @param {HTMLElement} el
+
<img class="character-pic" src="https://static.igem.org/mediawiki/2014/0/0f/HokkaidoU_Top_Book_Ribosome.png">
-
* @param {Array} types an array of event names
+
<p style="line-height:10px; font-weight:bold; position:relative; top:10px;">
-
* @param {String} [selector] optional selector
+
Rachel / ribosome
-
* @return {Array} an array of event handlers
+
</p>
-
*/
+
<p style="line-height:20px; font-size:15px; position:relative; top:10px;">
-
event.find = function( el, types, selector ) {
+
The most confident girl in the village. She loves Mike and approaches him positively.
-
var events = ( $._data(el) || {} ).events,
+
</p>
-
handlers = [],
+
</div>
-
t, liver, live;
+
-
if (!events ) {
+
<div class="right-bottom">
-
return handlers;
+
<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;">
-
findHelper(events, types, function( type, handler ) {
+
Cupid / HokkaidoU
-
handlers.push(handler);
+
</p>
-
}, selector);
+
<p style="line-height:20px; font-size:15px; position:relative; top:60px;">
-
return handlers;
+
A wonderful sprite in the village. He sometimes helps a villager whimsically.
-
};
+
</p>
-
/**
+
</div>
-
* Finds all events.  Group by selector.
+
</div>
-
* @param {HTMLElement} el the element
+
  </div>
-
* @param {Array} types event types
+
</div>
-
*/
+
-
event.findBySelector = function( el, types ) {
+
-
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 ) {
 
-
return selectors;
 
-
}
 
-
//first check live:
 
-
/*$.each(events.live || [], function( i, live ) {
 
-
if ( $.inArray(live.origType, types) !== -1 ) {
 
-
add(live.selector, live.origType, live.origHandler || live.handler);
 
-
}
 
-
});*/
 
-
//then check straight binds
 
-
findHelper(events, types, function( type, handler, selector ) {
 
-
add(selector || "", type, handler);
 
-
}, null);
 
-
return selectors;
+
<div class="bb-item">
-
};
+
                                                    <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png">                                                             
-
event.supportTouch = "ontouchend" in document;
+
                                                    <div class="page-vertical-top">
-
+
                                                    <div style="width:70%; left:50px; top:77px;font-size:23px; line-height:40px;" class="left-page">
-
$.fn.respondsTo = function( events ) {
+
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.  
-
if (!this.length ) {
+
</div>
-
return false;
+
    <div class="right-page">
-
} else {
+
<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">
-
//add default ?
+
</div>
-
return event.find(this[0], $.isArray(events) ? events : [events]).length > 0;
+
</div>
-
}
+
<div class="page-vertical-bottom">
-
};
+
                                                    <div class="left-page">
-
$.fn.triggerHandled = function( event, data ) {
+
<img style="bottom:12px;left:-50px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/d/d4/HokkaidoU_Top_Picutre_mRNA-Ribosome.png">
-
event = (typeof event == "string" ? $.Event(event) : event);
+
                                                    </div>
-
this.trigger(event, data);
+
    <div style="width:59%; left:350px; top:15px;font-size:23px; line-height:40px;" class="right-page">
-
return event.handled;
+
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>
-
/**
+
                                                    </dvi>
-
* Only attaches one event handler for all types ...
+
  </div>
-
* @param {Array} types llist of types that will delegate here
+
</div>
-
* @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 || "";
 
-
if ( selector ) {
 
-
bySelector = event.find(this, types, selector);
 
-
if (!bySelector.length ) {
 
-
$(this).delegate(selector, startingEvent, onFirst);
 
-
}
 
-
}
 
-
else {
 
-
//var bySelector = event.find(this, types, selector);
 
-
if (!event.find(this, types, selector).length ) {
 
-
event.add(this, startingEvent, onFirst, {
 
-
selector: selector,
 
-
delegate: this
 
-
});
 
-
}
 
-
}
 
-
},
+
<div class="bb-item">
-
remove = function( handleObj ) {
+
                                                <img class="book-background" src="https://static.igem.org/mediawiki/2014/3/31/HokkaidoU_Top_Book_Background.png">
-
var bySelector, selector = handleObj.selector || "";
+
<div class="page-vertical-top">
-
if ( selector ) {
+
<div style="width:30%;" class="left-page">
-
bySelector = event.find(this, types, selector);
+
<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">
-
if (!bySelector.length ) {
+
</div>
-
$(this).undelegate(selector, startingEvent, onFirst);
+
<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>
-
else {
+
</div>
-
if (!event.find(this, types, selector).length ) {
+
<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">
-
event.remove(this, startingEvent, onFirst, {
+
<div class="page-vertical-bottom">
-
selector: selector,
+
<div style="width:65%; left:30px;font-size:23px; line-height:40px; top:41px;" class="left-page">
-
delegate: this
+
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>
-
$.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>
-
* @add jQuery.event.swipe
+
</div>
-
*/
+
-
var swipe = $.event.swipe = {
+
-
/**
+
-
* @attribute delay
+
-
* Delay is the upper limit of time the swipe motion can take in milliseconds.  This defaults to 500.
+
-
*
+
-
* A user must perform the swipe motion in this much time.
+
-
*/
+
-
delay : 500,
+
-
/**
+
-
* @attribute max
+
-
* The maximum distance the pointer must travel in pixels.  The default is 75 pixels.
+
-
*/
+
-
max : 75,
+
-
/**
+
-
* @attribute min
+
-
* The minimum distance the pointer must travel in pixels.  The default is 30 pixels.
+
-
*/
+
-
min : 30
+
-
};
+
-
$.event.setupHelper( [
 
-
/**
+
<div class="bb-item">
-
* @hide
+
                                                <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">
-
* @attribute swipe
+
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.”
-
"swipe",
+
Although Annie couldn’t hide her surprise, she felt very happy.
-
/**
+
And then, Annie and Mike were together happily forever.  
-
* @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>
-
if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) {
+
<div class="page-vertical-bottom">
-
event.preventDefault();
+
<div class="left-page">
-
}
+
<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>
-
// Attach to the touch move events
+
<div class="right-page">
-
$(document.documentElement).bind(touchMoveEvent, moveHandler)
+
<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">
-
.one(touchStopEvent, function(event){
+
</div>
-
$(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
+
-
$.each($.event.find(delegate, events, selector), function(){
+
-
this.call(entered, ev, {start : start, end: stop})
+
-
})
+
-
+
-
}
+
-
}
+
-
// reset start and stop
+
-
start = stop = undefined;
+
-
})
+
-
});
+
-
 
+
-
})(jQuery)
+
-
                </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) {
+
-
case 'left':
+
-
/*
+
-
<div class="bb-page" style="z-index:102;">
+
-
<div class="bb-back">
+
-
<div class="bb-outer">
+
-
<div class="bb-content">
+
-
<div class="bb-inner">
+
-
dir==='next' ? [content of current page] : [content of next page]
+
-
</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="bb-front">
+
<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>
 +
<a id="bb-nav-next" href="#"><i class="fa fa-angle-right fa-2x"></i></a>
 +
</nav>
 +
</div>
 +
</div><!-- /container -->
 +
<div style="height:300px;" class="wrapper">
 +
<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>
 +
</div>
 +
<!--begin footer-->
-
if ( page === this.current || page >= this.itemsCount || page < 0 ) {
+
<div id="footer-wrapper" style="background-color: #d92424; margin-top: 0;">
-
return false;
+
  <div id="footer-content">
-
}
+
<div id="footer-logo">
 +
<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>
 +
</div>
 +
<div id="footer-twitter">
 +
        <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>
-
var dir;
 
-
if( this.options.direction === 'ltr' ) {
 
-
dir = page > this.current ? 'next' : 'prev';
 
-
}
 
-
else {
 
-
dir = page > this.current ? 'prev' : 'next';
 
-
}
 
-
this._action( dir, page );
 
-
},
+
  </div>
-
// public method: goes to the last page
+
</div>
-
last : function() {
+
</div><!--background-->
-
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>
+
-
<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) {
+
-
case arrow.left:
+
-
config.$bookBlock.bookblock( 'prev' );
+
-
break;
+
-
case arrow.right:
+
-
config.$bookBlock.bookblock( 'next' );
+
-
break;
+
-
}
+
-
} );
+
-
};
+
-
 
+
-
return { init : init };
+
-
 
+
-
})();
+
-
</script>
+
-
<script>
+
-
Page.init();
+
-
 
+
-
 
+
-
</script>
+
</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}}

Latest revision as of 15:20, 9 September 2015

~ RNA in love ~

This year iGEM HokkaidoU invites you to a lovely story ...

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?

Annie / asRNA

The shiest girl in the village, but has a feeling to Mike in secrecy.

Mike / mRNA

The most popular boy in the village, but a little indecisive.

Rachel / ribosome

The most confident girl in the village. She loves Mike and approaches him positively.

Cupid / HokkaidoU

A wonderful sprite in the village. He sometimes helps a villager whimsically.

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.
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.
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.
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.
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.

Retrieved from "http://2014.igem.org/Team:HokkaidoU_Japan"