Team:Freiburg/Templates/html/js.html
From 2014.igem.org
(Difference between revisions)
Line 6: | Line 6: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | + | $(window).load(function() { | |
// remove unnecessary css | // remove unnecessary css | ||
if ($('body').hasClass('mediawiki')){ | if ($('body').hasClass('mediawiki')){ | ||
Line 12: | Line 12: | ||
$('head style[type="text/css"]').remove(); | $('head style[type="text/css"]').remove(); | ||
} | } | ||
- | + | ||
- | + | ||
- | + | $('.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:''; | ||
+ | } | ||
} | } | ||
- | } | + | }); |
+ | }); | ||
+ | |||
+ | $('body').scrollspy({ | ||
+ | target: '#content-nav', | ||
+ | offset: $(window).height()/4 | ||
+ | }); | ||
+ | |||
+ | $('.accordion').accordion({ | ||
+ | heightStyle: "content", | ||
+ | collapsible: true, | ||
+ | active: null | ||
}); | }); | ||
- | |||
- | |||
- | |||
- | |||
}); | }); | ||
- | $('#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 49: | Line 59: | ||
} | } | ||
}); | }); | ||
+ | $('#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 nav').offset().top - | + | return (this.top = $('header nav').offset().top - 16) |
} | } | ||
, bottom: function () { | , bottom: function () { | ||
Line 60: | Line 71: | ||
} | } | ||
}); | }); | ||
- | + | 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 | //pad the content so the affixed navbar stays visible | ||
- | $('body:not(.mediawiki) > .wrapper-outer'). | + | $('body:not(.mediawiki) > .wrapper-outer').css('padding-top', topDifference + 'px'); |
- | $('#bodyContent'). | + | $('#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(){ | $('header nav').on('affixed-top.bs.affix', function(){ | ||
// remove padding if the nav bar is unaffixed | // remove padding if the nav bar is unaffixed | ||
- | $('body:not(.mediawiki) > .wrapper-outer'). | + | $('body:not(.mediawiki) > .wrapper-outer').css('padding-top', 0); |
- | $('#bodyContent'). | + | $('#bodyContent > .wrapper-outer').css('padding-top', 0); |
}); | }); | ||
- | |||
- | |||
- | |||
- | |||
}); | }); | ||
- | |||
- | |||
</script> | </script> | ||
</html> | </html> |
Revision as of 09:33, 17 September 2014