Team:HokkaidoU Japan

From 2014.igem.org

(Difference between revisions)
 
(493 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/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">
-
<a href="http://drbl.in/ciTX"><img src="https://static.igem.org/mediawiki/2014/c/c6/Othersmini.png" alt="image02"/></a>
+
<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">
+
-
<a href="http://drbl.in/cLHx"><img src="images/demo1/3.jpg" alt="image03"/></a>
+
-
</div>
+
-
<div class="bb-item">
+
-
<a href="http://drbl.in/bAfn"><img src="images/demo1/4.jpg" alt="image04"/></a>
+
-
</div>
+
-
<div class="bb-item">
+
-
<a href="http://drbl.in/dcbE"><img src="https://static.igem.org/mediawiki/2014/7/7c/Maestromini.png" alt="image05"/></a>
+
-
</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 src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+
</p>
-
<script>
+
</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>
-
function and(a, b) {
+
<div class="right-up">
-
  if ( a ) {
+
<img class="character-pic" src="https://static.igem.org/mediawiki/2014/b/b8/HokkaidoU_Top_Book_mRNA.png">
-
    return b;
+
<p style="line-height:10px; font-weight:bold; position:relative; top:10px;">
-
  } else {
+
Mike / mRNA
-
    return a;
+
</p>
-
  }
+
<p style="line-height:20px; font-size:15px; position:relative; top:10px;">
-
}
+
The most popular boy in the village, but a little indecisive.
 +
</p>
 +
</div>
-
(function() {
+
</div>
-
var event = jQuery.event,
+
<div class="page-vertical-bottom">
 +
<div class="left-bottom">
 +
<img class="character-pic" src="https://static.igem.org/mediawiki/2014/0/0f/HokkaidoU_Top_Book_Ribosome.png">
 +
<p style="line-height:10px; font-weight:bold; position:relative; top:10px;">
 +
Rachel / ribosome
 +
</p>
 +
<p style="line-height:20px; font-size:15px; position:relative; top:10px;">
 +
The most confident girl in the village. She loves Mike and approaches him positively.
 +
</p>
 +
</div>
-
//helper that finds handlers by type and calls back a function, this is basically handle
+
<div class="right-bottom">
-
// events - the events object
+
<img style="top:40px;" class="character-pic" src="https://static.igem.org/mediawiki/2014/8/8f/HokkaidoU_Top_Book_cupid.png">
-
// types - an array of event types to look for
+
<p style="line-height:10px; font-weight:bold; position:relative; top:60px;">
-
// callback(type, handlerFunc, selector) - a callback
+
Cupid / HokkaidoU
-
// 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:60px;">
-
findHelper = function( events, types, callback, selector ) {
+
A wonderful sprite in the village. He sometimes helps a villager whimsically.
-
var t, type, typeHandlers, all, h, handle,
+
</p>
-
namespaces, namespace,
+
</div>
-
match;
+
</div>
-
for ( t = 0; t < types.length; t++ ) {
+
  </div>
-
type = types[t];
+
</div>
-
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++ ) {
 
-
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="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="page-vertical-top">
-
* @param {Array} types an array of event names
+
                                                    <div style="width:70%; left:50px; top:77px;font-size:23px; line-height:40px;" class="left-page">
-
* @param {String} [selector] optional selector
+
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.  
-
* @return {Array} an array of event handlers
+
</div>
-
*/
+
    <div class="right-page">
-
event.find = function( el, types, selector ) {
+
<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">
-
var events = ( $._data(el) || {} ).events,
+
</div>
-
handlers = [],
+
</div>
-
t, liver, live;
+
<div class="page-vertical-bottom">
 +
                                                    <div class="left-page">
 +
<img style="bottom:12px;left:-50px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/d/d4/HokkaidoU_Top_Picutre_mRNA-Ribosome.png">
 +
                                                    </div>
 +
    <div style="width:59%; left:350px; top:15px;font-size:23px; line-height:40px;" class="right-page">
 +
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>
 +
  </div>
 +
</div>
-
if (!events ) {
 
-
return handlers;
 
-
}
 
-
findHelper(events, types, function( type, handler ) {
 
-
handlers.push(handler);
 
-
}, selector);
 
-
return handlers;
 
-
};
 
-
/**
 
-
* Finds all events.  Group by selector.
 
-
* @param {HTMLElement} el the element
 
-
* @param {Array} types event types
 
-
*/
 
-
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:30%;" class="left-page">
-
$.fn.respondsTo = function( events ) {
+
<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 (!this.length ) {
+
</div>
-
return false;
+
<div style="width:70%; right:5%; top:90px;font-size:23px; line-height:40px;" class="right-page">
-
} else {
+
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.
-
//add default ?
+
</div>
-
return event.find(this[0], $.isArray(events) ? events : [events]).length > 0;
+
</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">
-
$.fn.triggerHandled = function( event, data ) {
+
<div style="width:65%; left:30px;font-size:23px; line-height:40px; top:41px;" class="left-page">
-
event = (typeof event == "string" ? $.Event(event) : event);
+
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.
-
this.trigger(event, data);
+
</div>
-
return event.handled;
+
<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>
-
* 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>
-
if ( selector ) {
+
</div>
-
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">                                                    <div style="left:100px; top:89px; width:80%;font-size:23px; line-height:40px;" class="page-vertical-top">
-
var bySelector, selector = handleObj.selector || "";
+
Mike fell in love with changed Annie at a first sight.  
-
if ( selector ) {
+
“Just a small change of myself makes my world more wonderful than I have dreamed ever.”
-
bySelector = event.find(this, types, selector);
+
Although Annie couldn’t hide her surprise, she felt very happy.
-
if (!bySelector.length ) {
+
And then, Annie and Mike were together happily forever.  
-
$(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 =and( !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 class="page-vertical-bottom">
-
*/
+
<div class="left-page">
-
var swipe = $.event.swipe = {
+
<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">
-
* @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="width:180px; left:570px; bottom:-28px;" class="page-picture" src="https://static.igem.org/mediawiki/2014/8/81/HokkaidoU_Top_Book_newas.png">
-
* A user must perform the swipe motion in this much time.
+
</div>
-
*/
+
-
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( [
+
-
 
+
-
/**
+
-
* @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
+
-
if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) {
+
-
event.preventDefault();
+
-
}
+
-
};
+
-
 
+
-
// Attach to the touch move events
+
-
$(document.documentElement).bind(touchMoveEvent, moveHandler)
+
-
.one(touchStopEvent, function(event){
+
-
$(this).unbind( touchMoveEvent, moveHandler);
+
-
// if start and stop contain data figure out if we have a swipe event
+
-
if ( and(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 ( and(stop.time - start.time < swipe.delay , distance >= swipe.min) ) {
+
-
var events = ['swipe'];
+
-
// check if we moved horizontally
+
-
if( and(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(and(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>
+
-
<script type="text/javascript">
+
-
 
+
-
/**
+
-
* 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 is just comment
+
-
this.support = and( Modernizr.csstransitions , and (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 ( and (dir === 'next' , this.options.direction === 'ltr' )|| and(dir === 'prev' , this.options.direction === 'rtl' )) {
+
-
if (and( !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 ( and(dir === 'prev' , this.options.direction === 'ltr') || and(dir === 'next' , this.options.direction === 'rtl' )) {
+
-
if (and( !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 = and( !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 = and (dir === 'next' , this.current === this.itemsCount - 1) || and( 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 = and( dir === 'next' , self.current === self.itemsCount - 1) || and(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 (and(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 (and( 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 type="text/javascript">
+
-
$(function() {
+
-
 
+
-
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>
+
-
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/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"