Full Screen Bootstrap Section Animation

Full Screen Bootstrap Section Animation

Animating a section to full screen in with jquery: 

A few notes: 
- This was made in 5 minutes; it can be a little sloppy. 
- You need to import JQuery in your page. 
- It'll probably work with non bootstrap sites too, I haven't had time to test it. 
- You need to bind the goFullScreen() function to some kind of action. 
- This Gist is far from finished. Things I hope to add in the future include: 
  - Leave full screen 
  - Instead of moving the navbar, or some other element up. Diynamically select everything prior to the current sectino 
  - Test it 

scripts.js

    var goFullScreen = function() {
        //select everything, in my case the navbar that's above the section and move it upwards. 
        $('.navbar').animate({marginTop: "-50px"}, 1000);
        
        //make sure you can't scroll. If you want scrolling enabled. Skip this step. 
        $('body').addClass('noscroll');
        
        //calculate height of the seciton 
        var windowHeight    = (getBrowserSize()[1]);
        var backgroundHeight = windowHeight + 50; 
        
        //animate the section to that height
        $('#section-full-screen').animate({height: videoBackgroundHeight }, 1000);
    }
    
    
//get browser size 
function getBrowserSize() {
    var theWidth, theHeight;
    // Window dimensions:
    if (window.innerWidth) {
    theWidth=window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    theWidth=document.documentElement.clientWidth;
    }
    else if (document.body) {
    theWidth=document.body.clientWidth;
    }
    if (window.innerHeight) {
    theHeight=window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
    theHeight=document.documentElement.clientHeight;
    }
    else if (document.body) {
    theHeight=document.body.clientHeight;
    }

    return [theWidth,theHeight];
}

style.css

body.noscroll {
    position: fixed; 
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
}