HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers10/keystud.komma-mediadesign.nl/wwwroot/public/js/responsive_home.js
// Elements
var $content = $('#content');
var $header = $('#header');
var $footer = $('#footer');

var $a = $('.a');
var $b = $('.b');
var $cta = $('.cta');

checkViews(); // first resize
setTimeout(checkViews,500); // fallback for if fonts load slowly
$(window).resize(checkViews);

function checkViews()
{
    // Size variables
    var wSize = { w : window.innerWidth || document.documentElement.clientWidth, h : window.innerHeight || document.documentElement.clientHeight };
    var view = parseInt($('#view').width());
console.log('view: ' + view);
    switch(view)
    {
        // View 1
        case 1:
            // Set content height equal to the browsers height minus the height of the header
            var fullHeight = wSize.h - $header.height() - $footer.outerHeight();
            $content.height(fullHeight);
            $a.height(fullHeight);
            $b.height(fullHeight);

            resizeBlocks();

            // Home Call To Action
            var $article =  $('.article');
            var y = $article.offset().top + $article.outerHeight();
            if($cta.offset().top < y)
            {
                $cta.css({ position : 'relative'})
            }
            else if($cta.offset().top + $cta.outerHeight() < wSize.h - $footer.outerHeight())
            {
                $cta.css({ position : 'absolute'})
            }
            break;

        // View 2
        case 2:
            $content.height('auto');

            // Homepage
            $a.height('auto');
            var aH = Math.round($a.outerHeight());
            $b.height(aH);

            resizeBlocks();
            $cta.css({ position : 'relative'});
            break;

        // View 3
        case 3:
            $content.height('auto');
            $a.height('auto');
            $b.height('auto');

            resetBlocks();
            $cta.css({ position : 'relative'});
    }
    // Always
    resizeImages();
}

/* Let all responsive blocks center in their containers */
function resizeBlocks()
{
    $('div.respH').each(function()
    {
        var h = $(this).height();
        $(this).css({ marginTop : h / -2 +'px' })
    });
}
function resetBlocks()
{
    $('div.respH').css({ marginTop : 0 });
}