Team:Dundee/Notebook

From 2014.igem.org

(Difference between revisions)
 
(64 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:Dundee/Template/header}}
{{:Team:Dundee/Template/header}}
 +
<html>
<html>
Line 8: Line 9:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      
 +
 +
  <link href="https://2014.igem.org/Team:Dundee/stylesheet/notebook?action=raw&ctype=text/css" rel="stylesheet">
 +
   <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
   <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
   <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
   <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
-
  <link href="https://2014.igem.org/Team:Dundee/animate?action=raw&ctype=text/css" rel="stylesheet">
 
    
    
 +
<style type="text/css">
-
   
+
.jumbotron{
-
   
+
  height: 300px;
-
   
+
  background: green;
-
<link href="https://2014.igem.org/Team:Dundee/Team/booklet/css?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
+
  color: white;
-
 
+
-
<!-- jQuery -->
+
-
    <script src="http://code.jquery.com/jquery-latest.js"></script>
+
   
   
-
<!-- jQuery UI -->    
+
}    
-
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
+
#btnRow{
-
      
+
    padding-top: 30px;
-
<!-- booklet js file-->
+
     padding-bottom: 30px;
-
<script src="https://2014.igem.org/Team:Dundee/Team/booklet/js?action=raw&ctype=text/javascript"></script>   
+
} 
-
 
+
-
<link href="https://2014.igem.org/Team:Dundee/Team/booklet/css?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
+
-
   
+
.toLesson{
-
   
+
    background: green;
-
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
+
    color: white;
-
+
}
-
<style>
+
-
+
-
img.bg {
+
-
/* Set rules to fill background */
+
-
min-height: 100%;
+
-
min-width: 1024px;
+
-
+
-
/* Set up proportionate scaling */
+
-
width: 100%;
+
-
height: auto;
+
-
+
-
/* Set up positioning */
+
-
position: fixed;
+
-
top: 0;
+
-
left: 0;
+
-
}
+
-
+
-
@media screen and (max-width: 1024px){
+
-
img.bg {
+
-
left: 50%;
+
-
margin-left: -512px; }
+
-
}
+
-
</style>
+
 +
.btn-group > a{
 +
color: #ffffff;
 +
}
 +
.toClass{
 +
    background: #97c3c3;
 +
}
 +
#magazine{
 +
top: 100px;
 +
width:1000px;
 +
height:500px;
 +
}
 +
#magazine .turn-page{
 +
background-color:#ccc;
 +
background-size:100% 100%;
 +
}
-
</head>
+
.page{
-
 
+
border: solid;
 +
border-width: 1px;
 +
}
 +
</style>
 +
</head>
<body>
<body>
-
<img src="https://static.igem.org/mediawiki/2014/5/5b/Dundee_test_background.jpg" class="bg">
+
<div class="container">
 +
    <div class="jumbotron">
 +
              <h1>Notebook</h2>
 +
            <p class="lead">When it All Happened</p>
 +
    </div>
-
     
+
<div class="row">
-
          <!-- Text Grid -->
+
<div class="row-12">
-
     
+
<p>
-
      <div id="display">
+
In this book you can read our weekly account of our work, which was carried out over the summer; everything from failed western blots to frustrating stochastic modelling.
-
        <!-- Text Grid -->
+
<br/>
-
      <div class="container">
+
<br/>
-
         
+
To view this content out of book form and in a more classic format click  <a href="https://2014.igem.org/Team:Dundee/Notebook/normal">here</a>.
-
        <!--Titile-->
+
</p>
-
        <div class = "row">
+
</div>
 +
</div>
-
            <!--Used to center "poster" column-->
+
<div id="magazine">
-
            <div class=" col-md-3"></div>
+
-
            <div class="col-md-6 col-centered" id="title">
+
-
                <div class = "row">
+
-
               
+
-
                  <h1>Diary Library</h1>
+
-
                   
+
-
                </div>
+
-
            </div>   
+
-
       
+
-
            <!--Used to center "poster" column-->
+
-
            <div class="col-md-3"></div>
+
-
     
+
-
        </div>
+
-
    <! -- Image -->
+
-
    <div class = "row">
+
-
            <!--Used to center "poster" column-->
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/a/ad/Dun_Notebookdun.png" alt="" width=100% height=100% ></div>
-
            <div class=" col-md-3"></div>
+
 
-
           
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/d/d9/NoteDunWeek0.jpg" alt="" width=100% height=100% ></div>  
-
            <div class="col-md-6 col-centered" id="info">                                      
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/1/12/DUN_Notebook_text_Slide01.png" alt="" width=100% height=100% ></div>
-
                <a href="#bookHolder" data-toggle="modal"><img src="http://flickholdr.iwerk.org/200/300/sea,sun/bw" class="img-responsive" onclick="showBook(0)" alt="Responsive image"></a>
+
 
-
           
+
 
-
            </div>  
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/8a/NoteDunWeek1.jpg" alt="" width=100% height=100% ></div>
-
           
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/86/DUN_Notebook_text_Slide02.png" alt="" width=100% height=100% ></div>
-
       
+
 
-
            <!--Used to center "poster" column-->
+
 
-
            <div class="col-md-3"></div>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/e4/NoteDunWeek2.jpg" alt="" width=100% height=100% ></div>  
-
    </div>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/3/35/DUN_Notebook_text_Slide03.png" alt="" width=100% height=100% ></div>
-
     
+
 
-
+
 
-
    </div>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/3/3c/NoteDunWeek3.jpg" alt="" width=100% height=100% ></div>  
-
    </div>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/82/DUN_Notebook_missing_Slide04.png" alt="" width=100% height=100% ></div>
-
       
+
 
-
    <script>
+
 
-
        //change book content
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/e1/NoteDunWeek4.jpg" alt="" width=100% height=100% ></div>  
-
        function showBook(book) {
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/d/df/DUN_Notebook_text_Slide04.png" alt="" width=100% height=100% ></div>
-
           
+
 
-
            var newBook = document.createElement("div");
+
 
-
            var des = document.getElementById("description")
+
 
-
           
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/6/6e/NoteDunWeek5.jpg" alt="" width=100% height=100% ></div>
-
            newBook.id = "mybook";
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/4c/DUN_Notebook_text_Slide05.png" alt="" width=100% height=100% ></div>
-
           
+
 
-
            if(book == 0){
+
 
-
               
+
 
-
                des.textContent = "A week by week description of what has happened in the labs";
+
 
-
               
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/7/70/NoteDunWeek6.jpg" alt="" width=100% height=100% ></div>
-
                var c = document.createElement("div");
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/8d/DUN_Notebook_text_Slide06.png" alt="" width=100% height=100% ></div>
-
                var p1 = document.createElement("div");
+
 
-
                var p2 = document.createElement("div");
+
 
-
                var p3 = document.createElement("div");
+
 
-
               
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/2/25/NoteDunWeek7.jpg" alt="" width=100% height=100% ></div>
-
               
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/4a/DUN_Notebook_text_Slide07.png" alt="" width=100% height=100% ></div>
-
                var cCont = document.createElement("img");
+
 
-
                var p1Cont = document.createElement("img");
+
 
-
                var p2Cont = document.createElement("img");
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/d/dc/NoteDunWeek8.jpg" alt="" width=100% height=100% ></div>
-
                var p3Cont = document.createElement("img");
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/9/97/DUN_Notebook_text_Slide08.png" alt="" width=100% height=100% ></div>
-
               
+
 
-
                cCont.className = "pageImage";
+
 
-
                p1Cont.className = "pageImage";
+
 
-
                p2Cont.className = "pageImage";
+
 
-
                p3Cont.className = "pageImage";
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/0/07/NoteDunWeek9.jpg" alt="" width=100% height=100% ></div>
-
               
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/2/29/DUN_Notebook_text_Slide09.png" alt="" width=100% height=100% ></div>
-
                cCont.src = "http://flickholdr.iwerk.org/200/300/sea,sun";
+
 
-
                c.appendChild(cCont);
+
 
-
               
+
 
-
                p1Cont.src = "http://flickholdr.iwerk.org/200/300/sea,sun";
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/c/c1/NoteDunWeek10.jpg" alt="" width=100% height=100% ></div>
-
                p1.appendChild(p1Cont);
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/b/b3/DUN_Notebook_text_Slide10.png" alt="" width=100% height=100% ></div>
-
               
+
 
-
                p2Cont.src = "http://flickholdr.iwerk.org/200/300/sea,sun";
+
 
-
                p2.appendChild(p2Cont);
+
 
-
               
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/f/fb/NoteDunWeek11.jpg" alt="" width=100% height=100% ></div>
-
                p3Cont.src = "http://flickholdr.iwerk.org/200/300/sea,sun";
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/ec/DUN_Notebook_text_Slide11.png" alt="" width=100% height=100% ></div>
-
                p3.appendChild(p3Cont);
+
 
-
               
+
 
-
                newBook.appendChild(c);
+
 
-
                newBook.appendChild(p1);
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/0/0f/NoteDunWeek12.jpg" alt="" width=100% height=100% ></div>
-
                newBook.appendChild(p2);
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/ef/DUN_Notebook_text_Slide12.png" alt="" width=100% height=100% ></div>
-
                newBook.appendChild(p3);
+
 
-
               
+
 
-
                   
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/7/7b/NoteDunWeek13.jpg" alt="" width=100% height=100% ></div>
-
            }
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/f/f0/DUN_Notebook_text_Slide13.png" alt="" width=100% height=100% ></div>
-
       
+
 
-
           
+
 
-
            document.getElementById("modalContent").appendChild(newBook);
+
 
-
           
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/0/0a/NoteDunWeek14.jpg" alt="" width=100% height=100% ></div>
-
           
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/1/18/DUN_Notebook_text_Slide14.png" alt="" width=100% height=100% ></div>
-
            $('#mybook').booklet({ 
+
 
-
                closed: true,
+
 
-
                pageNumbers:false,
+
 
-
                pagePadding: 0,
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/89/NoteDunWeek15.jpg" alt="" width=100% height=100% ></div>
-
                autoCenter: true
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/6/63/DUN_Notebook_text_Slide15.png" alt="" width=100% height=100% ></div>
-
            });
+
 
-
+
 
-
        }       
+
 
-
       
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/f/f3/NoteDunWeek16.jpg" alt="" width=100% height=100% ></div>
-
       
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/7/7b/DUN_Notebook_text_Slide16.png" alt="" width=100% height=100% ></div>
-
        function removeBook(){
+
 
-
                var modal = document.getElementById("modalContent");
+
 
-
                modal.removeChild(modal.lastChild);
+
 
-
        }
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/49/NoteDunWeek17.jpg" alt="" width=100% height=100% ></div>  
-
    </script>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/b/b6/DUN_Notebook_text_Slide17.png" alt="" width=100% height=100% ></div>
-
       
+
 
-
    <!-- MODALS -->  
+
 
-
    <div class ="modal static" id="bookHolder" role="dialog" data-backdrop="static">
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/46/NoteDunWeek18.jpg" alt="" width=100% height=100% ></div>  
-
        <div class = "modal-dialog">
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/c/c5/DUN_Notebook_text_Slide18.png" alt="" width=100% height=100% ></div>
-
            <div class="modal-content holderSpace">
+
 
-
                <div class="modal-header"></div>
+
</div>
-
               
+
<div class="row">
-
                <div class="modal-body">  
+
<div class="col-12">
-
                <div class ="row">
+
<br/>
-
                    <div class = "col-md-6" id="modalContent"></div>
+
<br/>
-
                   
+
<br/>
-
                    <div class = "col-md-6" >
+
<br/>
-
                    <p style="padding:30px;" id="description"></p>
+
<br/>
-
                    </div>      
+
<br/>
-
                   
+
</div>
-
                </div>
+
</div>
-
                </div>
+
    <div class="row" id="btnRow">
-
                <div class="modal-footer">
+
      <div class="btn-group btn-group-justified">
-
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="removeBook()">Close</button>
+
  <div class="btn-group">
-
                    </div>
+
<a class="btn btn-default toClass" id="lastPage">Previous Page</a> 
-
            </div>
+
  </div>
-
        </div>
+
  <div class="btn-group">
-
   
+
 
 +
  </div>
 +
  <div class="btn-group">
 +
    <a class="btn btn-default  toClass" id="nextPage">Next Page</a>
 +
  </div>
 +
</div>
 +
<div class="row">
 +
<div class="col-12">
 +
<hr>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
 
 +
    <div class="row" id="btnRow">
 +
      <div class="btn-group btn-group-justified">
 +
  <div class="btn-group">
 +
    <a href ="Safety" class="btn btn-default toLesson">Previous Book: Safety & Protocols</a>
 +
  </div>
 +
  <div class="btn-group">
 +
<a href="https://2014.igem.org/Team:Dundee/inside/library" class="btn btn-default toClass">Back to Library</a>
 +
  </div>
 +
  <div class="btn-group">
 +
    <a href ="famAlbum" class="btn btn-default toLesson">Next Book: Family Album</a>
 +
  </div>
 +
</div>
     </div>   
     </div>   
-
    <!-- STOP MODAL BEING UNDER BACKGROUND!-->
+
<script type="text/javascript">
-
    <script>
+
 
-
    $('#bookHolder').appendTo("body").modal('show');
+
$(window).ready(function() {
-
    </script>  
+
$('#magazine').turn({
 +
display: 'double',
 +
acceleration: true,
 +
gradients: !$.isTouch,
 +
elevation:50,
 +
when: {
 +
turned: function(e, page) {
 +
/*console.log('Current view: ', $(this).turn('view'));*/
 +
}
 +
}
 +
});
 +
});
 +
 +
 +
$(window).bind('keydown', function(e){
 +
 +
if (e.keyCode==37)
 +
$('#magazine').turn('previous');
 +
else if (e.keyCode==39)
 +
$('#magazine').turn('next');
 +
 +
});
 +
 
 +
$( "#lastPage" ).click(function() {
 +
  $('#magazine').turn('previous');
 +
});
 +
 
 +
$( "#nextPage" ).click(function() {
 +
  $('#magazine').turn('next');
 +
});
 +
 
 +
        $( "#info" ).click( function() {
 +
        $('#welcomeNote').appendTo("body");
 +
  $("#welcomeNote").modal();
 +
});
 +
 
 +
</script>
 +
 
 +
 
 +
<!-- jQuery -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>   
 +
<!-- Bootstrap -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/bootstrap-js?action=raw&ctype=text/javascript"></script>
 +
<!-- Turn js -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>
</body>
</body>
-
   
 
-
   
 
-
    <!-- JS import  WILL NEED CHANGED DONE LOCAL FOR BS -->
 
-
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 
</html>
</html>
 +
{{:Team:Dundee/Template/welcomeNoteLibrary}}

Latest revision as of 23:22, 17 October 2014

Dundee 2014

Dundee 2014


Dundee 2014 Team

Notebook

When it All Happened

In this book you can read our weekly account of our work, which was carried out over the summer; everything from failed western blots to frustrating stochastic modelling.

To view this content out of book form and in a more classic format click here.