Template:Team:Berkeley/header

From 2013.igem.org

(Difference between revisions)
Line 15: Line 15:
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Template:Team:Berkeley/css?action=raw&ctype=text/css" />
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Template:Team:Berkeley/css?action=raw&ctype=text/css" />
 +
<script>
 +
/* =============================================================
 +
* bootstrap-scrollspy.js v2.0.4
 +
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
 +
* =============================================================
 +
* Copyright 2012 Twitter, Inc.
 +
*
 +
* Licensed under the Apache License, Version 2.0 (the "License");
 +
* you may not use this file except in compliance with the License.
 +
* You may obtain a copy of the License at
 +
*
 +
* http://www.apache.org/licenses/LICENSE-2.0
 +
*
 +
* Unless required by applicable law or agreed to in writing, software
 +
* distributed under the License is distributed on an "AS IS" BASIS,
 +
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 +
* See the License for the specific language governing permissions and
 +
* limitations under the License.
 +
* ============================================================== */
 +
 +
 +
!function ($) {
 +
 +
  "use strict"; // jshint ;_;
 +
 +
 +
  /* SCROLLSPY CLASS DEFINITION
 +
  * ========================== */
 +
 +
  function ScrollSpy( element, options) {
 +
    var process = $.proxy(this.process, this)
 +
      , $element = $(element).is('body') ? $(window) : $(element)
 +
      , href
 +
    this.options = $.extend({}, $.fn.scrollspy.defaults, options)
 +
    this.$scrollElement = $element.on('scroll.scroll.data-api', process)
 +
    this.selector = (this.options.target
 +
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
 +
      || '') + ' .nav li > a'
 +
    this.$body = $('body')
 +
    this.refresh()
 +
    this.process()
 +
  }
 +
 +
  ScrollSpy.prototype = {
 +
 +
      constructor: ScrollSpy
 +
 +
    , refresh: function () {
 +
        var self = this
 +
          , $targets
 +
 +
        this.offsets = $([])
 +
        this.targets = $([])
 +
 +
        $targets = this.$body
 +
          .find(this.selector)
 +
          .map(function () {
 +
            var $el = $(this)
 +
              , href = $el.data('target') || $el.attr('href')
 +
              , $href = /^#\w/.test(href) && $(href)
 +
            return ( $href
 +
              && href.length
 +
              && [[ $href.offset().top, href ]] ) || null // changed 'position()->'offset()'
 +
          })
 +
          .sort(function (a, b) { return a[0] - b[0] })
 +
          .each(function () {
 +
            self.offsets.push(this[0])
 +
            self.targets.push(this[1])
 +
          })
 +
      }
 +
 +
    , process: function () {
 +
        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
 +
          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
 +
          , maxScroll = scrollHeight - this.$scrollElement.height()
 +
          , offsets = this.offsets
 +
          , targets = this.targets
 +
          , activeTarget = this.activeTarget
 +
          , i
 +
 +
        if (scrollTop >= maxScroll) {
 +
          return activeTarget != (i = targets.last()[0])
 +
            && this.activate ( i )
 +
        }
 +
 +
        for (i = offsets.length; i--;) {
 +
          activeTarget != targets[i]
 +
            && scrollTop >= offsets[i]
 +
            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
 +
            && this.activate( targets[i] )
 +
        }
 +
      }
 +
 +
    , activate: function (target) {
 +
        var active
 +
          , selector
 +
 +
        this.activeTarget = target
 +
 +
        $(this.selector)
 +
          .parent('.active')
 +
          .removeClass('active')
 +
 +
        selector = this.selector
 +
          + '[data-target="' + target + '"],'
 +
          + this.selector + '[href="' + target + '"]'
 +
 +
        active = $(selector)
 +
          .parent('li')
 +
          .addClass('active')
 +
 +
        if (active.parent('.dropdown-menu'))  {
 +
          active = active.closest('li.dropdown').addClass('active')
 +
        }
 +
 +
        active.trigger('activate')
 +
      }
 +
 +
  }
 +
 +
 +
/* SCROLLSPY PLUGIN DEFINITION
 +
  * =========================== */
 +
 +
  $.fn.scrollspy = function ( option ) {
 +
    return this.each(function () {
 +
      var $this = $(this)
 +
        , data = $this.data('scrollspy')
 +
        , options = typeof option == 'object' && option
 +
      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
 +
      if (typeof option == 'string') data[option]()
 +
    })
 +
  }
 +
 +
  $.fn.scrollspy.Constructor = ScrollSpy
 +
 +
  $.fn.scrollspy.defaults = {
 +
    offset: 10
 +
  }
 +
 +
 +
/* SCROLLSPY DATA-API
 +
  * ================== */
 +
 +
  $(function () {
 +
    $('[data-spy="scroll"]').each(function () {
 +
      var $spy = $(this)
 +
      $spy.scrollspy($spy.data())
 +
    })
 +
  })
 +
 +
}(window.jQuery);
 +
</script>
</head>
</head>
<body>
<body>
 +
 +
<body data-spy="scroll" data-target="#navbar">
 +
    <div id="header" class="box">
 +
        <h1>Header</h1>
 +
    </div>
 +
    <div id="content">
 +
        <div id="post1" class="box">
 +
            <h1>Post 1</h1>
 +
            <p> Scroll Down↓</p>
 +
        </div>
 +
        <div id="post2" class="box"><h1>Post 2</h1></div>
 +
        <div id="post3" class="box"><h1>Post 3</h1></div>
 +
       
 +
        <div id="navbar">
 +
            <ul class="nav">
 +
                <li><a href="#post1">Post 1</a></li>
 +
                <li><a href="#post2">Post 2</a></li>
 +
                <li><a href="#post3">Post 3</a></li>
 +
            </ul>
 +
        </div>
 +
    </div>
 +
</body>
 +
 +
<div id="header-image">
<div id="header-image">
<div id="header-image-inner">
<div id="header-image-inner">

Revision as of 00:19, 22 October 2013

Post 1

Scroll Down↓

Post 2

Post 3