Difference between revisions of "Team:UNOTT/Experiments"

Line 1: Line 1:
 
{{:Team:UNOTT/Template/NavBarTest}}
 
{{:Team:UNOTT/Template/NavBarTest}}
−
<html>
+
<!DOCTYPE html>
 +
<html >
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 +
  <title>Expandable Boxes With CSS Transitions</title>
 +
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
 +
  
−
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 
−
<link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 +
  
 
<style>
 
<style>
−
p{
+
.container {
−
position: relative;
+
  width: 80%;
−
    
+
   margin: 30px auto;
 +
 
 
}
 
}
  
−
h1{
+
.expandable-boxes {
 
   position: relative;
 
   position: relative;
−
  width: 100%;
 
−
  text-align: center;
 
−
    margin: 0 auto;
 
−
    top:250px;
 
 
}
 
}
−
* {
+
 
 +
.expandable-box {
 +
  width: 30%;
 +
  height: 130px;
 +
  float: left;
 +
  margin: 0 3% 20px 0;
 +
  border: 1px solid #999;
 +
  border-radius: 12px;
 +
  padding: 10px;
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 +
  -webkit-transition: all .3s ease-in-out;
 +
  -moz-transition: all .3s ease-in-out;
 +
  -o-transition: all .3s ease-in-out;
 +
  -ms-transition: all .3s ease-in-out;
 +
  transition: all .3s ease-in-out;
 +
  background-color: #02263e;
 
}
 
}
−
body {
+
.expandable-box.open {
−
  font-family: 'Helvetica';
+
   border-color: #D74214;
−
  font-weight: 400;
+
   border-width: thick;
−
  text-align: center;
+
   width: 96%;
−
  ;
+
   height: 500px;
−
}
+
−
.blocks {
+
−
   position: fixed;
+
−
  bottom: 0;
+
−
  z-index: 1;
+
−
   list-style-type: none;
+
−
   display: -webkit-box;
+
−
   display: -ms-flexbox;
+
−
  display: flex;
+
−
  width: 100%;
+
 
   margin: 0;
 
   margin: 0;
−
  padding: 0;
+
   background-color: #02263e;
−
}
+
−
.blocks__block {
+
−
  will-change: transform;
+
−
  position: relative;
+
−
  height: 20vh;
+
−
  -webkit-box-flex: 1;
+
−
      -ms-flex: 1;
+
−
          flex: 1;
+
−
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+
−
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+
−
}
+
−
.blocks__block:nth-child(1) {
+
−
   background: #EFF0E3;
+
−
  -webkit-transform-origin: 0% 100%;
+
−
          transform-origin: 0% 100%;
+
−
}
+
−
.blocks__block:nth-child(2) {
+
−
  background: #CDD7B6;
+
−
  -webkit-transform-origin: 25% 100%;
+
−
          transform-origin: 25% 100%;
+
−
}
+
−
.blocks__block:nth-child(3) {
+
−
  background: #B7D18F;
+
−
  -webkit-transform-origin: 50% 100%;
+
−
          transform-origin: 50% 100%;
+
−
}
+
−
.blocks__block:nth-child(4) {
+
−
  background: #6C8768;
+
−
  -webkit-transform-origin: 75% 100%;
+
−
          transform-origin: 75% 100%;
+
 
}
 
}
−
.blocks__block:nth-child(5) {
+
.expandable-box.out {
−
   background: #4B524A;
+
   width: 0;
−
   -webkit-transform-origin: 100% 100%;
+
   height: 0;
−
          transform-origin: 100% 100%;
+
   overflow: hidden;
−
}
+
   border: none;
−
.blocks__block.active {
+
−
   z-index: 2;
+
−
}
+
−
.blocks-content {
+
−
   list-style-type: none;
+
−
  margin: 0;
+
 
   padding: 0;
 
   padding: 0;
−
   position: absolute;
+
   margin: 0;
−
  bottom: 0;
+
−
  left: 0;
+
−
  height: 100vh;
+
−
  width: 100%;
+
−
}
+
−
.blocks-content__content {
+
−
  will-change: transform, opacity;
+
−
  display: -webkit-box;
+
−
  display: -ms-flexbox;
+
−
  display: flex;
+
−
  -webkit-box-align: center;
+
−
      -ms-flex-align: center;
+
−
          align-items: center;
+
−
  -webkit-box-pack: center;
+
−
      -ms-flex-pack: center;
+
−
          justify-content: center;
+
−
  text-align: center;
+
−
  -webkit-box-orient: vertical;
+
−
  -webkit-box-direction: normal;
+
−
      -ms-flex-direction: column;
+
−
          flex-direction: column;
+
−
  position: fixed;
+
−
  width: 100%;
+
−
  z-index: 3;
+
−
  top: 0;
+
−
  left: 0;
+
−
  height: 100vh;
+
−
  padding: 10vw;
+
−
  font-size: 20px;
+
 
   opacity: 0;
 
   opacity: 0;
−
  visibility: hidden;
+
 
−
  text-align: center;
+
−
  -webkit-transform: scale(0.9);
+
−
          transform: scale(0.9);
+
−
  -webkit-transition: all 0.3s 0.2s ease-out;
+
−
  transition: all 0.3s 0.2s ease-out;
+
 
}
 
}
−
.blocks-content__content.active {
+
body {
−
   opacity: 1;
+
   background: #ffffff;
−
  -webkit-transform: scale(1);
+
 
−
          transform: scale(1);
+
−
  visibility: visible;
+
 
}
 
}
−
.blocks-content .blocks__content-close {
+
h1{
−
  position: absolute;
+
    color: #02263e;
−
  right: 2vw;
+
−
  top: 2vh;
+
−
  font-size: 30px;
+
−
  cursor: pointer;
+
−
  -webkit-transition: all 0.2s ease-out;
+
−
  transition: all 0.2s ease-out;
+
−
  margin-top: 80px;
+
 
}
 
}
−
.blocks-content .blocks__content-close:hover {
+
h2{
−
  -webkit-transform: scale(1.1);
+
    color: #ffffff;
−
          transform: scale(1.1);
+
 
}
 
}
−
.blocks-content p {
+
p{
−
  font-size: 16px;
+
    color: #ffffff;
−
  line-height: 2;
+
−
  max-width: 800px;
+
 
}
 
}
−
.blocks-content h2 {
+
 
−
  padding: 15px 30px;
+
html {
−
  font-weight: 300;
+
height: 100%;
−
  letter-spacing: 6px;
+
−
  box-shadow: inset 0 0 0 3px #000;
+
 
}
 
}
−
.blocks-names {
+
body {
−
  position: fixed;
+
display: flex;
−
  bottom: 0;
+
align-items: center;
−
  left: 0;
+
justify-content: center;
−
  z-index: 2;
+
height: 100%;
−
  width: 100%;
+
   user-select: none;
−
   list-style-type: none;
+
background: #ffffff;
−
  margin: 0;
+
−
  padding: 0;
+
−
  display: -webkit-box;
+
−
  display: -ms-flexbox;
+
−
  display: flex;
+
−
  font-size: 18px;
+
−
  letter-spacing: 4px;
+
−
  cursor: pointer;
+
−
  -webkit-transition: all 0.15s ease-out;
+
−
  transition: all 0.15s ease-out;
+
 
}
 
}
−
.blocks-names .blocks__name {
+
 
−
  -webkit-box-flex: 1;
+
#whoa-cool-button {
−
      -ms-flex: 1;
+
font-family: 'Roboto';
−
          flex: 1;
+
font-size: 18pt;
−
  height: 20vh;
+
font-weight: bold;
−
  display: -webkit-box;
+
color: white;
−
  display: -ms-flexbox;
+
background: #009688;
−
  display: flex;
+
padding: 15px 0px;
−
  -webkit-box-align: center;
+
border-radius: 20px;
−
      -ms-flex-align: center;
+
box-shadow: 0px 15px 0px 0px #00695C;
−
          align-items: center;
+
cursor: pointer;
−
  -webkit-box-pack: center;
+
transition: .2s;
−
      -ms-flex-pack: center;
+
margin-right: 0px;
−
          justify-content: center;
+
    width: 100px;
 +
    height:100p;
 
}
 
}
  
−
main {
+
#whoa-cool-button:active {
−
  position: relative;
+
transform: translateY(14px);
−
  z-index: 1;
+
box-shadow: 0px 1px 0px 0px #00695C;
−
  padding: 3vh 5vw;
+
−
  height: 80vh;
+
−
  display: -webkit-box;
+
−
  display: -ms-flexbox;
+
−
  display: flex;
+
−
  -ms-flex-flow: column wrap;
+
−
      flex-flow: column wrap;
+
−
  -webkit-box-pack: center;
+
−
      -ms-flex-pack: center;
+
−
          justify-content: center;
+
−
  background: #02263e;
+
 
}
 
}
−
main h1 {
+
 
−
  margin: 0;
+
.clickbutton{
−
  font-weight: 400;
+
    position: relative;
−
  color: #ffffff;
+
    font-family: 'Roboto';
 +
font-size: 18pt;
 +
font-weight: bold;
 +
color: white;
 +
    top: 280px;
 +
    left:300px;
 +
    background-color: #B7D18F;
 +
    box-shadow: 0px 15px 0px 0px #00695C;
 +
    width: 100px;
 +
    text-align: center;
 
}
 
}
−
main h1 a {
+
 
−
  font-size: 48px;
+
.clickbutton1{
−
}
+
    position: relative;
−
main p {
+
    font-family: 'Roboto';
−
  font-weight: 300;
+
font-size: 18pt;
−
  font-size: 16px;
+
font-weight: bold;
−
  max-width: 340px;
+
color: white;
−
  margin: 0px auto;
+
    top: 230px;
−
  color:#ffffff;
+
    left:800px;
−
  top: 300px;
+
    background-color: #B7D18F;
−
  text-align: center;
+
    box-shadow: 0px 15px 0px 0px #00695C;
−
}
+
    width: 100px;
−
main a {
+
    text-align: center;
−
  text-decoration: none;
+
−
  color: #38c5b9;
+
−
  font-size: 30px;
+
−
}
+
−
main .plate {
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  left: 50%;
+
−
  max-width: 380px;
+
−
  width: 100%;
+
−
  -webkit-transform: translate(-50%, -50%);
+
−
          transform: translate(-50%, -50%);
+
−
  z-index: -1;
+
 
}
 
}
 +
 +
 +
  
 
</style>
 
</style>
 +
 +
  
 
</head>
 
</head>
  
 
<body>
 
<body>
 +
  <div class="container">
 +
  <h1>EXPERIMENTS</h1>
  
 +
  <div class="expandable-boxes">
 +
    <div class="expandable-box">
 +
      <h2>OBJECTIVE: </h2>
  
 +
      <div id="clear2" style="display: none;">
 +
<p> Text </p>
 +
                  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  
−
<div id="body-wrapper">
 
−
    <div class="absolute">
 
  
 +
<div class="clickbutton">
 +
    <a href="https://2017.igem.org/Team:UNOTT/Notebook">
 +
                      <p>LAB BOOK</p>
 +
    </a>
 +
</div>
  
−
    <main>
 
−
      <h1><a href="http://">EXPERIMENTS</a></h1>
 
−
      <p style="text-align: center;">All our lab work over the course of our project.</p>
 
  
−
    </main>
+
<div class="clickbutton1">
−
    <!-- Component starts here-->
+
    <a href="https://2017.igem.org/Team:UNOTT/Results">
−
    <ul class="blocks-names">
+
                      <p>RESULTS</p>
−
      <li class="blocks__name">MISSION: AMPLIFYING PARTS</li>
+
     </a>
−
      <li class="blocks__name">MISSION: SYNTHESISING BRICKS</li>
+
</div>
−
      <li class="blocks__name">MISSION: MUTATING DCAS9</li>
+
−
      <li class="blocks__name">MISSION: LIGATING BRICKS</li>
+
−
      <li class="blocks__name">MISSION: CONTROL PLASMID TRANSFORMATION</li>
+
−
    </ul>
+
−
    <ul class="blocks">
+
−
      <li class="blocks__block" id="1"></li>
+
−
      <li class="blocks__block" id="2"></li>
+
−
      <li class="blocks__block" id="3"></li>
+
−
      <li class="blocks__block" id="4"></li>
+
−
      <li class="blocks__block" id="5"></li>
+
−
     </ul>
+
−
    <ul class="blocks-content">
+
−
      <li class="blocks-content__content">
+
−
        <div class="content__close"></div>
+
−
        <h2>MISSION: AMPLIFYING PARTS</h2>
+
−
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
+
−
      </li>
+
  
−
      <li class="blocks-content__content">
 
−
        <h2>MISSION: SYNTHESISING BRICKS</h2>
 
−
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 
−
      </li>
 
−
      <li class="blocks-content__content">
 
−
        <h2>MISSION: MUTATING DCAS9</h2>
 
−
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 
−
      </li>
 
−
      <li class="blocks-content__content">
 
−
        <h2>MISSION: LIGATING BRICKS</h2>
 
−
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 
−
      </li>
 
−
      <li class="blocks-content__content">
 
−
        <h2>MISSION: CONTROL PLASMID TRANSFORMATION</h2>
 
−
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 
−
      </li>
 
−
    </ul>
 
  
−
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+
      </div>
 +
  </div>
  
−
     <script>
+
     <div class="expandable-box">
 +
      <h2>OBJECTIVE:</h2>
 +
  <div id="clear3" style="display: none;">
 +
      <p>This is the next box on the page.</p>
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  
−
    (function() {
 
−
      var bHeight, bWidth, block, bname, closeBtn, closeContent, content, expand, openContent, updateValues, wHeight, wWidth, xVal, yVal;
 
  
−
      block = $('.blocks__block');
+
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Notebook">
 +
            <p>LAB BOOK</p>
 +
</a>
 +
</div>
  
−
      bname = $('.blocks__name');
 
  
−
      content = $('.blocks-content__content');
+
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
    </div>
 +
</div>
  
−
      closeBtn = $('.blocks__content-close');
+
    <div class="expandable-box">
 +
      <h2>OBJECTIVE:</h2>
 +
  <div id="clear4" style="display: none;">
 +
      <p>Here is another box.</p>
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  
−
      wHeight = $(window).outerHeight();
 
  
−
      wWidth = $(window).outerWidth();
+
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Notebook">
 +
            <p>LAB BOOK</p>
 +
</a>
 +
</div>
  
−
      bHeight = block.outerHeight();
 
  
−
      bWidth = block.outerWidth();
+
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
    </div>
 +
  </div>
  
−
      xVal = Math.round(wWidth / bWidth) + 0.03;
+
    <div class="expandable-box">
 +
      <h2>OBJECTIVE:</h2>
 +
      <div id="clear5" style="display: none;">
 +
      <p>Now we have a box on the next row.</p>
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  
−
      yVal = wHeight / bHeight + 0.03;
 
  
−
      expand = function() {
+
<div class="clickbutton">
−
        var aBlock, num;
+
<a href="https://2017.igem.org/Team:UNOTT/Notebook">
−
        num = $(this).index();
+
            <p>LAB BOOK</p>
−
        aBlock = block.eq(num);
+
</a>
−
        if (!aBlock.hasClass('active')) {
+
</div>
−
          bname.css('opacity', '0');
+
−
          aBlock.css({
+
−
            'transform': 'scale(' + xVal + ',' + yVal + ')',
+
−
            '-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
+
−
          });
+
−
          aBlock.addClass('active');
+
−
          openContent(num);
+
−
        }
+
−
      };
+
  
−
      openContent = function(num) {
 
−
        var aContent;
 
−
        content.css({
 
−
          'transition': 'all 0.3s 0.4s ease-out',
 
−
          '-webkit-transition': 'all 0.3s 0.4s ease-out'
 
−
        });
 
−
        aContent = content.eq(num);
 
−
        aContent.addClass('active');
 
−
      };
 
  
−
      closeContent = function() {
+
<div class="clickbutton1">
−
        bname.css('opacity', '1');
+
<a href="https://2017.igem.org/Team:UNOTT/Results">
−
        content.css({
+
            <p>RESULTS</p>
−
          'transition': 'all 0.1s 0 ease-out',
+
</a>
−
          '-webkit-transition': 'all 0.1s 0 ease-out'
+
</div>
−
        });
+
    </div>
−
        block.css({
+
</div>
−
          'transform': 'scale(1)',
+
−
          '-webkit-transform': 'scale(1)'
+
−
        });
+
−
        block.removeClass('active');
+
−
        content.removeClass('active');
+
−
      };
+
  
−
      updateValues = function() {
+
    <div class="expandable-box">
−
        var yVal;
+
      <h2>OBJECTIVE:</h2>
−
        var xVal;
+
      <div id="clear6" style="display: none;">
−
        var bWidth;
+
      <p>This is a box again.</p>
−
        var bHeight;
+
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
−
        var wWidth;
+
−
        var wHeight;
+
−
        var aBlock;
+
−
        if (block.hasClass('active')) {
+
−
          aBlock = $('.blocks__block.active');
+
−
          wHeight = $(window).height();
+
−
          wWidth = $(window).width();
+
−
          bHeight = block.height();
+
−
          bWidth = block.width();
+
−
          xVal = Math.round(wWidth / bWidth) + 0.03;
+
−
          yVal = wHeight / bHeight + 0.03;
+
−
          aBlock.css({
+
−
            'transform': 'scale(' + xVal + ',' + yVal + ')',
+
−
            '-webkit-transform': 'scale(' + xVal + ',' + yVal + ')'
+
−
          });
+
−
        }
+
−
      };
+
  
−
      $(window).on('resize', updateValues);
 
  
−
      bname.on('click', expand);
+
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Notebook">
 +
            <p>LAB BOOK</p>
 +
</a>
 +
</div>
  
−
      closeBtn.on('click', closeContent);
 
  
−
    }).call(this);
+
<div class="clickbutton1">
−
     </script>
+
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
     </div>
 +
</div>
  
 +
    <div class="expandable-box">
 +
      <h2>OBJECTIVE: </h2>
 +
      <div id="clear7" style="display: none;">
 +
          <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
 +
 +
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Notebook">
 +
                  <p>LAB BOOK</p>
 +
</a>
 
</div>
 
</div>
 +
 +
 +
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
                  <p>RESULTS</p>
 +
</a>
 
</div>
 
</div>
 +
      <p>Would you believe that this is a box?</p>
 +
    </div>
 +
</div>
 +
  </div>
 +
</div>
 +
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 +
 +
 +
    <script>$(document).ready(function() {
 +
        //HOW TO HIDE
 +
        var mydiv = document.getElementById('clear2');
 +
        var mydiv1 = document.getElementById('clear3');
 +
        var mydiv2 = document.getElementById('clear4');
 +
        var mydiv3 = document.getElementById('clear5');
 +
        var mydiv4 = document.getElementById('clear6');
 +
        var mydiv5 = document.getElementById('clear7');
 +
//HOW TO HIDE
 +
 +
      $('.expandable-box').click(function(e) {
 +
        if($(this).hasClass('open')) {
 +
            //HOW TO HIDE
 +
 +
            //HOW TO HIDE
 +
          $('.expandable-box.out').not($(this)).removeClass('out');
 +
          $(this).removeClass('open');
 +
          mydiv.style.display = 'none';
 +
          mydiv1.style.display = 'none';
 +
          mydiv2.style.display = 'none';
 +
          mydiv3.style.display = 'none';
 +
          mydiv4.style.display = 'none';
 +
          mydiv5.style.display = 'none';
 +
        }
 +
        else {
 +
          $('.expandable-box').not($(this)).addClass('out');
 +
          $(this).addClass('open');
 +
 +
          //HOW TO HIDE
 +
            mydiv.style.display = 'block'
 +
            mydiv1.style.display = 'block'
 +
            mydiv2.style.display = 'block'
 +
            mydiv3.style.display = 'block'
 +
            mydiv4.style.display = 'block'
 +
            mydiv5.style.display = 'block'
 +
            //HOW TO HIDE
 +
        }
 +
      });
 +
    });</script>
 +
 +
 +
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 13:58, 7 September 2017

<!DOCTYPE html> Expandable Boxes With CSS Transitions

EXPERIMENTS

OBJECTIVE:

OBJECTIVE:

OBJECTIVE:

OBJECTIVE:

OBJECTIVE:

OBJECTIVE: