File: D:/HostingSpaces/SBogers57/topsluchtfilters.nl/wwwroot/public/js/tops_home.js
/**
* Define objects
*/
var $cta = $('#cta');
var $slider = $('#slider');
/**
* Call Functions
*/
prepare();
buildHome();
$slider.slider(
{
nav: '#slider_nav',
loop : 3000,
speed : 750
}
);
$window.resize(onResize);
$window.scroll(onWindowScroll);
/*
* Check for bottom page
*/
var st = $window.scrollTop();
var bottomPage = $main.height() - ($window.height() - $header.height() - $cta.height() - showFooter);
isAtBottom = (st > bottomPage-100); // 100px marge
var ctaSwitchHeight = 1035;
var ctaToggle;
if($window.height() > ctaSwitchHeight){ ctaToggle = 1; } else{ ctaToggle = 0; }
var altViewToggle;
if($window.width() > 1000){ altViewToggle = 1; } else{ altViewToggle = 0; }
/**
* define Functions
*/
/*
* Prepare
*/
function prepare()
{
// Set mains "auto-height" in the data attribute
$main.attr('data-height',$main.height());
}
/*
* What to do on resize
*/
function onResize()
{
// Reset main.height()
if((altViewToggle == 0 && $window.width() > 1000) || (altViewToggle == 1 && $window.width() <= 1000))
{
$main.height('auto');
$main.attr('data-height',$main.height());
if($window.height() > 1000){ altViewToggle = 1; } else{ altViewToggle = 0; }
buildHome();
}
buildHome();
$('#slider').data('slider').adjust();
}
/*
* What to do on scroll
*/
function onWindowScroll()
{
// Reset main.height()
if((ctaToggle == 0 && $window.height() > ctaSwitchHeight) || (ctaToggle == 1 && $window.height() <= ctaSwitchHeight))
{
$main.height('auto');
$main.attr('data-height',$main.height());
if($window.height() > ctaSwitchHeight){ ctaToggle = 1; } else{ ctaToggle = 0; }
buildHome();
}
// Resize page
if ( ! isTouch && ! smallView() )
{
// Scroll main on scroller
var st = $window.scrollTop();
var sl = $window.scrollLeft();
$main.css({ top: -st+'px', left: -sl+'px' });
var ctaH = $cta.height();
if( altView() || $window.height() <= ctaSwitchHeight) ctaH = 0;
// When page reaches the bottom
var bottomPage = $main.height() - ($window.height() - $header.height() - ctaH - showFooter);
isAtBottom = (st > bottomPage); // 100px marge
if ( ! footerClicked)
{
if(isAtBottom)
{
// Change height of the footer
difFooter = st - bottomPage;
$footer.height(difFooter + showFooter);
// Footer button
$footerBtn.css({ bottom: (difFooter + showFooter - 11) + 'px' });
// Lift the ambiance photo and pattern
if( ! altView() && $window.height() > ctaSwitchHeight){
$cta.css({ bottom: $footer.height() + 'px'});
}
else
{
$cta.css({ bottom: 0 });
}
}
else
{
// Reset changes
difFooter = 0;
$footer.height(showFooter);
if( ! altView() && $window.height() > ctaSwitchHeight)
{
$cta.css({ bottom: showFooter });
}
else
{
$cta.css({ bottom: 0 });
}
$footerBtn.css({ bottom: '19px' });
}
}
}
}
/*
* Build template relatively to the browser window
*/
function buildHome()
{
var ctaH = $cta.height();
if( altView() || smallView() || ($window.height() <= 1035) )
{
ctaH = 0;
}
if ( ! isTouch && ! smallView() )
{
// Make sure main == 100%
var minH = $window.height() - $header.height() - ctaH - showFooter;
if($main.attr('data-height') < minH) $main.height(minH)
// Make scroller as high as main
var scrH = $main.height() + $footer.children('.inner').height() + ctaH + $header.height();
$scroller.height(scrH);
// Resize Mask
var wrH = $window.height() - $header.height() - ctaH - showFooter; // show 30px from footer
$wrapper.height(wrH);
}
else
{
var minH = $window.height() - $header.height() - ctaH - $footer.height();
if($main.attr('data-height') < minH)
{
$main.height(minH)
$scroller.height(minH)
$wrapper.height(minH)
}
else
{
reset();
}
}
if($window.width() > 1000)
{
if($window.height() <= 1035)
{
$slider.height($main.height()-$cta.height());
}
else
{
$slider.height('100%');
}
}
else
{
$slider.height('');
}
}
function reset()
{
// Reset values
$main.height('auto');
$cta.css('bottom',0);
$main.css({top: 0});
$scroller.height('auto');
$wrapper.height('auto');
}