Strange responsive layout, height + JS problem

Question

Hi. I'm following a Lynda.com tutorial. My live site is: http://liveactionliving.com/myWebsite/ Codepen: http://codepen.io/pandathorax/pen/domyEy

There an JS coded h1 tag under the header displaying browser width, body width, e.g. "520 (487+33)..." The 487 in this example is the important number to watch (body width). The 33 is related to scroll bar, etc width.

My issue seems to be related to the browser and/ or header height because when the window is tall enough.

The 3 layout sizes are: 801px+ is large, 501-800px is medium, 50-500px is small, and at this point, the nav menu is supposed to disappear and be replaced by a drop-down mobile nav menu.

The weird thing is that from 484px-500px the mobile_menu anchor disappears.

I hope this isn't too confusing. Thanks.

/* JavaScript Document */

var windowSize = '';
var windowWidth = 0;
var actualSize = 0;

$(document).ready(function () {

    checkBrowserSize();
    setInterval('checkBrowserSize()', 100);

}); 

function checkBrowserSize() {
    windowWidth = window.outerWidth;
    var contentWidth = $('body').width();
    var sizeDiff = windowWidth - contentWidth;
    actualSize = windowWidth - sizeDiff;

    if (actualSize > 800) { newWindowSize = 'large'; }
    if (actualSize <= 800 && actualSize > 500) {newWindowSize = 'medium'; }
    if (actualSize <= 500){ newWindowSize = 'small'; }
    $('h1').html(windowWidth +' ('+contentWidth+'+'+sizeDiff+')'+' is '+newWindowSize);

    if(windowSize != newWindowSize) {
        windowSize = newWindowSize;
        loadHero();
        }else{
            $('h1').append(' -- no change');
        }

}

function loadHero() {
    if (windowSize == 'large') {
        $('nav').css('height', 'auto');

        $('#hero').load('content/hero_content_large.html');
    }
    if (windowSize == 'medium') {
        if( actualSize > 500 ) {
            $('nav').css('height', 'auto');
        }
        $('#hero').load('content/hero_content_medium.html');
    }
    if (windowSize == 'small') {
        if( actualSize <= 500 ) {
            $('nav').css('height', '0px');
        }
    }           
        $('#hero').html('');


}```

Welcome to the Treehouse Community

Looking to learn something new?

Adam White

Adam White

Strange responsive layout, height + JS problem