F11 style full screen from button with JavaScript

Hello Heroes!

The only credit I can take for this is the time researching other peoples code, copy & pasting, testing, suffering, testing more, more suffering, more research and walla! 

I don't know how or why it works, but I do know that changing "var elem = document.body;" to "var elem = document.documentElement;" stretched the animation and removed the black background.

I hope it helps!!!

This is a combination of the above, work done here and StackOverflow:

function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
head.appendChild(scriptEl);}

//only want to add these once!
if(document.getElementById('jquery')==null){
add_script("https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js","jquery");
}
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}

var elem = document.documentElement; // Make the body go full screen.
requestFullScreen(elem);