Difference between revisions of "Team:NAIT Edmonton/Logbook"

Line 8: Line 8:
  
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
−
<script type="text/javascript" src="https://2015.igem.org/index.php?title=
 
−
Template:NAIT_Edmonton/js/jquery.flexslider"></script>
 
  
−
<script type="text/javascript" charset="utf-8">
+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 +
<script src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.easing.1.3.js?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 +
<script src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.booklet.1.1.0.min.js?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
  
−
var $ = jQuery.noConflict();
+
<link href="https://2015.igem.org/Team:NAIT_Edmonton/jquery.booklet.1.1.0?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet" media="screen" />
−
  $(window).load(function() {
+
 
−
    $('.flexslider').flexslider({
+
<script src="https://2015.igem.org/Team:NAIT_Edmonton/cufon-yui.js?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
−
          animation: "slide"
+
<script type="text/javascript">
−
    });
+
Cufon.replace('h1,p,.b-counter');
−
  });
+
Cufon.replace('.book_wrapper a', {hover:true});
−
</script>
+
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'Source Sans Pro'});
 +
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'Source Sans Pro'});
 +
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'Source Sans Pro'});
 +
</script>
  
 
</head>
 
</head>
Line 81: Line 83:
  
  
−
<center><div class="top_slogan">Under Construction!</div></center>
+
<div class="top_slogan">
−
 
+
Our Summer Logbook
 +
  </div>
 
  <div class="main_content">
 
  <div class="main_content">
−
<center><img src="https://static.igem.org/mediawiki/2015/6/66/NAIT_Construction.jpg">
 
−
<h3> Original Artist Unknown </h3>
 
  
 +
<center>
  
−
<style type="text/css">
+
<div class="book_wrapper">
−
.tg  {border-collapse:collapse;border-spacing:0;color:none}
+
<a id="next_page_button"></a>
−
.tg td{width:280px; border-style:none;border-width:0px;overflow:hidden;word-break:normal;text-align:center;}
+
<a id="prev_page_button"></a>
−
.tg th{width:280px; padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;text-align:center}
+
<div id="loading" class="loading">Loading pages...</div>
 +
<div id="mybook" style="display:none;">
 +
<div class="b-load">
 +
<div>
 +
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0f/Grosser_Panda.JPG" alt=""/>
 +
<h1>Month 1 - May</h1>
 +
<p>I propose we do weekly updates on this log book style thing. I think this is a really neat and intuitive way to display the information that we may find and research each week. For homework, we should try and remember what we did for the past few weeks. We can do a lot of things here including <a href="#">linking</a>. Perhaps a weekly link/update?</p>
  
−
}
+
</div>
 +
<div>
 +
<img src="http://www.barkteryneexistuje.cz/wp-content/uploads/Cute-Panda-Bears-animals-34915025-2560-1600.jpg" alt="" />
 +
<h1>Month 2 - June</h1>
 +
<p><a href="#">Week 1</a> - We started school again which makes research difficult</p>
 +
                        <p><a href="#">Week 2</a> - Click for details etc.</p>
 +
                      <p><a href="#">Week 3</a> - This and this happened this week</p>
 +
                        <p><a href="#">Week 4</a> - What do you guys think?</p>
  
−
</style>
+
</div>
 +
<div>
 +
<img src="http://learn.surbitonhigh.com/pandas2/wp-content/uploads/sites/100/2014/11/cute-panda.jpg" alt="" />
 +
<h1>Month 3 - July</h1>
 +
<p>Once upon a time.........</p>
 +
</div>
 +
<div>
 +
<img src="http://www.zooatlanta.org/media/image/panda_cubs2013_140731_meihuan_ZA_7836_600.jpg" alt="" />
 +
<h1>Month 4 - August</h1>
 +
<p>Abbie - Sloth</p>
 +
                        <p>Joy - Panda</p>
 +
                        <p>Jo - Mantis Shrimp</p>
 +
                        <p>David - Wooly Mammoth</p>
 +
                        <p>Eduardo - Snow Cougar</p>
 +
                        <p>Kevin - Mammoth rabbit </p>
 +
</div>
 +
<div>
 +
<img src="http://i.huffpost.com/gen/1342502/thumbs/o-PANDA-CUB-900.jpg?6" alt="" />
 +
<h1>Crunch Time - September</h1>
 +
<p><a href="#">Week 1</a> - We started school again which makes research difficult</p>
 +
                        <p><a href="#">Week 2</a></p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
       
 +
        <!-- The JavaScript -->
  
−
<table class="tg">
+
        <script type="text/javascript">
−
  <tr>
+
$(function() {
−
    <th class="tg-031e"><h2>Our Team</h2></th>
+
var $mybook = $('#mybook');
−
    <th class="tg-031e"><h2>iGEM 2015</h2></th>
+
var $bttn_next = $('#next_page_button');
−
    <th class="tg-031e"><h2>Contact Us!</h2></th>
+
var $bttn_prev = $('#prev_page_button');
−
  </tr>
+
var $loading = $('#loading');
−
  <tr>
+
var $mybook_images = $mybook.find('img');
−
    <td class="tg-031e"><div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Bios" title="Team Bios"><img src="https://static.igem.org/mediawiki/2015/7/73/NAIT_Icon_clients.png" alt="" title="" /></a></div></td>
+
var cnt_images = $mybook_images.length;
−
    <td class="tg-031e"> <div class="roundimg"><a href="https://2015.igem.org" title=""><img src="https://static.igem.org/mediawiki/2015/0/05/NAIT_Icon_services.png" alt="" title="iGEM Official Site 2015" /></a></div></td>
+
var loaded = 0;
−
    <td class="tg-031e"><div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" title=""><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" alt="" title="Contact Us" /></a></div></td>
+
//preload all the images in the book,
−
  </tr>
+
//and then call the booklet plugin
−
  <tr>
+
−
    <td class="tg-031e"><p class="centered_text">
+
−
"When a team outgrows individual performance and learns team confidence, <strong>excellence becomes a reality</strong>." - Joe Paterno
+
−
        </p>
+
−
        </td>
+
−
    <td class="tg-031e"><p class="centered_text">
+
−
Learn about the exciting opportunities the iGEM foundation has to offer!
+
−
        </p>
+
−
        </td>
+
−
    <td class="tg-031e">        <p class="centered_text">
+
−
Please contact us if you want more information about our project or have any other questions or concerns.
+
−
        </p>
+
−
        </td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td class="tg-031e"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Bios" class="more">read more</a></td>
+
−
    <td class="tg-031e"><a href="https://2015.igem.org" class="more">read more</a></td>
+
−
    <td class="tg-031e"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" class="more">read more</a></td>
+
−
  </tr>
+
  
 +
$mybook_images.each(function(){
 +
var $img = $(this);
 +
var source = $img.attr('src');
 +
$('<img/>').load(function(){
 +
++loaded;
 +
if(loaded == cnt_images){
 +
$loading.hide();
 +
$bttn_next.show();
 +
$bttn_prev.show();
 +
$mybook.show().booklet({
 +
name:              null,                            // name of the booklet to display in the document title bar
 +
width:              800,                            // container width
 +
height:            500,                            // container height
 +
speed:              600,                            // speed of the transition between pages
 +
direction:          'LTR',                          // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
 +
startingPage:      0,                              // index of the first page to be displayed
 +
easing:            'easeInOutQuad',                // easing method for complete transition
 +
easeIn:            'easeInQuad',                    // easing method for first half of transition
 +
easeOut:            'easeOutQuad',                  // easing method for second half of transition
  
−
</table>
+
closed:            true,                          // start with the book "closed", will add empty pages to beginning and end of book
−
        
+
closedFrontTitle:  null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
−
 
+
closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
 +
closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
 +
closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
 +
covers:            false,                          // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
 +
 
 +
pagePadding:        10,                              // padding for each page wrapper
 +
pageNumbers:        true,                            // display page numbers on each page
 +
 
 +
hovers:            false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
 +
overlays:          false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
 +
tabs:              false,                          // adds tabs along the top of the pages
 +
tabWidth:          60,                              // set the width of the tabs
 +
tabHeight:          20,                              // set the height of the tabs
 +
arrows:            false,                          // adds arrows overlayed over the book edges
 +
cursor:            'pointer',                      // cursor css setting for side bar areas
 +
 
 +
hash:              false,                          // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
 +
keyboard:          true,                            // enables navigation with arrow keys (left: previous, right: next)
 +
next:              $bttn_next,          // selector for element to use as click trigger for next page
 +
prev:              $bttn_prev,          // selector for element to use as click trigger for previous page
 +
 
 +
menu:              null,                            // selector for element to use as the menu area, required for 'pageSelector'
 +
pageSelector:       false,                          // enables navigation with a dropdown menu of pages, requires 'menu'
 +
chapterSelector:    false,                          // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
 +
 
 +
shadows:            true,                            // display shadows on page animations
 +
shadowTopFwdWidth:  166,                            // shadow width for top forward anim
 +
shadowTopBackWidth: 166,                            // shadow width for top back anim
 +
shadowBtmWidth:    50,                              // shadow width for bottom shadow
  
 +
before:            function(){},                    // callback invoked before each page turn animation
 +
after:              function(){}                    // callback invoked after each page turn animation
 +
});
 +
Cufon.refresh();
 +
}
 +
}).attr('src',source);
 +
});
 +
 +
});
 +
        </script>
 
</center>
 
</center>
  

Revision as of 05:23, 4 June 2015

Team NAIT 2015
Our Summer Logbook
Loading pages...