Team:Evry/Notebook/test

From 2014.igem.org

(Difference between revisions)
 
(10 intermediate revisions not shown)
Line 1: Line 1:
 +
<html>
<html>
<head>
<head>
-
<!-- Head style-->
+
  <title>Dropdown</title>
-
  <title>IGEM Evry 2014</title>
+
  <style>
-
    <link rel="shortcut icon" href="/zeppelin/img/favicons/favicon.ico">
+
{{:Team:Evry/Notebook/test}}
-
    <link rel="apple-touch-icon" sizes="152x152" href="/zeppelin/img/favicons/apple-touch-icon-152x152.png">
+
<\style>
-
    <link rel="apple-touch-icon" sizes="144x144" href="/zeppelin/img/favicons/apple-touch-icon-144x144.png">
+
</head>
-
    <link rel="apple-touch-icon" sizes="120x120" href="/zeppelin/img/favicons/apple-touch-icon-120x120.png">
+
<body>
-
    <link rel="apple-touch-icon" sizes="114x114" href="/zeppelin/img/favicons/apple-touch-icon-114x114.png">
+
-
    <link rel="apple-touch-icon" sizes="76x76" href="/zeppelin/img/favicons/apple-touch-icon-76x76.png">
+
-
    <link rel="apple-touch-icon" sizes="72x72" href="/zeppelin/img/favicons/apple-touch-icon-72x72.png">
+
-
    <link rel="apple-touch-icon" sizes="60x60" href="/zeppelin/img/favicons/apple-touch-icon-60x60.png">
+
-
    <link rel="apple-touch-icon" sizes="57x57" href="/zeppelin/img/favicons/apple-touch-icon-57x57.png">
+
-
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-196x196.png">
+
-
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-160x160.png">
+
-
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-96x96.png">
+
-
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-32x32.png">
+
-
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-16x16.png">
+
-
    <meta name="msapplication-TileColor" content="#2b5797">
+
-
    <meta name="msapplication-TileImage" content="/zeppelin/img/favicons/mstile-144x144.png">
+
-
    <meta name="msapplication-config" content="/zeppelin/img/favicons/browserconfig.xml">
+
-
    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,500&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
+
<div class="container">
-
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
  <div class="page-header">
-
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
     <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
-
     <!--[if lt IE 9]>
+
   </div>
-
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+
-
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+
-
      <![endif]-->
+
-
   </head>
+
-
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
+
  <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
-
    <script src="https://2014.igem.org/Team:Evry/JS?action=raw&ctype=text/javascript"></script>
+
     <div class="container-fluid">
-
      
+
      <div class="navbar-header">
 +
        <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>
-
     <script>
+
  <ul class="nav nav-pills">
-
        $(document).ready(function () {
+
     <li class="active"><a href="#">Regular link</a></li>
-
            var bodyColor = $('body').css('color');
+
    <li class="dropdown">
-
            if (bodyColor != 'rgb(51, 51, 51)') {
+
      <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-
                $("head").prepend('<link rel="stylesheet" href="http://www.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">');
+
      <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>
-
            $(function () {
+
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-
                $("#typeout-text").typed({
+
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-
                    strings: ["","Sponge Patrol Project",""],
+
        <li role="presentation" class="divider"></li>
-
                    typeSpeed: 150,
+
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-
                    backDelay: 800,
+
      </ul>
-
                    loop: true
+
    </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">
-
     </script>
+
        <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 -->
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
<script src="https://2014.igem.org/Team:Evry/JS2&action=raw"></script>
-
    display:none;}
+
-
#top-section {
+
-
    border: none;
+
-
    height: 0px;}
+
-
#content {
+
-
    border: none;}
+
-
/* Removes "teams" from the menubar */
+
<script>
-
#menubar > ul > li:last-child {
+
/* ========================================================================
-
    display: none;}
+
* Bootstrap: dropdown.js v3.2.0
-
/* Resizes the menubar to fik the links (default is 400px) */
+
* http://getbootstrap.com/javascript/#dropdowns
-
#menubar {
+
* ========================================================================
-
    width: auto;}
+
* Copyright 2011-2014 Twitter, Inc.
 +
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 +
* ======================================================================== */
-
body {
+
+function ($) {
-
    margin: 10px 0 0 0;
+
  'use strict';
-
    padding: 0;}
+
-
#top-section {
+
-
    width: 965px;
+
-
    height: 0;
+
-
    margin: 0 auto;
+
-
    padding: 0;
+
-
    border: none;}
+
 +
  // DROPDOWN CLASS DEFINITION
 +
  // =========================
 +
  var backdrop = '.dropdown-backdrop'
 +
  var toggle  = '[data-toggle="dropdown"]'
 +
  var Dropdown = function (element) {
 +
    $(element).on('click.bs.dropdown', this.toggle)
 +
  }
 +
  Dropdown.VERSION = '3.2.0'
-
#nav {
+
  Dropdown.prototype.toggle = function (e) {
-
     background: cyan;
+
     var $this = $(this)
-
}
+
-
#nav {
+
-
    background: cyan;
+
-
}
+
-
#nav a {
+
-
    text-font:50px;
+
-
}
+
 +
    if ($this.is('.disabled, :disabled')) return
 +
    var $parent  = getParent($this)
 +
    var isActive = $parent.hasClass('open')
-
</style>
+
    clearMenus()
 +
    if (!isActive) {
 +
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
 +
        // if mobile we use a backdrop because click events don't delegate
 +
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
 +
      }
 +
 +
      var relatedTarget = { relatedTarget: this }
 +
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
 +
 +
      if (e.isDefaultPrevented()) return
 +
 +
      $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
 +
 +
    var $this = $(this)
 +
 +
    e.preventDefault()
 +
    e.stopPropagation()
 +
 +
    if ($this.is('.disabled, :disabled')) return
 +
 +
    var $parent  = getParent($this)
 +
    var isActive = $parent.hasClass('open')
 +
 +
    if (!isActive || (isActive && e.keyCode == 27)) {
 +
      if (e.which == 27) $parent.find(toggle).trigger('focus')
 +
      return $this.trigger('click')
 +
    }
 +
 +
    var desc = ' li:not(.divider):visible a'
 +
    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
 +
 +
    if (!$items.length) return
 +
 +
    var index = $items.index($items.filter(':focus'))
 +
 +
    if (e.keyCode == 38 && index > 0)                index--                        // up
 +
    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
 +
    if (!~index)                                      index = 0
 +
 +
    $items.eq(index).trigger('focus')
 +
  }
 +
 +
  function clearMenus(e) {
 +
    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)
 +
    })
 +
  }
 +
 +
  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);
-
<!-- Remove all empty <p> tags -->
 
-
<script type="text/javascript">
 
-
    $(document).ready(function() {
 
-
        $("p").filter( function() {
 
-
            return $.trim($(this).html()) == '';
 
-
        }).remove()
 
-
    });
 
</script>
</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)
 +
* ======================================================================== */
-
</head>
 
-
<body>
 
-
<!--BEGIN menu -->
 
-
<div id="header-wrapper">
 
-
    <div class="container">
 
-
        <div class="row">
 
-
            <div class="12u">
 
-
        <header id="header">
 
-
<h1><a href="#" id="logo">Evry2014</a></h1>
 
-
<nav id="nav">
 
-
<a href="https://2014.igem.org/Team:Evry">Home</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Project">Project</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Team" class="current-page-item">Team</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Model">Model</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Biology">Biology</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Biology">Policy and Practices</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Biology">Notebook</a>
 
-
<a href="https://2014.igem.org/Team:Evry/Biology">Spon-ge-sors</a>
 
 +
+function ($) {
 +
  'use strict';
-
</nav>
+
  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
-
</header>
+
  // ============================================================
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
 +
  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>
-
<!--END menu -->
 
</body>
</body>
</html>
</html>

Latest revision as of 16:51, 20 August 2014

Dropdown