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
Header
Post 1
Scroll Down↓