Team:Evry/Notebook/test

From 2014.igem.org

(Difference between revisions)
 
(37 intermediate revisions not shown)
Line 1: Line 1:
 +
<html>
<html>
 +
<head>
 +
  <title>Dropdown</title>
 +
  <style>
 +
{{:Team:Evry/Notebook/test}}
 +
<\style>
 +
</head>
 +
<body>
-
<!-- Remonter la page -->
+
<div class="container">
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
+
-
<script type="text/javascript">
+
-
$(function(){
+
-
  $('#btn_up').click(function() {
+
-
    $('html,body').animate({scrollTop: 0}, 'slow');
+
-
  });
+
-
   $(window).scroll(function(){
+
   <div class="page-header">
-
    if($(window).scrollTop()<500){
+
    <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
-
        $('#btn_up').fadeOut();
+
   </div>
-
    }else{
+
-
        $('#btn_up').fadeIn();
+
-
    }
+
-
   });
+
-
});
+
-
</script>
+
-
<div id="btn_up" style="position: fixed; bottom: 15px; right: 25px; cursor: pointer; display:none;">
+
  <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
-
<img alt="Top_arrow" title="Top" src="https://static.igem.org/mediawiki/2013/7/78/IronMan.png" width="40" />
+
    <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>
 +
 
 +
  <ul class="nav nav-pills">
 +
    <li class="active"><a href="#">Regular link</a></li>
 +
    <li class="dropdown">
 +
      <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>
</div>
-
<!-- menu latéral -->
+
<!-- JavaScript Includes -->
-
<script type="text/javascript">
+
<script src="https://2014.igem.org/Team:Evry/JS2&action=raw"></script>
-
$(function() {
+
-
    $(document).scroll(function() {
+
-
   
+
-
        if($(document).scrollTop()>=180)
+
-
            {
+
-
                $('aside').css('position','fixed').css('top','40px').css('box-shadow','0px 3px 6px #1c1a19');
+
-
               
+
-
            }
+
-
            else
+
-
            {
+
-
                $('aside').css('position','static').css('float','left').css('margin-left','-0.3%').css('box-shadow','none');               
+
-
            }   
+
-
    });
+
-
});
+
-
</script>
+
-
<!-- Menu horizontal -->
 
-
<script type="text/javascript">
 
-
$(function() {
 
-
    $(document).scroll(function() {
 
-
   
 
-
        if($(document).scrollTop()>=180)
 
-
            {
 
-
                $('#menu').css('position','fixed').css('top','0px').css('width','100%');
 
-
                $('#menu a span').css('display','none');
 
-
                $('#menu ul').css('top','1.5em').css('top','1.5vw');
 
-
                $('#menu #igem-link').css('width','1.5%');     
 
-
            }
 
-
            else
 
-
            {
 
-
                $('#menu').css('position','static');
 
-
                $('#menu a span').css('display','block');
 
-
                $('#menu ul').css('top','5.5em').css('top','5.5vw');
 
-
                $('#menu #igem-link').css('width','4%');                   
 
-
            }   
 
-
    });
 
-
});
 
-
</script>
 
-
<!-- Onglet Notebook -->
+
<script>
 +
/* ========================================================================
 +
* 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)
 +
* ======================================================================== */
 +
 
 +
 
 +
+function ($) {
 +
  'use strict';
 +
 
 +
  // 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'
 +
 
 +
  Dropdown.prototype.toggle = function (e) {
 +
    var $this = $(this)
 +
 
 +
    if ($this.is('.disabled, :disabled')) return
 +
 
 +
    var $parent  = getParent($this)
 +
    var isActive = $parent.hasClass('open')
 +
 
 +
    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);
-
<script type="text/javascript">
 
-
$(function() {
 
-
  $(document).scroll(function() {
 
-
   
 
-
    if($(document).scrollTop()>=160)
 
-
    {
 
-
        $('.onglet').css('position','fixed').css('margin-left','8px').css('top','5%');
 
-
        $('.onglet-left').css('position','fixed').css('top','5%');                     
 
-
    } 
 
-
    else
 
-
    {
 
-
        $('.onglet').css('position','absolute').css('margin-left','0px').css('top','auto');
 
-
        $('.onglet-left').css('position','absolute').css('top','auto');                             
 
-
    } 
 
-
 
 
-
  });
 
-
});
 
</script>
</script>
-
</html
+
<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>
 +
</html>

Latest revision as of 16:51, 20 August 2014

Dropdown