Difference between revisions of "Team:Glasgow/Practices"

Line 1: Line 1:
−
<html lang="en">
+
{{GlasgowNavbar}}
−
  <head>
+
<html>
−
    <meta charset="utf-8">
+
  <head>
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<script type="text/javascript" >
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
function menuFixed(id){
−
    <meta name="description" content="">
+
var obj = document.getElementById(id);
−
    <meta name="author" content="">
+
var _getHeight = obj.offsetTop;
−
    <link rel="icon" href="../../favicon.ico">
+
  
−
    <title>IGEM Glasgow 2015 funding</title>
+
window.onscroll = function(){
 +
changePos(id,_getHeight);
 +
}
 +
}
 +
function changePos(id,height){
 +
var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop - 150;
 +
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
var w = window.innerWidth;
 +
if(w>=1024){
 +
  if($(window).scrollTop() + $(window).height() > $(document).height() - 500){
 +
                $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
 +
}
 +
if(scrollTop < height){ obj.style.position = 'relative';     
 +
}else{
 +
obj.style.position = 'fixed';
 +
}
 +
}
 +
</script>
  
−
    <!-- Bootstrap core CSS
+
<script type="text/javascript">
−
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+
window.onload = function(){
−
   
+
menuFixed('sidebar');
−
  -->
+
}
−
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+
</script>
  
−
    <!-- Custom styles for this template
+
<script type="text/javascript">
−
    <link href="http://getbootstrap.com/examples/jumbotron/jumbotron.css" rel="stylesheet">-->
+
// 收缩展开效果
−
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
+
$(document).ready(function(){
−
    <style>
+
  // $(".box h5").toggle(function(){
−
    body {
+
  //  $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
−
padding-top: 0px;
+
// },function(){
−
padding-bottom: 0px;
+
//$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
−
}
+
  //});
−
  .navbar {
+
$("div.text").hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者
−
    margin-bottom: 0px !important;
+
$(".box h5").click(function(){
−
    border-radius: 0px !important;
+
$(this).next(".text").slideToggle("slow");
−
  }
+
})
−
  .navbar-inverse .navbar-brand, .navbar-brand:hover {
+
});
−
    color: white;
+
</script>
−
  }
+
      <style>
−
#content{
+
          .firstHeading {
−
height:90px;
+
          display:none;
−
  padding: 0px 0px 0px 0px;
+
        }
−
  border-left: 0px solid #444444;  
+
              figcaption {
−
  border-right: 0px solid #444444;  
+
            color: #666666;
−
  background:transparent;
+
            font-size: 0.7em;
−
  width:auto;
+
            font-style: italic;
−
  height: auto;
+
            font-family: 'Noto Sans', sans-serif;
−
}
+
            margin-bottom: 15px;
−
    </style>
+
        }
 +
        #content {
 +
    width:auto;
 +
    height:auto;
 +
    padding:0px 0px 0px 0px;
 +
    border:none;
 +
    }
 +
      * {
 +
                padding:0;
 +
                margin:0;
 +
            }
 +
       
 +
        .banner {
 +
            height:55vh;
 +
            top:0;
 +
            background-color:black;
 +
        }
 +
            h1 {
 +
                color:white;
 +
                margin-top:15vh;
 +
                margin-left: 20vw;
 +
                position:absolute;
 +
                font-size: 4em;
 +
            }
 +
           
 +
            .links {
 +
                margin-top: 5vh;
 +
                text-decoration:none;
 +
                color:blue;
 +
                margin-left:5vw;
 +
            }
  
−
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
+
           
−
    <!--[if lt IE 9]><script src="view-source:http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
            .containerRight {
−
    <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
+
                width:70vw;
 +
                text-align: justify;
 +
                background-color:white;
 +
                margin-left: 25vw;
 +
                /*float: right;*/
 +
            }             
 +
     
 +
            div h2 {
 +
                text-align: center;
 +
                margin-bottom: 8vh;
 +
                margin-top:5vh;
 +
            }
 +
            /*
 +
            .leftContainer {
 +
                width:22vw;
 +
                float:left;
 +
                height:100%;
 +
                text-align: center;
 +
                background-color:white;
 +
            }*/
  
−
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+
            table {
−
    <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
+
                margin-top:15vh;
 +
                border-radius: 10%;
 +
                margin-left:7.5vw;
 +
                float:left;
 +
                text-align:center;
 +
            }
 +
           
 +
            td {
 +
                padding:0.8vw;
 +
                cursor:pointer;
 +
                margin-top: 4vh;
 +
                color:deepskyblue;
 +
            }
 +
           
 +
            td:hover {
 +
                margin-top: 4vh;
 +
                background-color: deepskyblue;
 +
                color:white;               
 +
            }
 +
           
 +
            .fixed {
 +
                position: fixed;
 +
                top:5vh;
  
−
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
            }
−
    <!--[if lt IE 9]>
+
           
−
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
            .final {
−
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
                top: 230vh;
−
    <![endif]-->
+
                position:relative;
−
  </head>
+
            }
  
−
 
+
           
−
 
+
            .monster {
−
<!----------begin-------->
+
                height:50vh;
−
  <body>
+
                width:15vw;
−
    <script>
+
                position:relative;
−
    $(".progress-bar").css("width",'80%')
+
                display:inline-block;
−
    </script>
+
                margin: 0 auto;
 +
            }
 +
           
 +
            .monsterContainer {
 +
                width:70vw;
 +
                height:50vh;
 +
                margin:10vh auto;
 +
                text-align: justify;
 +
                margin-bottom: 10vh;
 +
               
 +
            }
 +
           
 +
            .monsterContainer:after {
 +
                content: "";
 +
            width: 100%;
 +
                display: inline-block;
 +
            }
  
−
<div class="navbar navbar-inverse" role="navigation">
+
            .monsterImg {
−
    <div class="container">
+
                height:100%;
−
      <div class="navbar-header">
+
                width:100%;
−
        <a class="navbar-brand" style="text-align: center;">IGEM Glasgow funding</a>
+
                opacity:0.92;
−
      </div>
+
                box-shadow: 0 0 5px purple;
−
    </div>
+
            }
−
  </div>
+
  
 +
            h3 {
 +
                color: white;
 +
                position:absolute;
 +
                bottom:5%;
 +
                left: 5%;
 +
                width:100%;
 +
                opacity:0.85;
 +
            }
  
−
<div class='container' style="text-align:center;font-family: sans-serif;">
+
            monsterSpan {
−
<p style="font-size: 60px;">Collected miles: <br/></p>
+
                letter-spacing: -1px;
 +
                background: rgb(30, 5, 90);
 +
                background: rgba(30, 5, 90, 0.7);
 +
                padding:5%;
 +
            }
  
−
<div class="row">
+
            .dimmer {
−
<div class="col-sm-4">
+
                opacity:1;
−
    <img src="https://static.igem.org/mediawiki/2015/8/81/2015-Glasgow-running.png"/>
+
            }
−
<h3>Walking and Running</h3>
+
−
<h4>Collected miles:361.3 miles</h4>
+
−
<hr/>
+
−
<span style='text-align:left !important;'>
+
−
</span>
+
−
<hr/>
+
−
</div>
+
−
<div class="col-sm-4">
+
−
    <img src="https://static.igem.org/mediawiki/2015/0/03/2015-Glasgow-swimming.png"/>
+
−
<h3>Swimming</h3>
+
−
<h4>Collected miles:1.4 miles</h4>
+
−
<hr/>
+
−
<span style='text-align:left !important;'>
+
−
</span>
+
−
<hr/>
+
−
</div>
+
−
<div class="col-sm-4">
+
−
    <img src="https://static.igem.org/mediawiki/2015/e/ee/2015-Glasgow-cycling.png">
+
−
<h3>Cycling</h3>
+
−
<h4>Collected miles: 118.7 miles</h4>
+
−
<hr/>
+
−
<span style='text-align:left !important;'>
+
−
</span>
+
−
<hr/>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
 
+
            .dimmer2 {
−
<style>
+
                text-decoration: underline;
−
#p-bar{
+
                opacity:1
−
  height:60px;
+
            }
 +
            h5{
 +
            text-align:center;
 +
            font-size:18px;
 
}
 
}
−
</style> 
 
−
<div class="progress" id="p-bar">
 
−
  <div class="progress-bar" id="count25" role="progressbar" style="width:11.93%;background-color: red;">
 
−
    <span class="sr-only">10%</span>
 
−
    <div style="margin-top: 20px;font-size: 20px;">11.93%</div>
 
−
  </div>
 
−
  <div class="progress-bar" id="count25" role="progressbar" style="width:0.13%;background-color: blue;">
 
−
    <span class="sr-only">20%</span>
 
−
    <div style="margin-top: 20px;font-size: 20px;">0.13%</div>
 
−
  </div>
 
−
  <div class="progress-bar" id="count25" role="progressbar" style="width:3.92%;background-color: green;">
 
−
    <span class="sr-only">10%</span>
 
−
    <div style="margin-top: 20px;font-size: 20px;">3.92%</div>
 
−
  </div>
 
−
  </div>
 
−
</div>
 
  
 +
            .text{line-height:22px;padding:0 6px;}
 +
.box h5{padding-top:0px;font-weight:bold;cursor: pointer;}
 +
.box{position:relative;border:1px solid #e7e7e7;background-color:#C1EAFF;}
 +
        figcaption {
 +
            color: #666666;
 +
            font-size: 0.7em;
 +
            font-style: italic;
 +
            font-family: 'Noto Sans', sans-serif;
 +
            margin-bottom: 15px;
 +
        }
 +
      </style>
  
 +
  </head>
  
 +
    <body>
  
  
 +
<script>
  
  
−
     
+
        $('.overview').click(function() {
−
    <div class="container">
+
            $('html, body').animate({ scrollTop: $('.scrollOverview').offset().top}, 1000);
−
      <hr>
+
        });
−
      <footer>
+
       
−
         <p>&copy; IGEM Glasgow 2015</p>
+
         $('.sensor').click(function() {
−
      </footer>
+
            $('html, body').animate({ scrollTop: $('.scrollSensor').offset().top}, 1000);
−
    </div> <!-- /container -->
+
        });
−
    <!-- Bootstrap core JavaScript
+
       
−
    ================================================== -->
+
        $('.survivability').click(function() {
−
    <!-- Placed at the end of the document so the pages load faster -->
+
            $('html, body').animate({ scrollTop: $('.scrollSurvivability').offset().top}, 1000);
−
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
        });
−
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
+
       
−
  </body>
+
        $('.conclusion').click(function() {
 +
            $('html, body').animate({ scrollTop: $('.scrollConclusion').offset().top}, 1000);
 +
        });
 +
     
 +
        $('.results').click(function() {
 +
            $('html, body').animate({ scrollTop: $('.scrollResults').offset().top}, 1000);
 +
        });
 +
       
 +
        $('.top').click(function() {
 +
            $('html, body').animate({ scrollTop: $('.scrollTop').offset().top}, 1000);
 +
        });
 +
       
 +
        </script>  
 +
<script type="text/javascript">
 +
var x = $('.links').offset().top;
 +
$(window).scroll(function() {
 +
            if ($(this).scrollTop() > x) {
 +
                $('table').addClass("fixed");
 +
            }
 +
 
 +
 
 +
            else {
 +
                $('table').removeClass("fixed");
 +
            }
 +
        });
 +
 
 +
</script>
 +
 
 +
 
 +
</body>
 
</html>
 
</html>
 +
 +
{{Glasgowfooter}}

Revision as of 10:55, 18 September 2015

Location

Bower Building, Wilkins Teaching Laboratory
University of Glasgow
University Avenue
G12 8QQ

Follow Us On