harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

do not remove cover photo after scrolling it up. mimik an scroll edge if scrolling up again before scrolling into the cover photo again.

Browse Source
This commit is contained in:
Mario Vavti 2016-08-24 22:40:15 +02:00
parent aa0384bcec
commit 798b80e486
1 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
view/tpl/cover_photo_widget.tpl
View File

@ -5,36 +5,54 @@
$(document).ready(function() {
$('body').on('click',slideUpCover);
aside_padding_top = parseInt($('aside').css('padding-top'));
section_padding_top = parseInt($('section').css('padding-top'));
$(document).on('click', slideUpCover);
if($('#cover-photo').length && $(window).width() > 755) {
$('.navbar-fixed-top').css('position', 'relative');
if($(window).scrollTop() <= $('#cover-photo').height()) {
$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
$('aside').css('padding-top', aside_padding_top - $('nav').outerHeight() + 'px');
$('section').css('padding-top', section_padding_top - $('nav').outerHeight() + 'px');
$('main').css('opacity', 0.5);
$('.navbar-fixed-top').css('position', 'relative');
$('main').css('opacity', 0);
$('header').hide();
}
}
else {
$('#cover-photo').remove();
coverSlid = true;
}
});
$(window).scroll(function () {
if((! coverSlid) && $('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
$('header').fadeIn();
$('main').css('opacity', 1);
$('aside').css('padding-top', aside_padding_top + 'px');
$('section').css('padding-top', section_padding_top + 'px');
$('#cover-photo').css('padding-top', $('nav').outerHeight());
$(window).scrollTop($(window).scrollTop() - $('#cover-photo').height())
$('.navbar-fixed-top').css({ 'position' : 'fixed', 'top' : 0});
$('.navbar-fixed-top').css('position', '');
$('main').css('margin-top', '');
coverSlid = true;
}
else if ($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() <= $('#cover-photo').height()){
if(coverSlid) {
$(window).scrollTop(Math.ceil($('#cover-photo').height()));
setTimeout(function(){ coverSlid = false; }, 1000);
}
else {
if($(window).scrollTop() <= $('#cover-photo').height()) {
$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
$('aside').css('padding-top', aside_padding_top - $('nav').outerHeight() + 'px');
$('section').css('padding-top', section_padding_top - $('nav').outerHeight() + 'px');
$('.navbar-fixed-top').css('position', 'relative');
$('main').css('opacity', 0);
$('header').hide();
}
}
}
if($('#cover-photo').length) {
$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
}
@ -42,29 +60,26 @@
$(window).resize(function () {
if($('#cover-photo').length && $(window).width() < 755) {
$('main').css('opacity', 1);
$('aside').css('padding-top', aside_padding_top + $('nav').outerHeight() + 20 + 'px');
$('section').css('padding-top', section_padding_top + $('nav').outerHeight() + 20 + 'px');
$('.navbar-fixed-top').css({ 'position' : 'fixed', 'top' : 0 });
$('#cover-photo').remove();
$('main').css('opacity', 1);
$('aside').css('padding-top', aside_padding_top + 'px');
$('section').css('padding-top', section_padding_top + 'px');
$('.navbar-fixed-top').css('position', '');
coverSlid = true;
}
});
function slideUpCover() {
if(coverSlid)
if(coverSlid) {
return;
}
$('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' });
$('#cover-photo').css({ 'position' : 'relative' , 'top' : $('nav').outerHeight() });
$('.navbar-fixed-top').css({ 'position' : 'fixed', 'top' : 0});
$('aside').css('padding-top', aside_padding_top + 'px');
$('section').css('padding-top', section_padding_top + 'px');
$('main').css('margin-top', '');
coverSlid = true;
return false;
}
</script>
<div id="cover-photo" title="{{$hovertitle}}">
<div id="cover-photo" onclick="slideUpCover();" title="{{$hovertitle}}">
{{$photo_html}}
<div id="cover-photo-caption">
<div class="cover-photo-title">