Team:Freiburg/Templates/html/js.html
From 2014.igem.org
(Difference between revisions)
(38 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({ | ||
+ | type: 'iframe' | ||
+ | }); | ||
+ | }); | ||
+ | |||
}); | }); | ||
- | $('#content-nav').affix({ | + | $(window).load(function(){ |
+ | $('#content-nav').affix({ | ||
offset: { | offset: { | ||
top: function () { | top: function () { | ||
- | return (this.top = $(' | + | return (this.top = $('header nav').offset().top - 16) |
} | } | ||
, bottom: function () { | , bottom: function () { | ||
Line 50: | Line 127: | ||
} | } | ||
}); | }); | ||
+ | $('#content-nav.affix').css('top', $('header nav').height() + 16 + 35); | ||
$('header nav').affix({ | $('header nav').affix({ | ||
offset: { | offset: { | ||
top: function () { | top: function () { | ||
- | return (this.top = $('header | + | return (this.top = $('header nav').offset().top - 16) |
} | } | ||
, bottom: function () { | , bottom: function () { | ||
Line 61: | Line 139: | ||
} | } | ||
}); | }); | ||
- | + | var topDifference = 0; | |
- | //pad the content so the affixed navbar stays visible | + | $('header nav').on('affix.bs.affix', function(){ |
- | $('body > .wrapper-outer'). | + | 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({ | ||
+ | target: '#content-nav', | ||
+ | offset: $(window).height()/4 | ||
}); | }); | ||
- | $('. | + | // different click navigation for first link |
- | + | $('#content-nav .nav > li > a ').click(function(e){ | |
- | + | var $parent = $(this.parentNode); | |
- | active | + | 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