From c97cc1487cbcac2c4fbc4d9e931a82df109af2e6 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Wed, 2 Mar 2016 12:31:25 +0100 Subject: a simple cover-photo implementation for redbasic default template --- view/theme/redbasic/js/redbasic.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) (limited to 'view/theme/redbasic/js') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 38dc4d209..7c5df0834 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -2,6 +2,17 @@ * redbasic theme specific JavaScript */ $(document).ready(function() { + + //Simple cover-photo implementation + if($('#cover-photo').length && $(window).width() > 767) { + $('.navbar-fixed-top').css('position', 'relative'); + $('main').css('padding-top', 0 + 'px'); + } + else { + $('#cover-photo').remove(); + + } + // CSS3 calc() fallback (for unsupported browsers) $('body').append(''); if( $('#css3-calc').width() == 10) { @@ -38,9 +49,7 @@ $(document).ready(function() { $("input[data-role=cat-tagsinput]").tagsinput({ tagClass: 'label label-primary' }); -}); -$(document).ready(function(){ var doctitle = document.title; function checkNotify() { var notifyUpdateElem = document.getElementById('notify-update'); @@ -53,3 +62,13 @@ $(document).ready(function(){ } setInterval(function () {checkNotify();}, 10 * 1000); }); + +//Simple cover-photo implementation +$(window).scroll(function () { + if($('#cover-photo').length && $(window).width() > 767 && $(window).scrollTop() >= $('#cover-photo').height()) { + $('main').css('padding-top', 71 + 'px'); + $(window).scrollTop($(window).scrollTop() - $('#cover-photo').height()) + $('.navbar-fixed-top').css('position', 'fixed'); + $('#cover-photo').remove(); + } +}); -- cgit v1.2.3 From c5d08fd5fdcd504dac010d62c434d16a92879852 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Wed, 2 Mar 2016 13:33:18 +0100 Subject: add a fade in effect to main while scrolling up cover photo --- view/theme/redbasic/js/redbasic.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'view/theme/redbasic/js') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 7c5df0834..809776220 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -7,6 +7,7 @@ $(document).ready(function() { if($('#cover-photo').length && $(window).width() > 767) { $('.navbar-fixed-top').css('position', 'relative'); $('main').css('padding-top', 0 + 'px'); + $('main').css('opacity', 0); } else { $('#cover-photo').remove(); @@ -71,4 +72,8 @@ $(window).scroll(function () { $('.navbar-fixed-top').css('position', 'fixed'); $('#cover-photo').remove(); } + + if($('#cover-photo').length) { + $('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1)); + } }); -- cgit v1.2.3 From d3f2d2a2dbba70403d197221500aeae80d541557 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Wed, 2 Mar 2016 14:30:33 +0100 Subject: small fix to simple cover-photo --- view/theme/redbasic/js/redbasic.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'view/theme/redbasic/js') diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js index 809776220..d3f9c5f70 100644 --- a/view/theme/redbasic/js/redbasic.js +++ b/view/theme/redbasic/js/redbasic.js @@ -6,12 +6,11 @@ $(document).ready(function() { //Simple cover-photo implementation if($('#cover-photo').length && $(window).width() > 767) { $('.navbar-fixed-top').css('position', 'relative'); - $('main').css('padding-top', 0 + 'px'); + $('aside, section').css('padding-top', 0 + 'px'); $('main').css('opacity', 0); } else { $('#cover-photo').remove(); - } // CSS3 calc() fallback (for unsupported browsers) @@ -67,7 +66,7 @@ $(document).ready(function() { //Simple cover-photo implementation $(window).scroll(function () { if($('#cover-photo').length && $(window).width() > 767 && $(window).scrollTop() >= $('#cover-photo').height()) { - $('main').css('padding-top', 71 + 'px'); + $('aside, section').css('padding-top', 71 + 'px'); $(window).scrollTop($(window).scrollTop() - $('#cover-photo').height()) $('.navbar-fixed-top').css('position', 'fixed'); $('#cover-photo').remove(); -- cgit v1.2.3