Team:Evry/Notebook/test

From 2014.igem.org

(Difference between revisions)
 
(34 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Evry/Template:HomeIncludes}}
+
 
<html>
<html>
<head>
<head>
-
<style>
+
  <title>Dropdown</title>
 +
  <style>
 +
{{:Team:Evry/Notebook/test}}
 +
<\style>
 +
</head>
 +
<body>
-
div.week > div {
+
<div class="container">
-
    border-left-style: solid;
+
-
    border-width: high;
+
-
    border-color: black;
+
-
    padding-left: 20px;
+
-
}
+
-
figure, figure img{
+
  <div class="page-header">
-
    display: block;
+
     <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
-
    margin-left: auto;
+
  </div>
-
     margin-right: auto;
+
-
    max-width:80%;
+
-
}
+
-
figcaption {
+
  <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
-
     text-align: center;
+
     <div class="container-fluid">
-
    font-style: italic;
+
      <div class="navbar-header">
-
    font-size: smaller;
+
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
-
}
+
          <span class="sr-only">Toggle navigation</span>
 +
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>
 +
        </button>
 +
        <a class="navbar-brand" href="#">Project Name</a>
 +
      </div>
 +
      <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
 +
        <ul class="nav navbar-nav">
 +
          <li class="dropdown">
 +
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 +
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
 +
              <li role="presentation" class="divider"></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
          <li class="dropdown">
 +
            <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
 +
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
 +
              <li role="presentation" class="divider"></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
        <ul class="nav navbar-nav navbar-right">
 +
          <li id="fat-menu" class="dropdown">
 +
            <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
 +
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
 +
              <li role="presentation" class="divider"></li>
 +
              <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </div>
 +
    </div>
 +
  </nav>
-
#checkboxProject {
+
  <ul class="nav nav-pills">
-
     display: 50;
+
    <li class="active"><a href="#">Regular link</a></li>
-
<!--   position: fixed;-->
+
     <li class="dropdown">
-
     background-color:blue;
+
      <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-
}
+
      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
 +
        <li role="presentation" class="divider"></li>
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 +
      </ul>
 +
     </li>
 +
    <li class="dropdown">
 +
      <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
 +
      <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
 +
        <li role="presentation" class="divider"></li>
 +
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 +
      </ul>
 +
    </li>
 +
  </ul>
 +
</div>
-
</style>
+
<!-- JavaScript Includes -->
 +
<script src="https://2014.igem.org/Team:Evry/JS2&action=raw"></script>
-
</head>
 
-
<body>
 
-
<div id="preloader">
 
-
<div class="loader-gplus"></div>
 
-
</div>
 
-
<div id="st-container" class="st-container">
 
-
<div class="st-pusher">
 
-
<div class="st-content">
 
-
<section id="top-section-hero" class="top-section-title">
 
-
<div class="gradient-overlay"></div>
 
-
<header id="top-header" class="col-lg-10 col-sm-12">
 
-
<svg id="menu-trigger" class="icon icon-menu visible-xs" viewBox="0 0 32 32" data-effect="st-effect">
 
-
<use xlink:href="https://raw.githubusercontent.com/tagazok/zeppelin/master/zeppelin/img/sprites/sprites.svg#icon-menu"></use>
 
-
</svg>
 
-
                                                <img class="logo-header" src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" style="width:80px; height:auto" />
 
-
 
-
<nav class="st-menu st-effect" id="menu">
 
-
<div class="logo-navbar logo-dark visible-xs"></div>
 
-
<ul>
 
-
<li><a href="https://2014.igem.org/Team:Evry">Home</a>
 
-
</li>
 
-
<li><a  href="https://2014.igem.org/Team:Evry/Project">Project</a>
 
-
</li>
 
-
<li><a  href="https://2014.igem.org/Team:Evry/EvryTeam">Team</a>
 
-
</li>
 
-
<li><a  href="https://2014.igem.org/Team:Evry/Model">Model</a>
 
-
</li>
 
-
<li><a  href="https://2014.igem.org/Team:Evry/Biology">Biology</a>
 
-
</li>
 
-
<li><a  href="https://2014.igem.org/Team:Evry/Policy and Practices">Policy and Practices</a>
 
-
</li>
 
-
<li><a class="current" href="https://2014.igem.org/Team:Evry/Notebook">Notebook</a>
 
-
</li>
 
-
                                                                <li><a  href="https://2014.igem.org/Team:Evry/Spon-ge-sors">Spon-ge-sors</a>
 
-
</li>
 
-
</ul>
 
-
</nav>
 
-
</header>
 
-
<div class="jumbotron text-left">
 
-
<div class="animated hiding" data-animation="fadeInLeft" data-delay="500">
 
-
<h1>Notebook</h1>
 
-
</div>
 
-
</div>
+
<script>
-
<div id="test123">
+
/* ========================================================================
-
</div>
+
* Bootstrap: dropdown.js v3.2.0
 +
* http://getbootstrap.com/javascript/#dropdowns
 +
* ========================================================================
 +
* Copyright 2011-2014 Twitter, Inc.
 +
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 +
* ======================================================================== */
-
<script language="JavaScript">
 
-
</script>
+
+function ($) {
 +
  'use strict';
-
<!--
+
  // DROPDOWN CLASS DEFINITION
 +
  // =========================
-
<script language="JavaScript">
+
  var backdrop = '.dropdown-backdrop'
 +
  var toggle  = '[data-toggle="dropdown"]'
 +
  var Dropdown = function (element) {
 +
    $(element).on('click.bs.dropdown', this.toggle)
 +
  }
-
Horloge qui marche pas
+
  Dropdown.VERSION = '3.2.0'
-
/*http://blog.niap3d.com/jsSimpleDatePickr*/
+
-
function jsSimpleDatePickr(id){
+
-
var me = this;
+
-
me.dateDisp = new Date();
+
-
me.dateSel = new Date();
+
-
me.dayOrder = '1234560';
+
-
me.dayName = ['D', 'L', 'M', 'M', 'J', 'V', 'S'];
+
-
me.id = id;
+
-
me.funcDateClic = me.classTable = me.classTd = me.classSelection = '';
+
-
me.setDate = function(dateStr){
+
-
if(!dateStr) return 0;
+
-
var dateArr = dateStr.split('/');
+
-
if(isNaN(dateArr[0])) return 0;
+
-
today = new Date();
+
-
if(isNaN(dateArr[1])) dateArr[1] = today.getMonth();
+
-
else dateArr[1] = parseInt(dateArr[1], 10)-1;
+
-
if(isNaN(dateArr[2])) dateArr[2] = today.getFullYear();
+
-
else if(parseInt(dateArr[2], 10)<2000) dateArr[2] = parseInt(dateArr[2], 10)+2000;
+
-
me.dateSel = new Date(dateArr[2], dateArr[1], dateArr[0]);
+
-
me.dateDisp = new Date(dateArr[2], dateArr[1], dateArr[0]);
+
-
}
+
-
me.setMonth = function(val){
+
-
var v = parseInt(val, 10);
+
-
if(val.charAt(0)=='+' || val.charAt(0)=='-') v = me.dateDisp.getMonth()+v;
+
-
me.dateDisp.setMonth(v);
+
-
}
+
-
me.setYear = function(val){
+
-
var v = parseInt(val, 10);
+
-
if(val.charAt(0)=='+' || val.charAt(0)=='-') v = me.dateDisp.getFullYear()+v;
+
-
me.dateDisp.setFullYear(v);
+
-
}
+
-
me.show = function(){
+
-
var nb = today = 0;
+
-
var month = me.dateDisp.getMonth();
+
-
var year = me.dateDisp.getFullYear();
+
-
if(month==me.dateSel.getMonth() && year==me.dateDisp.getFullYear()) today = me.dateDisp.getDate();
+
-
var h = '<table class="'+me.classTable+'"><tr>';
+
-
for(var i in me.dayOrder){
+
-
h += '<th>'+me.dayName[me.dayOrder[i]]+'</th>';
+
-
}
+
-
h += '</tr><tr>';
+
-
var d = new Date(year, month, 1);
+
-
for(nb=0; nb<me.dayOrder.indexOf(d.getDay()); nb++){
+
-
h += '<td> </td>';
+
-
}
+
-
d.setMonth(month+1, 0);
+
-
for(i=1; i<=d.getDate(); i++){
+
-
nb++;
+
-
if(nb>7){
+
-
nb = 1;
+
-
h += '</tr><tr>';
+
-
}
+
-
h += '<td class="'+(i==today ? me.classSelection:me.classTd)+'"><a href="#"'+(me.funcDateClic!='' ? ' onclick="'+me.funcDateClic+'(\''+i+'/'+(month+1)+'/'+year+'\', \''+me.id+'\');return false;"':'')+'>'+i+'</a></td>';
+
-
}
+
-
for(i=nb; i<7; i++){
+
-
h += '<td> </td>';
+
-
}
+
-
h += '</tr></table>';
+
-
document.getElementById(me.id).innerHTML = h
+
-
}
+
-
}
+
-
jsSimpleDatePickr("test123");
+
-
alert("Does it work?");
+
-
</script>
+
-
fin horloge qui marche pas
+
-
-->
+
-
</section>
+
  Dropdown.prototype.toggle = function (e) {
-
<!--
+
    var $this = $(this)
-
<section id="speakers">
+
-
</section>
+
-
<div class="content-wrapper">
+
-
<div class="col-lg-10 col-lg-offset-1">
+
-
<gogo>
+
    if ($this.is('.disabled, :disabled')) return
-
</div>
+
-
</div>
+
    var $parent  = getParent($this)
 +
    var isActive = $parent.hasClass('open')
 +
    clearMenus()
-
<div class="tarace">
+
    if (!isActive) {
-
<ul class="drop_down">
+
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
-
  <li><a href="https://2014.igem.org/Team:Evry/Notebook/RNAseq">RNAseq</a>
+
        // if mobile we use a backdrop because click events don't delegate
-
  <ul>
+
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
-
      <li><a href="https://2014.igem.org/Team:Evry/Notebook/RNAseq/week1" title="">Week 1</a></li>
+
      }
-
      <li><a href="https://2014.igem.org/Team:Evry/Notebook/RNAseq/week2" title="">Week 2</a></li>
+
-
    </ul>
+
-
  </li>
+
-
</ul>
+
      var relatedTarget = { relatedTarget: this }
-
</div>-->
+
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
-
+
      if (e.isDefaultPrevented()) return
-
</div>
+
-
</div>
+
-
</div>
+
 +
      $this.trigger('focus')
 +
      $parent
 +
        .toggleClass('open')
 +
        .trigger('shown.bs.dropdown', relatedTarget)
 +
    }
 +
    return false
 +
  }
 +
  Dropdown.prototype.keydown = function (e) {
 +
    if (!/(38|40|27)/.test(e.keyCode)) return
-
<section id="speakers">
+
    var $this = $(this)
-
<!-- <div class="col-lg-10 col-lg-offset-1"> -->
+
-
<div id="Left-Menu" class="Left-Menu">
+
 +
    e.preventDefault()
 +
    e.stopPropagation()
 +
    if ($this.is('.disabled, :disabled')) return
-
<!-- <h5>RNAseq</h5> -->
+
    var $parent = getParent($this)
-
</html>
+
    var isActive = $parent.hasClass('open')
-
<!--
+
-
{{:Team:Evry/Notebook/RNAseq/week1}}
+
-
<h5>Transformation</h5>
+
    if (!isActive || (isActive && e.keyCode == 27)) {
-
{{:Team:Evry/Notebook/Transformation}}
+
      if (e.which == 27) $parent.find(toggle).trigger('focus')
 +
      return $this.trigger('click')
 +
    }
-
<h5>Sensing</h5>
+
    var desc = ' li:not(.divider):visible a'
-
{{:Team:Evry/Notebook/Sensing}}
+
    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
-
<h5>Cell Characterization</h5>
+
    if (!$items.length) return
-
{{:Team:Evry/Notebook/CellCharacterization}}
+
-
<h5>Protocols</h5>
+
    var index = $items.index($items.filter(':focus'))
-
{{:Team:Evry/Notebook/Protocols}}
+
-
<h5>Interlab study</h5> -->
+
    if (e.keyCode == 38 && index > 0)                index--                       // up
-
{{:Team:Evry/Notebook/Interlabstudy}}
+
    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
 +
    if (!~index)                                      index = 0
 +
    $items.eq(index).trigger('focus')
 +
  }
-
<html>
+
  function clearMenus(e) {
-
</div>
+
    if (e && e.which === 3) return
 +
    $(backdrop).remove()
 +
    $(toggle).each(function () {
 +
      var $parent = getParent($(this))
 +
      var relatedTarget = { relatedTarget: this }
 +
      if (!$parent.hasClass('open')) return
 +
      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
 +
      if (e.isDefaultPrevented()) return
 +
      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
 +
    })
 +
  }
-
</section>
+
  function getParent($this) {
 +
    var selector = $this.attr('data-target')
 +
    if (!selector) {
 +
      selector = $this.attr('href')
 +
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
 +
    }
 +
 +
    var $parent = selector && $(selector)
 +
 +
    return $parent && $parent.length ? $parent : $this.parent()
 +
  }
 +
 +
 +
  // DROPDOWN PLUGIN DEFINITION
 +
  // ==========================
 +
 +
  function Plugin(option) {
 +
    return this.each(function () {
 +
      var $this = $(this)
 +
      var data  = $this.data('bs.dropdown')
 +
 +
      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
 +
      if (typeof option == 'string') data[option].call($this)
 +
    })
 +
  }
 +
 +
  var old = $.fn.dropdown
 +
 +
  $.fn.dropdown            = Plugin
 +
  $.fn.dropdown.Constructor = Dropdown
 +
 +
 +
  // DROPDOWN NO CONFLICT
 +
  // ====================
 +
 +
  $.fn.dropdown.noConflict = function () {
 +
    $.fn.dropdown = old
 +
    return this
 +
  }
 +
 +
 +
  // APPLY TO STANDARD DROPDOWN ELEMENTS
 +
  // ===================================
 +
 +
  $(document)
 +
    .on('click.bs.dropdown.data-api', clearMenus)
 +
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
 +
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
 +
    .on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
 +
 +
}(jQuery);
 +
 +
</script>
 +
 +
 +
<script >
 +
/* ========================================================================
 +
* Bootstrap: transition.js v3.2.0
 +
* http://getbootstrap.com/javascript/#transitions
 +
* ========================================================================
 +
* Copyright 2011-2014 Twitter, Inc.
 +
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 +
* ======================================================================== */
 +
 +
 +
+function ($) {
 +
  'use strict';
 +
 +
  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
 +
  // ============================================================
 +
 +
  function transitionEnd() {
 +
    var el = document.createElement('bootstrap')
 +
 +
    var transEndEventNames = {
 +
      WebkitTransition : 'webkitTransitionEnd',
 +
      MozTransition    : 'transitionend',
 +
      OTransition      : 'oTransitionEnd otransitionend',
 +
      transition      : 'transitionend'
 +
    }
 +
 +
    for (var name in transEndEventNames) {
 +
      if (el.style[name] !== undefined) {
 +
        return { end: transEndEventNames[name] }
 +
      }
 +
    }
 +
 +
    return false // explicit for ie8 (  ._.)
 +
  }
 +
 +
  // http://blog.alexmaccaw.com/css-transitions
 +
  $.fn.emulateTransitionEnd = function (duration) {
 +
    var called = false
 +
    var $el = this
 +
    $(this).one('bsTransitionEnd', function () { called = true })
 +
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
 +
    setTimeout(callback, duration)
 +
    return this
 +
  }
 +
 +
  $(function () {
 +
    $.support.transition = transitionEnd()
 +
 +
    if (!$.support.transition) return
 +
 +
    $.event.special.bsTransitionEnd = {
 +
      bindType: $.support.transition.end,
 +
      delegateType: $.support.transition.end,
 +
      handle: function (e) {
 +
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
 +
      }
 +
    }
 +
  })
 +
 +
}(jQuery);
 +
 +
</script>
</body>
</body>
</html>
</html>
-
 
-
{{:Team:Evry/Template:HomeFooter}}
 

Latest revision as of 16:51, 20 August 2014

Dropdown