Team:Freiburg/Templates/html/js.html
From 2014.igem.org
(Difference between revisions)
(40 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <button class="invertbutton" onclick="invertColors();">Inv.</button> | ||
+ | <script> | ||
+ | function invertColors() { | ||
+ | var $html = $('html'); | ||
+ | $html.toggleClass('inverted-colors'); | ||
+ | }; | ||
+ | (function(){ | ||
+ | var DEBUG = false; | ||
+ | // grab navigation links | ||
+ | var navLinks = document.getElementsByTagName('nav'); | ||
+ | if (navLinks.length > 0) navLinks = navLinks[0]; | ||
+ | navLinks = navLinks.getElementsByTagName('a'); | ||
- | < | + | // check all links' href attributes for equality with url |
- | <script src="/Team:Freiburg/js/ | + | var currentPath = location.pathname; |
- | <script src="/Team:Freiburg/js/ | + | if (DEBUG) console.log("Current Path: " + currentPath); |
- | <script src="/Team:Freiburg/js/jquery- | + | for (var i=0;i<navLinks.length;i++) { |
+ | var href = navLinks[i].getAttribute('href') | ||
+ | if (DEBUG) console.log(href); | ||
+ | var indexOfPath = href.indexOf(currentPath); | ||
+ | if (DEBUG) console.log("indexofPath: " + indexOfPath); | ||
+ | if (indexOfPath === -1) continue; | ||
+ | if (indexOfPath > 2) continue; | ||
+ | if (indexOfPath >= href.length - currentPath.length - 1){ | ||
+ | // set active state | ||
+ | if (DEBUG) console.log('Setting active state for: ' + href); | ||
+ | var parent = navLinks[i].parentNode; | ||
+ | while (parent.tagName != 'NAV') { | ||
+ | // set active class for all ancestral list items | ||
+ | if (parent.tagName == 'LI') { | ||
+ | parent.setAttribute('class', 'active'); | ||
+ | } | ||
+ | parent = parent.parentNode; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | })(); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <script src="/Team:Freiburg/js/jquery-2.1.1.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="/Team:Freiburg/js/bootstrap.3.2.0.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="/Team:Freiburg/js/jquery.magnific-popup.min.js?action=raw&ctype=text/javascript"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | + | $(document).ready(function(){ | |
- | + | $('figure img').each(function(){ | |
- | + | var parent = this.parentNode; | |
- | $(' | + | if (parent.tagName != 'A') return; |
- | $(' | + | $(parent).magnificPopup({ |
- | } | + | type: 'image', |
+ | tLoading: 'Loading image #%curr%...', | ||
+ | mainClass: 'mfp-img-mobile', | ||
+ | gallery: { | ||
+ | enabled: true, | ||
+ | navigateByImgClick: true, | ||
+ | preload: [0,1] // Will preload 0 - before current, and 1 after the current image | ||
+ | }, | ||
+ | image: { | ||
+ | tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', | ||
+ | titleSrc: function(item) { | ||
+ | var caption = $(item.el).find('.caption-fullscreen').html(); | ||
+ | return caption?caption:''; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(window).load(function() { | ||
+ | |||
+ | |||
+ | $('.gallery').each(function(){ | ||
+ | $(this).magnificPopup({ | ||
+ | delegate: 'a', | ||
+ | type: 'image', | ||
+ | tLoading: 'Loading image #%curr%...', | ||
+ | mainClass: 'mfp-img-mobile', | ||
+ | gallery: { | ||
+ | enabled: true, | ||
+ | navigateByImgClick: true, | ||
+ | preload: [0,1] // Will preload 0 - before current, and 1 after the current image | ||
+ | }, | ||
+ | image: { | ||
+ | tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', | ||
+ | titleSrc: function(item) { | ||
+ | var caption = $(item.el).find('.caption-fullscreen').html(); | ||
+ | return caption?caption:''; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
- | + | $('.svg-container').each(function(){ | |
- | + | var $this = $(this); | |
- | + | if ($this.find('svg a').length === 0){ | |
- | + | $this.magnificPopup({ | |
- | + | items: { | |
- | + | src: $this.clone(), | |
- | + | type: 'inline' | |
- | + | } | |
- | + | }); | |
- | + | } | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | $('.partlink').each(function(){ | |
- | + | $(this).magnificPopup({ | |
- | return | + | type: 'iframe' |
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | $(window).load(function(){ | ||
+ | $('#content-nav').affix({ | ||
+ | offset: { | ||
+ | top: function () { | ||
+ | return (this.top = $('header nav').offset().top - 16) | ||
+ | } | ||
+ | , bottom: function () { | ||
+ | return (this.bottom = $('.footer').outerHeight(true)) | ||
} | } | ||
} | } | ||
}); | }); | ||
+ | $('#content-nav.affix').css('top', $('header nav').height() + 16 + 35); | ||
+ | |||
+ | $('header nav').affix({ | ||
+ | offset: { | ||
+ | top: function () { | ||
+ | return (this.top = $('header nav').offset().top - 16) | ||
+ | } | ||
+ | , bottom: function () { | ||
+ | return (this.bottom = $('.footer').outerHeight(true)) | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | var topDifference = 0; | ||
+ | $('header nav').on('affix.bs.affix', function(){ | ||
+ | var offsetTopContent = 0; | ||
+ | if ($('body').hasClass('mediawiki')){ | ||
+ | offsetTopContent = $('#bodyContent > .wrapper-outer').offset().top; | ||
+ | } else { | ||
+ | offsetTopContent = $('body > .wrapper-outer').offset().top; | ||
+ | } | ||
+ | var $nav = $('header nav'); | ||
+ | var $h = $('header'); | ||
+ | |||
+ | var navTop = $nav.offset().top; | ||
+ | var hTop = $h.offset().top; | ||
+ | var hHeight = $h.outerHeight(true); | ||
+ | var navHeight = $nav.outerHeight(true); | ||
+ | var rest = hHeight - (navTop - hTop) - navHeight; | ||
+ | topDifference = offsetTopContent - navTop - rest; | ||
+ | }); | ||
+ | |||
+ | $('header nav').on('affixed.bs.affix', function(){ | ||
+ | //pad the content so the affixed navbar stays visible | ||
+ | $('body:not(.mediawiki) > .wrapper-outer').css('padding-top', topDifference + 'px'); | ||
+ | $('#bodyContent > .wrapper-outer').css('padding-top', topDifference + 'px'); | ||
+ | $('#content-nav.affix').css('top', $('header nav').outerHeight(true) + 35); | ||
+ | }); | ||
+ | $('header nav').on('affixed-top.bs.affix', function(){ | ||
+ | // remove padding if the nav bar is unaffixed | ||
+ | $('body:not(.mediawiki) > .wrapper-outer').css('padding-top', 0); | ||
+ | $('#bodyContent > .wrapper-outer').css('padding-top', 0); | ||
+ | }); | ||
+ | |||
}); | }); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | // remove url in front of anchor links so scroll spy behaves correctly | ||
+ | var navLinks = $('#content-nav .nav a'); | ||
+ | |||
+ | // check all links' href attributes for equality with url | ||
+ | var currentPath = location.pathname; | ||
+ | for (var i=0;i<navLinks.length;i++) { | ||
+ | var href = navLinks[i].getAttribute('href') | ||
+ | var indexOfPath = href.indexOf(currentPath); | ||
+ | if (indexOfPath === -1) continue; | ||
+ | if (indexOfPath > 2) continue; | ||
+ | |||
+ | var indexOfSharp = href.indexOf('#'); | ||
+ | // check if the url part of the href ends with our location | ||
+ | var hreflength = href.length; | ||
+ | if (indexOfSharp !== -1) hreflength = indexOfSharp; | ||
+ | if (indexOfPath >= hreflength - currentPath.length - 1){ | ||
+ | if (indexOfSharp === -1) { | ||
+ | navLinks[i].setAttribute('href', '#'); | ||
+ | navLinks[i].setAttribute('class', 'active'); | ||
+ | } else { | ||
+ | navLinks[i].setAttribute('href', href.slice(indexOfSharp)); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | // initialize scrollspy | ||
$('body').scrollspy({ | $('body').scrollspy({ | ||
target: '#content-nav', | target: '#content-nav', | ||
Line 40: | Line 205: | ||
}); | }); | ||
- | $('#content-nav'). | + | // different click navigation for first link |
- | + | $('#content-nav .nav > li > a ').click(function(e){ | |
- | + | var $parent = $(this.parentNode); | |
- | + | var children = $parent.children('ul'); | |
- | + | // prevent redirect if we have children | |
- | + | if (children.length == 0) return; | |
- | + | e.preventDefault(); | |
- | + | ||
- | + | // open up the nav otherwise | |
+ | $parent.toggleClass('active'); | ||
}); | }); | ||
+ | </script> | ||
- | + | <script src="/Team:Freiburg/js/jquery.qtip.min.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script> | |
- | + | $('.ttip').each(function(){ | |
- | + | var $this = $(this); | |
+ | $(this).qtip({ | ||
+ | content: { | ||
+ | text: $($this.data('content')).html(), | ||
+ | title: $this.data('title'), | ||
+ | }, | ||
+ | style: { classes: 'qtip-dark' }, | ||
+ | hide: { | ||
+ | fixed: true, | ||
+ | delay: 350, | ||
+ | effect: function() { | ||
+ | $(this).fadeTo(100, 0); | ||
} | } | ||
- | , | + | }, |
- | + | show: { | |
+ | effect: function() { | ||
+ | $(this).fadeTo(100, 1); | ||
} | } | ||
} | } | ||
}); | }); | ||
- | + | }) | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | }) | + | |
</script> | </script> | ||
+ | <script src="/Team:Freiburg/js/three.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="/Team:Freiburg/js/startIcosahedron.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script>startIcosahedron();</script> | ||
</html> | </html> |
Latest revision as of 22:56, 17 October 2014