Difference between revisions of "Team:BGU Israel/Notebook"

 
(94 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{BGU_Israel}}
 
{{BGU_Israel}}
<!DOCTYPE html>
+
 
 +
{{Template:BGU_Israel/header}}
 +
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 +
 +
</head>
 +
<body id="myPage"  data-spy="scroll" data-target=".navbar #myScrollspy" data-offset="60">
 
    
 
    
   <title>OriginALS</title>
+
   <header style="background-image:url('https://static.igem.org/mediawiki/2018/f/f0/T--BGU_Israel--pink_subhead.png')!important;" class="sub-page-header text-center">
  <meta charset="utf-8">
+
      <div class="container my-auto">
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
          <h1 class="animated fadeInUp">Notebook</h1>
    <link type="text/css" rel="stylesheet" href="style.css">
+
      </div>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
    </header>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
+
<style >
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
+
.sub-nav .bg-grey{
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
padding-top:0px;
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
padding-bottom:0px;
<style>
+
    body {
+
      font: 400 15px Segoe UI !important;
+
      line-height: 1.8;
+
      color: #818181;
+
  }
+
  h1 {
+
      font-size: 32px!important;
+
      font-family: Segoe UI Light!important;
+
      text-transform: capitalize;
+
      color: #303030;
+
      font-weight: 600;
+
      margin-bottom: 30px !important;
+
   
+
  }
+
  h4 {
+
      font-size: 19px;
+
      line-height: 1.375em;
+
      color: #303030;
+
      font-weight: 400;
+
      margin-bottom: 30px;
+
  } 
+
      p, ol {
+
          font-size: 16px !important;
+
         
+
          color:#010101 !important;
+
      }
+
  .jumbotron {
+
      background-color: #f4511e;
+
      color: #fff;
+
      padding: 100px 25px;
+
      font-family: Montserrat, sans-serif;
+
  }
+
  .container-fluid {
+
      padding: 60px 50px;
+
  }
+
 
+
    .bg-grey {
+
        background-color:#ededed;
+
        color:#000;
+
        padding: 60px 50px;
+
    }
+
    .bg-white {
+
        background-color:#fff;
+
        color:#000;
+
        padding: 60px 50px;
+
    }
+
    .bg-dark {
+
        background-color:#262626;
+
        color:#fff !important;
+
        padding: 60px 50px;
+
    }
+
    .bg-dark p, .bg-dark h1 {
+
        color:#fff !important;
+
       
+
    }
+
  .logo-small {
+
      color: #f4511e;
+
      font-size: 50px;
+
  }
+
  .logo {
+
      color: #f4511e;
+
      font-size: 200px;
+
  }
+
  .thumbnail {
+
      padding: 0 0 15px 0;
+
      border: none;
+
      border-radius: 0;
+
  }
+
  .thumbnail img {
+
      width: 100%;
+
      height: 100%;
+
      margin-bottom: 10px;
+
  }
+
  .carousel-control.right, .carousel-control.left {
+
      background-image: none;
+
      color: #f4511e;
+
  }
+
  .carousel-indicators li {
+
      border-color: #f4511e;
+
  }
+
  .carousel-indicators li.active {
+
      background-color: #f4511e;
+
  }
+
  .item h4 {
+
      font-size: 19px;
+
      line-height: 1.375em;
+
      font-weight: 400;
+
      font-style: italic;
+
      margin: 70px 0;
+
  }
+
  .item span {
+
      font-style: normal;
+
  }
+
  .panel {
+
      border: 1px solid #f4511e;
+
      border-radius:0 !important;
+
      transition: box-shadow 0.5s;
+
  }
+
  .panel:hover {
+
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
+
  }
+
  .panel-footer .btn:hover {
+
      border: 1px solid #f4511e;
+
      background-color: #fff !important;
+
      color: #f4511e;
+
  }
+
  .panel-heading {
+
      color: #fff !important;
+
      background-color: #f4511e !important;
+
      padding: 25px;
+
      border-bottom: 1px solid transparent;
+
      border-top-left-radius: 0px;
+
      border-top-right-radius: 0px;
+
      border-bottom-left-radius: 0px;
+
      border-bottom-right-radius: 0px;
+
  }
+
  .panel-footer {
+
      background-color: white !important;
+
  }
+
  .panel-footer h3 {
+
      font-size: 32px;
+
  }
+
  .panel-footer h4 {
+
      color: #aaa;
+
      font-size: 14px;
+
  }
+
  .panel-footer .btn {
+
      margin: 15px 0;
+
      background-color: #f4511e;
+
      color: #fff;
+
  }
+
  .navbar {
+
      margin-bottom: 10px; !important;
+
      background-color: #fff !important;
+
      z-index: 9999!important;
+
      border: 0 !important;
+
    text-transform:uppercase !important;
+
      border-radius: 0 !important;
+
      font-family: 'Segoe UI Light'!important;
+
      font-weight: 600!important;
+
      color:#000!important;
+
padding-top:10px;
+
  }
+
  .navbar-brand {
+
  padding: 0px;
+
 
}
 
}
.navbar-brand>img {
+
.sub-nav .btn-info {
  height: 100%;
+
margin:10px 5px;
  padding: 0 0 10px 20px;
+
padding:15px 30px !important;
  width: auto;
+
}
+
  .navbar-nav li a:hover, .navbar-nav li.active a {
+
      color: #0186ac !important;
+
      background-color: #fff !important;
+
  }
+
  .navbar-default .navbar-toggle {
+
      border-color: transparent;
+
      color: #fff !important;
+
  }
+
 
+
  .slideanim {visibility:hidden;}
+
  .slide {
+
      animation-name: slide;
+
      -webkit-animation-name: slide;
+
      animation-duration: 1s;
+
      -webkit-animation-duration: 1s;
+
      visibility: visible;
+
  }
+
  @keyframes slide {
+
    0% {
+
      opacity: 0;
+
      transform: translateY(70%);
+
    }
+
    100% {
+
      opacity: 1;
+
      transform: translateY(0%);
+
    }
+
  }
+
  @-webkit-keyframes slide {
+
    0% {
+
      opacity: 0;
+
      -webkit-transform: translateY(70%);
+
    }
+
    100% {
+
      opacity: 1;
+
      -webkit-transform: translateY(0%);
+
    }
+
  }
+
  @media screen and (max-width: 768px) {
+
    .col-sm-4 {
+
      text-align: center;
+
      margin: 25px 0;
+
    }
+
    .btn-lg {
+
        width: 100%;
+
        margin-bottom: 35px;
+
    }
+
  }
+
  @media screen and (max-width: 480px) {
+
    .logo {
+
        font-size: 150px;
+
    }
+
  }
+
  
  header.masthead {
 
  padding-top: 10rem;
 
  padding-bottom: calc(10rem - 56px);
 
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 
width:100%;
 
        overflow: hidden;
 
    min-height: 700px;
 
    /* Create the parallax scrolling effect */
 
    background-attachment: fixed;
 
    background-position: center;
 
    background-repeat: no-repeat;
 
    background-size: cover;
 
   
 
 
}
 
}
      .parallax-window {
+
.sub-nav .btn-info:hover{
    min-height: 700px;
+
background-color:#FF0161;
    background: transparent;
+
}
+
      #abstract p, #abstract ol {
+
          text-align: justify;
+
      }
+
      #myBtn {
+
  display: none;
+
  position: fixed;
+
  bottom: 20px;
+
  right: 20px;
+
  z-index: 99;
+
  font-size: 16px;
+
  border: none;
+
  outline: none;
+
  background-color: #0186ac;
+
  color: white;
+
  cursor: pointer;
+
  padding: 12px 15px 12px 15px;
+
  border-radius: 100px;
+
 
}
 
}
 +
</style>
 +
<div class="bg-dark text-center sub-nav">
 +
    <div class="container">
 +
        <div class="row animated fadeInRight">
 +
       
 +
<a href="#february" class="btn btn-info" role="button" >February</a>
 +
<a href="#march" class="btn btn-info" role="button" >March</a>
 +
<a href="#april" class="btn btn-info" role="button" >April</a>
 +
<a href="#may" class="btn btn-info" role="button" >May</a>
 +
</div>
 +
<div class="row animated fadeInLeft">
 +
<a href="#june" class="btn btn-info" role="button" >June</a>
 +
<a href="#july" class="btn btn-info" role="button" >July</a>
 +
<a href="#august" class="btn btn-info" role="button" >August</a>
 +
<a href="#experiments" class="btn btn-info" role="button" >Experiments</a>
  
#myBtn:hover {
+
         </div>
  background-color: #555;
+
}
+
 
+
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
+
        background: #fff !important;
+
         color:#0186ac !important;
+
    }
+
    .navbar-right .dropdown-menu {
+
       
+
    }
+
@media screen and (min-width: 600px) {
+
    .dropdown:hover .dropdown-menu {
+
    display: block;
+
    margin-top: 0;
+
        color:#fff;
+
}
+
      #mainMenu .dropdown-menu {
+
        border:0 !important;
+
        right:auto !important;
+
        border-radius: 0 !important;
+
        text-transform: capitalize;
+
        font-size:18px;
+
    }
+
      #mainMenu .dropdown-menu li:hover {
+
        color:#0186ac !important;
+
          background: transparent;
+
    }
+
    }
+
    .gray-section {
+
        background-color:#ededed;
+
    }
+
      .sub-page-header {
+
          padding-top: 10rem;
+
  padding-bottom: calc(10rem - 56px);
+
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
+
height:200px !important;
+
 
+
    <!-- /* Create the parallax scrolling effect */ -->
+
    background-attachment: fixed;
+
background-position: top center;
+
    background-repeat: no-repeat;
+
    background-size: cover;
+
    }
+
 
+
.accordion {
+
    background-color: #ccc;
+
    color: #444;
+
    cursor: pointer;
+
    padding: 18px;
+
    width: 100%;
+
    border: none;
+
    text-align: left;
+
    outline: none;
+
    font-size: 15px;
+
    transition: 0.4s;
+
}
+
 
+
.active, .accordion:hover {
+
    background-color:  #0186ac;
+
color: #fff;
+
}
+
 
+
.accordion:after {
+
    content: '\002B';
+
    font-weight: bold;
+
    float: right;
+
    margin-left: 5px;
+
}
+
 
+
.active:after {
+
    content: "\2212";
+
color: #fff;
+
}
+
 
+
.panel2 {
+
    padding: 0 18px;
+
    max-height: 0;
+
    overflow: hidden;
+
    transition: max-height 0.2s ease-out;
+
}
+
 
+
 
+
  ul.nav-pills {
+
      top: 100px;
+
      position: fixed;
+
  }
+
 
+
  #section1 {color: #fff; background-color: #1E88E5;}
+
  #section2 {color: #fff; background-color: #673ab7;}
+
  #section3 {color: #fff; background-color: #ff9800;}
+
  #section41 {color: #fff; background-color: #00bcd4;}
+
  #section42 {color: #fff; background-color: #009688;}
+
 
+
  @media screen and (max-width: 810px) {
+
    #section1, #section2, #section3, #section41, #section42  {
+
        margin-left: 150px;
+
    }
+
  }
+
 
+
 
+
    </style>
+
</head>
+
<body id="myPage"  data-spy="scroll" data-target=".navbar #myScrollspy" data-offset="60">
+
    <div id="top"></div>
+
    <a id="myBtn"  href="#top" title="To Top">
+
    <span class="glyphicon glyphicon-chevron-up"></span>
+
  </a>
+
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
+
  <div class="container">
+
    <div class="navbar-header">
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+
        <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>                       
+
      </button>
+
      <a class="navbar-brand" href="index.html"><img src="https://static.igem.org/mediawiki/2018/3/32/T--BGU_Israel--logo_colored.png"></a>
+
 
     </div>
 
     </div>
    <div class="collapse navbar-collapse" id="myNavbar">
+
</div>
      <ul class="nav navbar-nav navbar-right">
+
<div class="arrowdown "></div>
        <li><a href="index.html">Home</a></li>
+
<!-- February -->
        <li class="dropdown">
+
<div id="february" class="bg-white text-center">
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Project
+
        </a>
+
        <ul class="dropdown-menu pull-right">
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Description ">Description</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Design">Design</a></li>
+
            <li><a href="https://2018.igem.org/Team:BGU_Israel/Results">Results</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Protocols">Protocols</a></li>
+
            <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Notebook">Notebook</a></li>
+
           
+
        </ul>
+
      </li>
+
          <li class="dropdown">
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Team
+
        </a>
+
        <ul class="dropdown-menu pull-right">
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Team">Members</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Collaborations">Collaborations</a></li>
+
        </ul>
+
      </li>
+
          <li class="dropdown">
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Parts
+
        </a>
+
        <ul class="dropdown-menu pull-right">
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Parts">Team Parts</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/BasicParts ">Basic Parts</a></li>
+
            <li><a href="https://2018.igem.org/Team:BGU_Israel/PartImprovement">Part Improvement</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_Israel/PartCollection">Part Collection</a></li>
+
        </ul>
+
      </li>
+
 
+
  <li class="dropdown">
+
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Practices
+
 
+
        </a>
+
        <ul class="dropdown-menu pull-right">
+
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSConference">ALS Conference</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSFunding">Funding Race</a></li>
+
            <li><a href="https://2018.igem.org/Team:BGU_Israel/InterLab">InterLab</a></li>
+
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/EthicsAndSafety">Ethics and Safty</a></li>
+
        </ul>
+
      </li>
+
        <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Attributions">Attributions</a></li>
+
          <!--<li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Achievments">Achievments</a></li>-->
+
      </ul>
+
    </div>
+
  </div>
+
</nav>
+
  <header  class="sub-page-header text-center">
+
      <div class="container my-auto">
+
          <h1>Notebook</h1>
+
      </div>
+
    </header>
+
 
+
<!-- month1 -->
+
<div id="abstract" class="container-fluid text-center">
+
 
   <div class="row">
 
   <div class="row">
<h1>October</h1>
+
<h1>February</h1>
 
<div class="col-sm-8 col-sm-offset-2">
 
<div class="col-sm-8 col-sm-offset-2">
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
+
<p>We began working in our brand-new lab space! When we first arrived, the lab was nothing but two work benches. We had to collect and organize the equipment, materials, cell culture room, and work area; all according to lab safety standards.  We also began cloning the plasmids for our experiments and learning how to work with cell culture by practicing on HEK293 cells.<br/>
 +
<br/>
 +
<b>Highlights:</b> clone Steap4, Timp1, F4/80 into pGL4.17 and pGL3 plasmid for Promoter Assay.  
 +
</p>
 
<button class="accordion">Week 1</button>
 
<button class="accordion">Week 1</button>
 
<div class="panel2">
 
<div class="panel2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<object data="https://static.igem.org/mediawiki/2018/a/a6/T--BGU_Israel--notebook_week1.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/a/a6/T--BGU_Israel--notebook_week1.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 
</div>
 
</div>
  
<button class="accordion">Week 2</button>
+
<button class="accordion">Week 2 </button>
 
<div class="panel2">
 
<div class="panel2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<object data="https://static.igem.org/mediawiki/2018/f/f6/T--BGU_Israel--notebook_week2.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/f/f6/T--BGU_Israel--notebook_week2.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 
</div>
 
</div>
  
<button class="accordion">Week 3</button>
+
<button class="accordion">Week 3 </button>
 
<div class="panel2">
 
<div class="panel2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<object data="https://static.igem.org/mediawiki/2018/1/1a/T--BGU_Israel--notebook_week3.pdf" width="100%" height="500">
</div
+
                        <embed src="https://static.igem.org/mediawiki/2018/1/1a/T--BGU_Israel--notebook_week3.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
 +
 
 +
<button class="accordion">Week 4</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/3/36/T--BGU_Israel--notebook_week4.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/3/36/T--BGU_Israel--notebook_week4.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
 +
 
 
</div>
 
</div>
 
   </div>
 
   </div>
Line 455: Line 89:
 
</div>
 
</div>
  
<!-- month2 -->
+
<!-- March -->
<div id="abstract" class="container-fluid text-center" style="background-color:#ededed !important">
+
<div id="march" class="bg-grey text-center">
 
   <div class="row">
 
   <div class="row">
<h1>September</h1>
+
<h1>March</h1>
 
<div class="col-sm-8 col-sm-offset-2">
 
<div class="col-sm-8 col-sm-offset-2">
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
+
<p>
<button class="accordion">Week 1</button>
+
In March, we experienced our first little success. We cloned our promoters into the pGL3 vector and were able to begin our first experiment, the Promoter Assay. Meanwhile, so far, our practice cells were alive and well.
 +
<br/>
 +
<br/>
 +
<b>Highlights:</b> A decision was made to concentrate our efforts on the pGL3 plasmid expression assay. Because, then we could compare the expression among the promoters and we wouldn’t have to use two sets of luciferase kits.
 +
</p>
 +
<button class="accordion">Week 5</button>
 
<div class="panel2">
 
<div class="panel2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<object data="https://static.igem.org/mediawiki/2018/8/83/T--BGU_Israel--notebook_week5.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/8/83/T--BGU_Israel--notebook_week5.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 
</div>
 
</div>
  
<button class="accordion">Week 2</button>
+
<button class="accordion">Week 6</button>
 
<div class="panel2">
 
<div class="panel2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<object data="https://static.igem.org/mediawiki/2018/1/10/T--BGU_Israel--notebook_week6.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/1/10/T--BGU_Israel--notebook_week6.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 
</div>
 
</div>
  
<button class="accordion">Week 3</button>
+
<button class="accordion">Week 7</button>
 
<div class="panel2">
 
<div class="panel2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<object data="https://static.igem.org/mediawiki/2018/9/97/T--BGU_Israel--notebook_week7.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/9/97/T--BGU_Israel--notebook_week7.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 
</div>
 
</div>
 +
 +
<button class="accordion">Week 8</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/d/de/T--BGU_Israel--notebook_week8.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/d/de/T--BGU_Israel--notebook_week8.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
 +
 
</div>
 
</div>
 
   </div>
 
   </div>
Line 480: Line 133:
  
  
<div id="abstract" class="container-fluid text-center">
+
<!-- April -->
 +
<div id="april" class="bg-white text-center">
 
   <div class="row">
 
   <div class="row">
    <nav class="col-sm-3" id="myScrollspy">
+
<h1>April</h1>
      <ul class="nav nav-pills nav-stacked">
+
<div class="col-sm-8 col-sm-offset-2">
        <li class="active"><a href="#section1">Section 1</a></li>
+
<p>
        <li><a href="#section2">Section 2</a></li>
+
Our long-awaited microglia and astrocytes arrived! While our cell lines were getting used to their new home, we began cloning our crisper and gRNA plasmids for our two-component system.
        <li><a href="#section3">Section 3</a></li>
+
<br/>
        <li class="dropdown">
+
<br/>
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
+
<b>Highlights:</b> Received microglia and astrocytes cell lines, px601, H1, H2 CMV-dCas9-VPR, building plasmids with Gibson assembly.
          <ul class="dropdown-menu">
+
</p>
            <li><a href="#section41">Section 4-1</a></li>
+
<button class="accordion">Week 9</button>
            <li><a href="#section42">Section 4-2</a></li>                   
+
<div class="panel2">
          </ul>
+
<object data="https://static.igem.org/mediawiki/2018/4/46/T--BGU_Israel--notebook_week9.pdf" width="100%" height="500">
        </li>
+
                        <embed src="https://static.igem.org/mediawiki/2018/4/46/T--BGU_Israel--notebook_week9.pdf" type="application/pdf" width="100%" height="600" />
      </ul>
+
</object>
    </nav>
+
</div>
  
    <div class="col-sm-9">
+
<button class="accordion">Week 10</button>
      <div id="section1">   
+
<div class="panel2">
        <h1>Section 1</h1>
+
<object data="https://static.igem.org/mediawiki/2018/e/ea/T--BGU_Israel--notebook_week10.pdf" width="100%" height="500">
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                        <embed src="https://static.igem.org/mediawiki/2018/e/ea/T--BGU_Israel--notebook_week10.pdf" type="application/pdf" width="100%" height="600" />
      </div>
+
</object>
      <div id="section2">  
+
        <h1>Section 2</h1>
+
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
      </div>       
+
      <div id="section3">       
+
        <h1>Section 3</h1>
+
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
      </div>
+
      <div id="section41">        
+
        <h1>Section 4-1</h1>
+
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
      </div>     
+
      <div id="section42">       
+
        <h1>Section 4-2</h1>
+
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
      </div>
+
    </div>
+
  </div>
+
 
</div>
 
</div>
  
<style>
+
<button class="accordion">Week 11</button>
    .footer-list {
+
<div class="panel2">
        list-style: none;
+
<object data="https://static.igem.org/mediawiki/2018/7/78/T--BGU_Israel--notebook_week11.pdf" width="100%" height="500">
        color:#fff;
+
                        <embed src="https://static.igem.org/mediawiki/2018/7/78/T--BGU_Israel--notebook_week11.pdf" type="application/pdf" width="100%" height="600" />
    }
+
</object>
    .footer-list-item {
+
</div>
        padding:20px 0 20px 0 !important;
+
        border-bottom: 1px solid #fff;
+
    }
+
    .footer-list .footer-list-item:last-child {
+
        border:0;
+
    }
+
    .container-fluid {
+
      padding: 60px 50px;
+
  }
+
  
    .bg-grey {
+
<button class="accordion">Week 12</button>
        background-color:#ededed;
+
<div class="panel2">
        color:#000;
+
<object data="https://static.igem.org/mediawiki/2018/d/db/T--BGU_Israel--notebook_week12.pdf" width="100%" height="500">
        padding: 60px 50px;
+
                        <embed src="https://static.igem.org/mediawiki/2018/d/db/T--BGU_Israel--notebook_week12.pdf" type="application/pdf" width="100%" height="600" />
    }
+
</object>
    .bg-white {
+
</div>
        background-color:#fff;
+
        color:#000;
+
        padding: 60px 50px;
+
    }
+
    .bg-dark {
+
        background-color:#262626;
+
       
+
        padding: 60px 50px;
+
    }
+
      .bg-dark h1 {
+
        color:#fff !important;
+
       
+
    }
+
    footer.bg-dark p {
+
        color:#ededed !important;
+
    }
+
    .social-icons {
+
        display: inline;
+
        height:20px;
+
        width:20px;
+
        margin-right:10px;
+
    }
+
 
+
</style>
+
  
<footer class="bg-dark">
 
    <div  class="container my-auto">
 
<div class="row">
 
    <div class="col-md-4">
 
        <h3>About OrignALS</h3>
 
        <p><br>Established in 2006, EchoSense Ltd. develops innovative ultrasound Doppler systems for the diagnosis and monitoring of cardiac and pulmonary diseases. EchoSense delivers a fast,reliable and non-invasive method of diagnosis and our technology has undergone successful clinical trials in the United States, Europe and Israel. The Echosense research and development center is based in Haifa, Israel.</p>
 
        <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/f/f0/T--BGU_Israel--originals_white.png" width="50%">
 
       
 
        <img class="img-responsive" src="">
 
    </div>
 
    <div class="col-md-4">
 
    <ul class="footer-list">
 
        <h3>Keep in Touch</h3>
 
       
 
  <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/3/3c/T--BGU_Israel--facebook.png" > @iGEMBGU</li>
 
  <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/e/e9/T--BGU_Israel--instagram.png" >@igem_2018_bgu</li>
 
  <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/2/26/T--BGU_Israel--twitter.jpg" > @originalsbgu</li>
 
        <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/8/83/T--BGU_Israel--email.png" > bgu_israel@gmail.com</li>
 
</ul>
 
    </div>
 
    <div class="col-md-4">
 
    <ul class="footer-list">
 
        <h3>Address</h3>
 
  <li class="footer-list-item">Ben-Gurion University of the Negev<br>
 
Ben Gurion 1, Beer Sheva 8410501, Israel</li>
 
 
 
          <li class="footer-list-item"><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/a/a5/T--BGU_Israel--bgu_white.png"></li>
 
</ul>
 
    </div>
 
   
 
 
</div>
 
</div>
        </div>
+
  </div>
</footer>
+
</div>
  
<script>
 
$(document).ready(function(){
 
  // Add smooth scrolling to all links in navbar + footer link
 
  $(".navbar a, #myBtn[href='#top'], .nav-pills").on('click', function(event) {
 
    // Make sure this.hash has a value before overriding default behavior
 
    if (this.hash !== "") {
 
      // Prevent default anchor click behavior
 
      event.preventDefault();
 
  
      // Store hash
+
<!-- May -->
      var hash = this.hash;
+
<div id="may" class="bg-grey text-center">
 +
  <div class="row">
 +
<h1>May</h1>
 +
<div class="col-sm-8 col-sm-offset-2">
 +
<p>
 +
After a tireless journey, we successfully cloned most of our system’s plasmids. Now we began attempts to transfect these plasmids into our cell lines with different transfection reagents. Additionally, we began the promoter assay and astrocyte reactivity assay.
 +
<br/>
 +
<br/>
 +
<b>Highlights:</b> Began Promoter assay, transfection attempts with reagents, ELISA for astrocyte reactivity assay.
 +
</p>
 +
<button class="accordion">Week 13</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/3/34/T--BGU_Israel--notebook_week13.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/3/34/T--BGU_Israel--notebook_week13.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
      // Using jQuery's animate() method to add smooth page scroll
+
<button class="accordion">Week 14</button>
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
+
<div class="panel2">
      $('html, body').animate({
+
<object data="https://static.igem.org/mediawiki/2018/7/7d/T--BGU_Israel--notebook_week14.pdf" width="100%" height="500">
        scrollTop: $(hash).offset().top
+
                        <embed src="https://static.igem.org/mediawiki/2018/7/7d/T--BGU_Israel--notebook_week14.pdf" type="application/pdf" width="100%" height="600" />
      }, 500, function(){
+
</object>
 
+
</div>
        // Add hash (#) to URL when done scrolling (default click behavior)
+
        window.location.hash = hash;
+
      });
+
    } // End if
+
  });
+
 
+
  $(window).scroll(function() {
+
    $(".slideanim").each(function(){
+
      var pos = $(this).offset().top;
+
  
      var winTop = $(window).scrollTop();
+
<button class="accordion">Week 15</button>
        if (pos < winTop + 600) {
+
<div class="panel2">
          $(this).addClass("slide");
+
<object data="https://static.igem.org/mediawiki/2018/0/0c/T--BGU_Israel--notebook_week15.pdf" width="100%" height="500">
        }
+
                        <embed src="https://static.igem.org/mediawiki/2018/0/0c/T--BGU_Israel--notebook_week15.pdf" type="application/pdf" width="100%" height="600" />
    });
+
</object>
  });
+
</div>
})
+
</script>
+
<script type="text/javascript">
+
    /*!
+
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
+
* @copyright 2016 PixelCog, Inc.
+
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
+
*/
+
  
;(function ( $, window, document, undefined ) {
+
<button class="accordion">Week 16</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/2/2d/T--BGU_Israel--notebook_week16.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/2/2d/T--BGU_Israel--notebook_week16.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
  // Polyfill for requestAnimationFrame
+
</div>
   // via: https://gist.github.com/paulirish/1579671
+
   </div>
 +
</div>
  
  (function() {
 
    var lastTime = 0;
 
    var vendors = ['ms', 'moz', 'webkit', 'o'];
 
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
 
    }
 
  
    if (!window.requestAnimationFrame)
+
<!-- June -->
      window.requestAnimationFrame = function(callback) {
+
<div id="june" class="bg-white text-center">
        var currTime = new Date().getTime();
+
  <div class="row">
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+
<h1>June</h1>
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+
<div class="col-sm-8 col-sm-offset-2">
          timeToCall);
+
<p>
        lastTime = currTime + timeToCall;
+
In June we had to face the music; our transfection was not working. We began exploring alternatives ways to insert our plasmids into our cells, such as electroporation, calcium phosphate transfection, and additional transfection reagents.
        return id;
+
<br/>
      };
+
<br/>
 +
<b>Highlights:</b> Astrocyte Western blot, Electroporation of microglia.
 +
</p>
 +
<button class="accordion">Week 17</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/6/6e/T--BGU_Israel--notebook_week17.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/6/6e/T--BGU_Israel--notebook_week17.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    if (!window.cancelAnimationFrame)
+
<button class="accordion">Week 18</button>
      window.cancelAnimationFrame = function(id) {
+
<div class="panel2">
        clearTimeout(id);
+
<object data="https://static.igem.org/mediawiki/2018/7/7c/T--BGU_Israel--notebook_week18.pdf" width="100%" height="500">
      };
+
                        <embed src="https://static.igem.org/mediawiki/2018/7/7c/T--BGU_Israel--notebook_week18.pdf" type="application/pdf" width="100%" height="600" />
  }());
+
</object>
 +
</div>
  
 +
<button class="accordion">Week 19</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/2/22/T--BGU_Israel--notebook_week19.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/2/22/T--BGU_Israel--notebook_week19.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
  // Parallax Constructor
+
<button class="accordion">Week 20</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/7/79/T--BGU_Israel--notebook_week20.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/7/79/T--BGU_Israel--notebook_week20.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
   function Parallax(element, options) {
+
</div>
    var self = this;
+
   </div>
 +
</div>
  
    if (typeof options == 'object') {
 
      delete options.refresh;
 
      delete options.render;
 
      $.extend(this, options);
 
    }
 
  
    this.$element = $(element);
+
<!-- July -->
 +
<div id="july" class="bg-grey text-center">
 +
  <div class="row">
 +
<h1>July</h1>
 +
<div class="col-sm-8 col-sm-offset-2">
 +
<p>
 +
In July we preformed further attempts to transfect our cells and reactivity assays, and let’s not forget exams period.
 +
<br/>
 +
<br/>
 +
<b>Highlights:</b> Electroporation of microglia, mycoplasma assay, colony PCR after the microglia electroporation, transfection attempts with reagents, astrocyte reactivity assay using western blot.
 +
</p>
 +
<button class="accordion">Week 21</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/4/47/T--BGU_Israel--notebook_week21.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/4/47/T--BGU_Israel--notebook_week21.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    if (!this.imageSrc && this.$element.is('img')) {
+
<button class="accordion">Week 22</button>
      this.imageSrc = this.$element.attr('src');
+
<div class="panel2">
    }
+
<object data="https://static.igem.org/mediawiki/2018/d/db/T--BGU_Israel--notebook_week22.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/d/db/T--BGU_Israel--notebook_week22.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
+
<button class="accordion">Week 23</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/8/89/T--BGU_Israel--notebook_week23.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/8/89/T--BGU_Israel--notebook_week23.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    if (positions.length < 1) {
+
<button class="accordion">Week 24</button>
      positions.push('center');
+
<div class="panel2">
    }
+
<object data="https://static.igem.org/mediawiki/2018/f/f1/T--BGU_Israel--notebook_week24.pdf" width="100%" height="500">
    if (positions.length == 1) {
+
                        <embed src="https://static.igem.org/mediawiki/2018/f/f1/T--BGU_Israel--notebook_week24.pdf" type="application/pdf" width="100%" height="600" />
      positions.push(positions[0]);
+
</object>
    }
+
</div>
  
    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
+
</div>
      positions = [positions[1], positions[0]];
+
  </div>
    }
+
</div>
  
    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
+
<!-- August -->
    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
+
<div id="august" class="bg-white text-center">
 +
  <div class="row">
 +
<h1>August</h1>
 +
<div class="col-sm-8 col-sm-offset-2">
 +
<p>
 +
The summer was in full swing and with it our iGEM team. Each team member worked full force on experiments to reach a proof of concept.
 +
<br/>
 +
<br/>
 +
<b>Highlights:</b> continued reactive astrocyte experiments.
 +
</p>
 +
<button class="accordion">Week 25</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/0/0b/T--BGU_Israel--notebook_week25.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/0/0b/T--BGU_Israel--notebook_week25.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    self.positionX = positions[0];
 
    self.positionY = positions[1];
 
  
    if (this.positionX != 'left' && this.positionX != 'right') {
+
</div>
      if (isNaN(parseInt(this.positionX))) {
+
  </div>
        this.positionX = 'center';
+
</div>
      } else {
+
        this.positionX = parseInt(this.positionX);
+
      }
+
    }
+
  
    if (this.positionY != 'top' && this.positionY != 'bottom') {
+
<!-- Experiments -->
      if (isNaN(parseInt(this.positionY))) {
+
<div id="experiments" class="bg-grey text-center">
        this.positionY = 'center';
+
  <div class="row">
      } else {
+
<h1>Experiments</h1>
        this.positionY = parseInt(this.positionY);
+
<div class="col-sm-8 col-sm-offset-2">
      }
+
<button class="accordion">Calcium Phosphate Transfection</button>
    }
+
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/3/34/T--BGU_Israel--notebook_exp_calcium_phosphate.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/3/34/T--BGU_Israel--notebook_exp_calcium_phosphate.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    this.position =
+
<button class="accordion">Cytokine Inhibition</button>
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
+
<div class="panel2">
      this.positionY + (isNaN(this.positionY)? '' : 'px');
+
<object data="https://static.igem.org/mediawiki/2018/d/da/T--BGU_Israel--notebook_exp_qpcr.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/d/da/T--BGU_Israel--notebook_exp_qpcr.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
+
<button class="accordion">Cell lines Infections with Lentivirus</button>
      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
+
<div class="panel2">
        this.$element.css({
+
<object data="https://static.igem.org/mediawiki/2018/0/0e/T--BGU_Israel--notebook_exp_lenti_infection.pdf" width="100%" height="500">
          backgroundImage: 'url(' + this.imageSrc + ')',
+
                        <embed src="https://static.igem.org/mediawiki/2018/0/0e/T--BGU_Israel--notebook_exp_lenti_infection.pdf" type="application/pdf" width="100%" height="600" />
          backgroundSize: 'cover',
+
</object>
          backgroundPosition: this.position
+
</div>
        });
+
      }
+
      return this;
+
    }
+
  
    if (navigator.userAgent.match(/(Android)/)) {
+
<button class="accordion">Promoter Assay</button>
      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
+
<div class="panel2">
        this.$element.css({
+
<object data="https://static.igem.org/mediawiki/2018/5/51/T--BGU_Israel--notebook_exp_promoter_assay.pdf" width="100%" height="500">
          backgroundImage: 'url(' + this.imageSrc + ')',
+
                        <embed src="https://static.igem.org/mediawiki/2018/5/51/T--BGU_Israel--notebook_exp_promoter_assay.pdf" type="application/pdf" width="100%" height="600" />
          backgroundSize: 'cover',
+
</object>
          backgroundPosition: this.position
+
</div>
        });
+
      }
+
      return this;
+
    }
+
  
    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
+
<button class="accordion">Reversed-Caspase-3 Induction</button>
 +
<div class="panel2">
 +
<object data="https://static.igem.org/mediawiki/2018/5/50/T--BGU_Israel--notebook_exp_caspase3.pdf" width="100%" height="500">
 +
                        <embed src="https://static.igem.org/mediawiki/2018/5/50/T--BGU_Israel--notebook_exp_caspase3.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 +
</div>
  
    var slider = this.$element.find('>.parallax-slider');
+
</div>
    var sliderExisted = false;
+
  </div>
 +
</div>
  
    if (slider.length == 0)
 
      this.$slider = $('<img />').prependTo(this.$mirror);
 
    else {
 
      this.$slider = slider.prependTo(this.$mirror)
 
      sliderExisted = true;
 
    }
 
  
    this.$mirror.addClass('parallax-mirror').css({
 
      visibility: 'hidden',
 
      zIndex: this.zIndex,
 
      position: 'fixed',
 
      top: 0,
 
      left: 0,
 
      overflow: 'hidden'
 
    });
 
  
    this.$slider.addClass('parallax-slider').one('load', function() {
 
      if (!self.naturalHeight || !self.naturalWidth) {
 
        self.naturalHeight = this.naturalHeight || this.height || 1;
 
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
 
      }
 
      self.aspectRatio = self.naturalWidth / self.naturalHeight;
 
  
      Parallax.isSetup || Parallax.setup();
+
   <!-- accordion script -->
      Parallax.sliders.push(self);
+
      Parallax.isFresh = false;
+
      Parallax.requestRender();
+
    });
+
 
+
    if (!sliderExisted)
+
      this.$slider[0].src = this.imageSrc;
+
 
+
    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
+
      this.$slider.trigger('load');
+
    }
+
 
+
   }
+
 
+
 
+
  // Parallax Instance Methods
+
 
+
  $.extend(Parallax.prototype, {
+
    speed:    0.2,
+
    bleed:    0,
+
    zIndex:  -100,
+
    iosFix:  true,
+
    androidFix: true,
+
    position: 'center',
+
    overScrollFix: false,
+
    mirrorContainer: 'body',
+
 
+
    refresh: function() {
+
      this.boxWidth        = this.$element.outerWidth();
+
      this.boxHeight      = this.$element.outerHeight() + this.bleed * 2;
+
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
+
      this.boxOffsetLeft  = this.$element.offset().left;
+
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
+
 
+
      var winHeight = Parallax.winHeight;
+
      var docHeight = Parallax.docHeight;
+
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
+
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
+
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
+
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
+
      var margin;
+
 
+
      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
+
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
+
        this.imageHeight  = imageHeightMin;
+
        this.offsetBaseTop = imageOffsetMin;
+
 
+
        margin = this.imageWidth - this.boxWidth;
+
 
+
        if (this.positionX == 'left') {
+
          this.offsetLeft = 0;
+
        } else if (this.positionX == 'right') {
+
          this.offsetLeft = - margin;
+
        } else if (!isNaN(this.positionX)) {
+
          this.offsetLeft = Math.max(this.positionX, - margin);
+
        } else {
+
          this.offsetLeft = - margin / 2 | 0;
+
        }
+
      } else {
+
        this.imageWidth    = this.boxWidth;
+
        this.imageHeight  = this.boxWidth / this.aspectRatio | 0;
+
        this.offsetLeft    = 0;
+
 
+
        margin = this.imageHeight - imageHeightMin;
+
 
+
        if (this.positionY == 'top') {
+
          this.offsetBaseTop = imageOffsetMin;
+
        } else if (this.positionY == 'bottom') {
+
          this.offsetBaseTop = imageOffsetMin - margin;
+
        } else if (!isNaN(this.positionY)) {
+
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
+
        } else {
+
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
+
        }
+
      }
+
    },
+
 
+
    render: function() {
+
      var scrollTop    = Parallax.scrollTop;
+
      var scrollLeft  = Parallax.scrollLeft;
+
      var overScroll  = this.overScrollFix ? Parallax.overScroll : 0;
+
      var scrollBottom = scrollTop + Parallax.winHeight;
+
 
+
      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
+
        this.visibility = 'visible';
+
        this.mirrorTop = this.boxOffsetTop  - scrollTop;
+
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
+
        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
+
      } else {
+
        this.visibility = 'hidden';
+
      }
+
 
+
      this.$mirror.css({
+
        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
+
        visibility: this.visibility,
+
        height: this.boxHeight,
+
        width: this.boxWidth
+
      });
+
 
+
      this.$slider.css({
+
        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
+
        position: 'absolute',
+
        height: this.imageHeight,
+
        width: this.imageWidth,
+
        maxWidth: 'none'
+
      });
+
    }
+
  });
+
 
+
 
+
  // Parallax Static Methods
+
 
+
  $.extend(Parallax, {
+
    scrollTop:    0,
+
    scrollLeft:  0,
+
    winHeight:    0,
+
    winWidth:    0,
+
    docHeight:    1 << 30,
+
    docWidth:    1 << 30,
+
    sliders:      [],
+
    isReady:      false,
+
    isFresh:      false,
+
    isBusy:      false,
+
 
+
    setup: function() {
+
      if (this.isReady) return;
+
 
+
      var self = this;
+
 
+
      var $doc = $(document), $win = $(window);
+
 
+
      var loadDimensions = function() {
+
        Parallax.winHeight = $win.height();
+
        Parallax.winWidth  = $win.width();
+
        Parallax.docHeight = $doc.height();
+
        Parallax.docWidth  = $doc.width();
+
      };
+
 
+
      var loadScrollPosition = function() {
+
        var winScrollTop  = $win.scrollTop();
+
        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
+
        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
+
        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
+
        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
+
        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
+
      };
+
 
+
      $win.on('resize.px.parallax load.px.parallax', function() {
+
          loadDimensions();
+
          self.refresh();
+
          Parallax.isFresh = false;
+
          Parallax.requestRender();
+
        })
+
        .on('scroll.px.parallax load.px.parallax', function() {
+
          loadScrollPosition();
+
          Parallax.requestRender();
+
        });
+
 
+
      loadDimensions();
+
      loadScrollPosition();
+
 
+
      this.isReady = true;
+
 
+
      var lastPosition = -1;
+
 
+
      function frameLoop() {
+
        if (lastPosition == window.pageYOffset) {  // Avoid overcalculations
+
          window.requestAnimationFrame(frameLoop);
+
          return false;
+
        } else lastPosition = window.pageYOffset;
+
 
+
        self.render();
+
        window.requestAnimationFrame(frameLoop);
+
      }
+
 
+
      frameLoop();
+
    },
+
 
+
    configure: function(options) {
+
      if (typeof options == 'object') {
+
        delete options.refresh;
+
        delete options.render;
+
        $.extend(this.prototype, options);
+
      }
+
    },
+
 
+
    refresh: function() {
+
      $.each(this.sliders, function(){ this.refresh(); });
+
      this.isFresh = true;
+
    },
+
 
+
    render: function() {
+
      this.isFresh || this.refresh();
+
      $.each(this.sliders, function(){ this.render(); });
+
    },
+
 
+
    requestRender: function() {
+
      var self = this;
+
      self.render();
+
      self.isBusy = false;
+
    },
+
    destroy: function(el){
+
      var i,
+
          parallaxElement = $(el).data('px.parallax');
+
      parallaxElement.$mirror.remove();
+
      for(i=0; i < this.sliders.length; i+=1){
+
        if(this.sliders[i] == parallaxElement){
+
          this.sliders.splice(i, 1);
+
        }
+
      }
+
      $(el).data('px.parallax', false);
+
      if(this.sliders.length === 0){
+
        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
+
        this.isReady = false;
+
        Parallax.isSetup = false;
+
      }
+
    }
+
  });
+
 
+
 
+
  // Parallax Plugin Definition
+
 
+
  function Plugin(option) {
+
    return this.each(function () {
+
      var $this = $(this);
+
      var options = typeof option == 'object' && option;
+
 
+
      if (this == window || this == document || $this.is('body')) {
+
        Parallax.configure(options);
+
      }
+
      else if (!$this.data('px.parallax')) {
+
        options = $.extend({}, $this.data(), options);
+
        $this.data('px.parallax', new Parallax(this, options));
+
      }
+
      else if (typeof option == 'object')
+
      {
+
        $.extend($this.data('px.parallax'), options);
+
      }
+
      if (typeof option == 'string') {
+
        if(option == 'destroy'){
+
            Parallax.destroy(this);
+
        }else{
+
          Parallax[option]();
+
        }
+
      }
+
    });
+
  }
+
 
+
  var old = $.fn.parallax;
+
 
+
  $.fn.parallax            = Plugin;
+
  $.fn.parallax.Constructor = Parallax;
+
 
+
 
+
  // Parallax No Conflict
+
 
+
  $.fn.parallax.noConflict = function () {
+
    $.fn.parallax = old;
+
    return this;
+
  };
+
 
+
 
+
  // Parallax Data-API
+
 
+
  $( function () {
+
    $('[data-parallax="scroll"]').parallax();
+
  });
+
 
+
}(jQuery, window, document));
+
 
+
    </script>
+
    <script>
+
// When the user scrolls down 20px from the top of the document, show the button
+
$(window).scroll(function() {
+
    if ($(this).scrollTop() > 20) {
+
        $('#myBtn').fadeIn(400);
+
    } else {
+
        $('#myBtn').fadeOut(400);
+
    }
+
});
+
 
+
</script>
+
 
+
 
+
<!-- accordion script -->
+
 
<script>
 
<script>
 
var acc = document.getElementsByClassName("accordion");
 
var acc = document.getElementsByClassName("accordion");
Line 1,083: Line 394:
 
   });
 
   });
 
}
 
}
 +
$('.btn-info').click(function(){
 +
    $('html, body').animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top
 +
    }, 500);
 +
    return false;
 +
});
 
</script>
 
</script>
 
<!-- accordion script end -->
 
<!-- accordion script end -->
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Template:BGU_Israel/footer}}

Latest revision as of 16:34, 17 October 2018

OriginALS

OriginALS

Notebook

February

We began working in our brand-new lab space! When we first arrived, the lab was nothing but two work benches. We had to collect and organize the equipment, materials, cell culture room, and work area; all according to lab safety standards. We also began cloning the plasmids for our experiments and learning how to work with cell culture by practicing on HEK293 cells.

Highlights: clone Steap4, Timp1, F4/80 into pGL4.17 and pGL3 plasmid for Promoter Assay.

March

In March, we experienced our first little success. We cloned our promoters into the pGL3 vector and were able to begin our first experiment, the Promoter Assay. Meanwhile, so far, our practice cells were alive and well.

Highlights: A decision was made to concentrate our efforts on the pGL3 plasmid expression assay. Because, then we could compare the expression among the promoters and we wouldn’t have to use two sets of luciferase kits.

April

Our long-awaited microglia and astrocytes arrived! While our cell lines were getting used to their new home, we began cloning our crisper and gRNA plasmids for our two-component system.

Highlights: Received microglia and astrocytes cell lines, px601, H1, H2 CMV-dCas9-VPR, building plasmids with Gibson assembly.

May

After a tireless journey, we successfully cloned most of our system’s plasmids. Now we began attempts to transfect these plasmids into our cell lines with different transfection reagents. Additionally, we began the promoter assay and astrocyte reactivity assay.

Highlights: Began Promoter assay, transfection attempts with reagents, ELISA for astrocyte reactivity assay.

June

In June we had to face the music; our transfection was not working. We began exploring alternatives ways to insert our plasmids into our cells, such as electroporation, calcium phosphate transfection, and additional transfection reagents.

Highlights: Astrocyte Western blot, Electroporation of microglia.

July

In July we preformed further attempts to transfect our cells and reactivity assays, and let’s not forget exams period.

Highlights: Electroporation of microglia, mycoplasma assay, colony PCR after the microglia electroporation, transfection attempts with reagents, astrocyte reactivity assay using western blot.

August

The summer was in full swing and with it our iGEM team. Each team member worked full force on experiments to reach a proof of concept.

Highlights: continued reactive astrocyte experiments.

Experiments

OriginALS

About Us


The BGU-iGEM team “OriginALS” hopes to develop an innovative therapeutic approach to prolong the life expectancy of ALS patients, using Synthetic Biology. We are dedicated to promoting ALS awareness and research in Israel through public engagement and educational activities.