css - Looking for a more efficient way to write this Javascript -

css - Looking for a more efficient way to write this Javascript -

is there improve way me write togglefullscreen(). i'm repeating style rules on every browser seems unnecessary.

function togglefullscreen() { var elem = document.getelementbyid("video_container"); var db = document.getelementbyid("defaultbar"); var ctrl = document.getelementbyid("controls"); if (!document.fullscreenelement && // alternative standard method !document.mozfullscreenelement && !document.webkitfullscreenelement) { // current working methods if (document.documentelement.requestfullscreen) { db.style.background ='red'; ctrl.style.width = '50%'; ctrl.style.left = '25%'; elem.requestfullscreen(); } else if (document.documentelement.mozrequestfullscreen) { db.style.background ='red'; ctrl.style.width = '50%'; ctrl.style.left = '25%'; elem.mozrequestfullscreen(); } else if (document.documentelement.webkitrequestfullscreen) { db.style.background ='red'; ctrl.style.width = '50%'; ctrl.style.left = '25%'; elem.webkitrequestfullscreen(); } } else if (document.exitfullscreen) { db.style.background ='yellow'; ctrl.style.width = '100%'; ctrl.style.left = '0'; document.exitfullscreen(); } else if (document.mozcancelfullscreen) { db.style.background ='yellow'; ctrl.style.width = '100%'; ctrl.style.left = '0'; document.mozcancelfullscreen(); } else if (document.webkitcancelfullscreen) { db.style.background ='yellow'; ctrl.style.width = '100%'; ctrl.style.left = '0'; document.webkitcancelfullscreen(); } }

the out of fullscreen style rules beingness applied page loads.

that's because of code:

full.addeventlistener('click', togglefullscreen(), false);

if executes togglefullscreen() , passes homecoming value addeventlistener instead. code should read:

full.addeventlistener('click', togglefullscreen, false);

this code passes reference function instead of homecoming value.

refactoring

by using || operator can simplify existing conditions.

var fullscreenelement = document.fullscreenelement || document.mozfullscreenelement || document.webkitfullscreenelement; if (fullscreenelement) { var requestfullscreen = document.documentelement.requestfullscreen || document.documentelement.mozrequestfullscreen || document.documentelement.webkitrequestfullscreen db.style.background ='red'; ctrl.style.width = '50%'; ctrl.style.left = '25%'; requestfullscreen.call(elem); } else { var exitfullscreen = document.exitfullscreen || document.mozcancelfullscreen || document.webkitcancelfullscreen; db.style.background ='yellow'; ctrl.style.width = '100%'; ctrl.style.left = '0'; exitfullscreen.call(document); }

javascript css html5 javascript-events eventlistener