Team:Freiburg/Templates/html/js.html
From 2014.igem.org
(Difference between revisions)
(33 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | < | + | <button class="invertbutton" onclick="invertColors();">Inv.</button> |
- | <script src="/Team:Freiburg/js/ | + | <script> |
- | <script src="/Team:Freiburg/js/ | + | function invertColors() { |
- | <script src="/Team:Freiburg/js/jquery- | + | 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 | ||
+ | var currentPath = location.pathname; | ||
+ | if (DEBUG) console.log("Current Path: " + currentPath); | ||
+ | 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() { | $(window).load(function() { | ||
- | |||
- | |||
- | |||
- | |||
- | |||
Line 35: | Line 93: | ||
}); | }); | ||
- | $(' | + | |
- | + | ||
- | + | $('.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' | |
+ | }); | ||
}); | }); | ||
Line 105: | Line 173: | ||
</script> | </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); | ||
+ | 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 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