Team:Dundee/Notebook

From 2014.igem.org

(Difference between revisions)
 
(95 intermediate revisions not shown)
Line 9: 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">
 
    
    
-
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
+
<style type="text/css">
 +
 
 +
.jumbotron{
 +
  height: 300px;
 +
  background: green;
 +
  color: white;
   
   
-
<style>
+
}   
-
+
#btnRow{
-
img.bg {
+
    padding-top: 30px;  
-
/* Set rules to fill background */
+
    padding-bottom: 30px;
-
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>
+
 +
.toLesson{
 +
    background: green;
 +
    color: white;
 +
}
 +
.btn-group > a{
 +
color: #ffffff;
 +
}
 +
.toClass{
 +
    background: #97c3c3;
 +
}
-
</head>
+
#magazine{
-
 
+
top: 100px;
 +
width:1000px;
 +
height:500px;
 +
}
 +
#magazine .turn-page{
 +
background-color:#ccc;
 +
background-size:100% 100%;
 +
}
 +
.page{
 +
border: solid;
 +
border-width: 1px;
 +
}
 +
 +
</style>
 +
</head>
<body>
<body>
 +
<div class="container">
 +
    <div class="jumbotron">
 +
              <h1>Notebook</h2>
 +
            <p class="lead">When it All Happened</p>
 +
    </div>
-
<img src="https://static.igem.org/mediawiki/2014/5/5b/Dundee_test_background.jpg" class="bg">
 
 +
<div class="row">
 +
<div class="row-12">
 +
<p>
 +
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.
 +
<br/>
 +
<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>.
 +
</p>
 +
</div>
 +
</div>
-
       
+
<div id="magazine">
-
       
+
-
          <!-- Text Grid -->
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/a/ad/Dun_Notebookdun.png" alt="" width=100% height=100% ></div>
-
     
+
-
      <div id="display">
+
-
        <!-- Text Grid -->
+
-
      <div class="container">
+
-
         
+
-
        <!--Titile-->
+
-
        <div class = "row">
+
-
            <!--Used to center "poster" column-->
+
<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-3"></div>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/1/12/DUN_Notebook_text_Slide01.png" alt="" width=100% height=100% ></div>
-
            <div class="col-md-6 col-centered" id="title">
+
 
-
                <div class = "row">
+
 
-
               
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/8a/NoteDunWeek1.jpg" alt="" width=100% height=100% ></div>
-
                  <h1>Diary Library</h1>
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/86/DUN_Notebook_text_Slide02.png" alt="" width=100% height=100% ></div>
-
                   
+
 
-
                </div>
+
 
-
            </div>  
+
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/e4/NoteDunWeek2.jpg" alt="" width=100% height=100% ></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>
-
            <!--Used to center "poster" column-->
+
 
-
            <div class="col-md-3"></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>
-
     <! -- Image -->
+
 
-
     <div class = "row">
+
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/e1/NoteDunWeek4.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/d/df/DUN_Notebook_text_Slide04.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/6/6e/NoteDunWeek5.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/4c/DUN_Notebook_text_Slide05.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/7/70/NoteDunWeek6.jpg" alt="" width=100% height=100% ></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>
 +
 
 +
 
 +
 
 +
<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>
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/d/dc/NoteDunWeek8.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/9/97/DUN_Notebook_text_Slide08.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
 
 +
 
 +
<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>
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/c/c1/NoteDunWeek10.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/b/b3/DUN_Notebook_text_Slide10.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/f/fb/NoteDunWeek11.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/ec/DUN_Notebook_text_Slide11.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/0/0f/NoteDunWeek12.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/e/ef/DUN_Notebook_text_Slide12.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
<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>
 +
 
 +
 
 +
 
 +
<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>
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/8/89/NoteDunWeek15.jpg" alt="" width=100% height=100% ></div>
 +
<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>
 +
 
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/49/NoteDunWeek17.jpg" alt="" width=100% height=100% ></div>
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/b/b6/DUN_Notebook_text_Slide17.png" alt="" width=100% height=100% ></div>
 +
 
 +
 
 +
<div class = "page" ><img src="https://static.igem.org/mediawiki/2014/4/46/NoteDunWeek18.jpg" alt="" width=100% height=100% ></div>
 +
<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>
 +
<div class="row">
 +
<div class="col-12">
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
</div>
 +
</div>
 +
    <div class="row" id="btnRow">
 +
      <div class="btn-group btn-group-justified">
 +
  <div class="btn-group">
 +
<a class="btn btn-default toClass" id="lastPage">Previous Page</a> 
 +
  </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> 
 +
 
 +
 
 +
<script type="text/javascript">
 +
 
 +
$(window).ready(function() {
 +
$('#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>
-
            <!--Used to center "poster" column-->
 
-
            <div class=" col-md-3"></div>
 
-
           
 
-
            <div class="col-md-6 col-centered" id="info">                                     
 
-
                <a href="#bookHolder"  data-toggle="modal"><img src="http://placehold.it/350x150" class="img-responsive" onclick="showBook(0)" alt="Responsive image"></a>
 
-
                <a href="#bookHolder"  data-toggle="modal"><img onclick="showBook(1)" src="http://placehold.it/350x150" ></a>
 
-
            </div>   
 
-
           
 
-
       
 
-
            <!--Used to center "poster" column-->
 
-
            <div class="col-md-3"></div>
 
-
    </div>
 
-
     
 
-
 
-
    </div>
 
-
    </div>
 
-
       
 
-
    <script>
 
-
        //change book content
 
-
        function showBook(book) {
 
-
           
 
-
            var newBook = document.createElement("div");
 
-
            var des = document.getElementById("description")
 
-
           
 
-
            newBook.id = "mybook";
 
-
           
 
-
            if(book == 0){
 
-
               
 
-
                des.textContent = "A week by week description of what has happened in the labs";
 
-
               
 
-
                var c = document.createElement("div");
 
-
                var p1 = document.createElement("div");
 
-
                var p2 = document.createElement("div");
 
-
                var p3 = document.createElement("div");
 
-
               
 
-
               
 
-
                var cCont = document.createElement("img");
 
-
                var p1Cont = document.createElement("img");
 
-
                var p2Cont = document.createElement("img");
 
-
                var p3Cont = document.createElement("img");
 
-
               
 
-
                cCont.className = "pageImage";
 
-
                p1Cont.className = "pageImage";
 
-
                p2Cont.className = "pageImage";
 
-
                p3Cont.className = "pageImage";
 
-
               
 
-
                cCont.src = "img/Books/Diary/diaryFront.jpg";
 
-
                c.appendChild(cCont);
 
-
               
 
-
                p1Cont.src = "img/Books/Diary/week1.jpg";
 
-
                p1.appendChild(p1Cont);
 
-
               
 
-
                p2Cont.src = "img/Books/Diary/week2.jpg";
 
-
                p2.appendChild(p2Cont);
 
-
               
 
-
                p3Cont.src = "img/Books/Diary/week3.jpg";
 
-
                p3.appendChild(p3Cont);
 
-
               
 
-
                newBook.appendChild(c);
 
-
                newBook.appendChild(p1);
 
-
                newBook.appendChild(p2);
 
-
                newBook.appendChild(p3);
 
-
               
 
-
                   
 
-
            }
 
-
            else if(book == 1){
 
-
               
 
-
                des.textContent = "Some pictures of the adventure!";
 
-
               
 
-
                var c = document.createElement("div");
 
-
                var p1 = document.createElement("div");
 
-
                var p2 = document.createElement("div");
 
-
                var p3 = document.createElement("div");
 
-
                var p4 = document.createElement("div");
 
-
               
 
-
               
 
-
                var cCont = document.createElement("img");
 
-
                var p1Cont = document.createElement("img");
 
-
                var p2Cont = document.createElement("img");
 
-
                var p3Cont = document.createElement("img");
 
-
                var p4Cont = document.createElement("img");
 
-
               
 
-
                cCont.className = "pageImage";
 
-
                p1Cont.className = "pageImage";
 
-
                p2Cont.className = "pageImage";
 
-
                p3Cont.className = "pageImage";
 
-
                p4Cont.className = "pageImage";
 
-
               
 
-
               
 
-
                cCont.src = "img/Books/photos/memFront.jpg";
 
-
                c.appendChild(cCont);
 
-
               
 
-
                p1Cont.src = "img/Books/photos/mem1.jpg";
 
-
                p1.appendChild(p1Cont);
 
-
               
 
-
                p2Cont.src = "img/Books/photos/mem2.jpg";
 
-
                p2.appendChild(p2Cont);
 
-
               
 
-
                p3Cont.src = "img/Books/photos/mem3.jpg";
 
-
                p3.appendChild(p3Cont);
 
-
               
 
-
                p4Cont.src = "img/Books/photos/mem4.jpg";
 
-
                p4.appendChild(p4Cont);
 
-
               
 
-
                newBook.appendChild(c);
 
-
                newBook.appendChild(p1);
 
-
                newBook.appendChild(p2);
 
-
                newBook.appendChild(p3);
 
-
                newBook.appendChild(p4);
 
-
               
 
-
            }
 
-
           
 
-
            document.getElementById("modalContent").appendChild(newBook);
 
-
           
 
-
           
 
-
            $('#mybook').booklet({ 
 
-
                closed: true,
 
-
                pageNumbers:false,
 
-
                pagePadding: 0,
 
-
                autoCenter: true
 
-
            });
 
-
 
-
        }       
 
-
       
 
-
       
 
-
        function removeBook(){
 
-
                var modal = document.getElementById("modalContent");
 
-
                modal.removeChild(modal.lastChild);
 
-
        }
 
-
    </script>
 
-
       
 
-
    <!-- MODALS -->
 
-
    <div class ="modal static" id="bookHolder" role="dialog" data-backdrop="static">
 
-
        <div class = "modal-dialog">
 
-
            <div class="modal-content">
 
-
                <div class="modal-header"></div>
 
-
               
 
-
                <div class="modal-body">
 
-
                <div class ="row">
 
-
                    <div class = "col-md-6" id="modalContent"></div>
 
-
                   
 
-
                    <div class = "col-md-6" >
 
-
                    <p style="padding:30px;" id="description"></p>
 
-
                    </div>       
 
-
                   
 
-
                </div>
 
-
                </div>
 
-
                <div class="modal-footer">
 
-
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="removeBook()">Close</button>
 
-
                    </div>
 
-
            </div>
 
-
        </div>
 
-
   
 
-
    </div>
 
-
    <!-- STOP MODAL BEING UNDER BACKGROUND!-->
+
<!-- jQuery -->
-
    <script>
+
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>    
-
    $('#bookHolder').appendTo("body").modal('show');
+
<!-- Bootstrap -->
-
    </script>  
+
<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://code.jquery.com/jquery-latest.js"></script>
 
-
    <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.