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

Line 1: Line 1:
 
{{BGU_Israel}}
 
{{BGU_Israel}}
−
 
+
<!DOCTYPE html>
 +
<html lang="en">
 
<head>
 
<head>
 
    
 
    
 +
  <title>OriginALS</title>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <link type="text/css" rel="stylesheet" href="style.css">
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
 +
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
<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 {
 +
  height: 100%;
 +
  padding: 0 0 10px 20px;
 +
  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 {
 +
    min-height: 700px;
 +
    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;
 +
}
 +
 +
#myBtn:hover {
 +
  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;
 +
}
 +
 +
 +
    </style>
 
</head>
 
</head>
−
<body>
+
<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 class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li><a href="index.html">Home</a></li>
 +
        <li class="dropdown">
 +
        <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">
 
   <header  class="sub-page-header text-center">
 
       <div class="container my-auto">
 
       <div class="container my-auto">
Line 22: Line 422:
 
<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/2017/4/41/T--TUDelft--2017_Gaby_Artikel.pdf" width="100%" height="600">
 +
                        <embed src="https://static.igem.org/mediawiki/2017/4/41/T--TUDelft--2017_Gaby_Artikel.pdf" type="application/pdf" width="100%" height="600" />
 +
</object>
 
</div>
 
</div>
  
Line 63: Line 465:
 
</div>
 
</div>
  
 +
<style>
 +
    .footer-list {
 +
        list-style: none;
 +
        color:#fff;
 +
    }
 +
    .footer-list-item {
 +
        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 {
 +
        background-color:#ededed;
 +
        color:#000;
 +
        padding: 60px 50px;
 +
    }
 +
    .bg-white {
 +
        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">
 
<footer class="bg-dark">
Line 98: Line 545:
 
         </div>
 
         </div>
 
</footer>
 
</footer>
 +
 +
<script>
 +
$(document).ready(function(){
 +
  // Add smooth scrolling to all links in navbar + footer link
 +
  $(".navbar a, #myBtn[href='#top']").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
 +
      var hash = this.hash;
 +
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 500, function(){
 +
 
 +
        // 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();
 +
        if (pos < winTop + 600) {
 +
          $(this).addClass("slide");
 +
        }
 +
    });
 +
  });
 +
})
 +
</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 ) {
 +
 +
  // Polyfill for requestAnimationFrame
 +
  // via: https://gist.github.com/paulirish/1579671
 +
 +
  (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)
 +
      window.requestAnimationFrame = function(callback) {
 +
        var currTime = new Date().getTime();
 +
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
 +
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
 +
          timeToCall);
 +
        lastTime = currTime + timeToCall;
 +
        return id;
 +
      };
 +
 +
    if (!window.cancelAnimationFrame)
 +
      window.cancelAnimationFrame = function(id) {
 +
        clearTimeout(id);
 +
      };
 +
  }());
 +
 +
 +
  // Parallax Constructor
 +
 +
  function Parallax(element, options) {
 +
    var self = this;
 +
 +
    if (typeof options == 'object') {
 +
      delete options.refresh;
 +
      delete options.render;
 +
      $.extend(this, options);
 +
    }
 +
 +
    this.$element = $(element);
 +
 +
    if (!this.imageSrc && this.$element.is('img')) {
 +
      this.imageSrc = this.$element.attr('src');
 +
    }
 +
 +
    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
 +
 +
    if (positions.length < 1) {
 +
      positions.push('center');
 +
    }
 +
    if (positions.length == 1) {
 +
      positions.push(positions[0]);
 +
    }
 +
 +
    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
 +
      positions = [positions[1], positions[0]];
 +
    }
 +
 +
    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
 +
    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
 +
 +
    self.positionX = positions[0];
 +
    self.positionY = positions[1];
 +
 +
    if (this.positionX != 'left' && this.positionX != 'right') {
 +
      if (isNaN(parseInt(this.positionX))) {
 +
        this.positionX = 'center';
 +
      } else {
 +
        this.positionX = parseInt(this.positionX);
 +
      }
 +
    }
 +
 +
    if (this.positionY != 'top' && this.positionY != 'bottom') {
 +
      if (isNaN(parseInt(this.positionY))) {
 +
        this.positionY = 'center';
 +
      } else {
 +
        this.positionY = parseInt(this.positionY);
 +
      }
 +
    }
 +
 +
    this.position =
 +
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
 +
      this.positionY + (isNaN(this.positionY)? '' : 'px');
 +
 +
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
 +
      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
 +
        this.$element.css({
 +
          backgroundImage: 'url(' + this.imageSrc + ')',
 +
          backgroundSize: 'cover',
 +
          backgroundPosition: this.position
 +
        });
 +
      }
 +
      return this;
 +
    }
 +
 +
    if (navigator.userAgent.match(/(Android)/)) {
 +
      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
 +
        this.$element.css({
 +
          backgroundImage: 'url(' + this.imageSrc + ')',
 +
          backgroundSize: 'cover',
 +
          backgroundPosition: this.position
 +
        });
 +
      }
 +
      return this;
 +
    }
 +
 +
    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
 +
 +
    var slider = this.$element.find('>.parallax-slider');
 +
    var sliderExisted = false;
 +
 +
    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();
 +
      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>
  
 
    
 
    

Revision as of 23:37, 18 September 2018

OriginALS

<!DOCTYPE html> OriginALS

Notebook

October

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.

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.

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.

September

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.

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.

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.

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.

About OrignALS


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.

    Keep in Touch

  • @iGEMBGU
  • @igem_2018_bgu
  • @originalsbgu
  • bgu_israel@gmail.com

    Address

  • Ben-Gurion University of the Negev
    Ben Gurion 1, Beer Sheva 8410501, Israel