javascript - optimizing div + screen resize JS block -

i'm struggling figure out best way optimize code. i'm using width @media tags, , js seems reliable way can control series of specific variables adjust div element.

it's mess realize, wanted feedback see if there glaring issues. still learning, go easy on me.

thanks.

jquery(document).ready(function($){     var elementheight = $('.hs-caption').height();     var screenheight = jquery(window).height();     var upcomingheader = $('.fold-header').height() * 2.0;     if (screenheight > 960) {     var heightoffset = 220;              } else {     var heightoffset = 200;      }      var totalheight = elementheight + heightoffset;  function fullscreen(){     jquery('#hero').css({         width: jquery(window).width(),         height: jquery(window).height()     }); }   function settocenterofparent(element, parent, ignorewidth, ignoreheight){     parentwidth = $(parent).width();     parentheight = $(parent).height();       elementwidth = $(element).width();     elementheight = $(element).height();     if(!ignorewidth)         $(element).css('left', parentwidth/2 - elementwidth/2);     if(!ignoreheight)         $(element).css('top', heightoffset); }     function scalar(){   if (window.innerheight < (totalheight * 1.25) + upcomingheader) {         console.log("screenheight less elementheight");                $('.hs-info p').css({             display: 'none'         }),         $('.hs-info .btn-slide').css({             padding: '10px 0px 0px 0px'         }),         $('.hs-sponsor').css({             display: 'none'         })     } else {         console.log("screenheight not less elementheight");                $('.hs-info .btn-slide').css({             padding: '0px'         }),         $('.hs-sponsor').css({             display: 'block'         }),         $(".hs-info p").css({             display: 'block'         })     } }  settocenterofparent( $('.hs-caption'), document.body, true, false); fullscreen(); scalar();  jquery(window).resize(function() {     scalar();     settocenterofparent( $('.hs-caption'), document.body, true, false);     fullscreen();          });  console.log("height:", elementheight); console.log("total height:", elementheight + heightoffset);  console.log("screenheight:", screenheight);  console.log("heightoffset:", heightoffset);  console.log("upcomingheader:", upcomingheader);      }); 

as target not clear, can small code editing make more easy read, , maybe little performance improvement.

jquery(document).ready(function($) {   // define share variables.   var element = $('.hs-caption');   var elementwidth, elementheight;   var screenwidth, screenheigth;   var upcomingheader = $('.fold-header').height() * 2.0;   var heightoffset;   var totalheight;   var height_ratio = 1.25;   var paddingelements = $('.hs-info .btn-slide');   var displayelements = $('.hs-info p, .hs-sponsor');   var resize_deley = 200;   var delayedhandler = null;    function onresize() {     updatesetting();     settocenterofparent(element, $(document.body), true, false);     fullscreen();     scalar();   };    function scalar() {     var innerheight = window.innerheight;     var totalelementheight = totalheight * height_ratio + upcomingheader;     var isscreensmaller = (innerheight < totalelementheight);     var padding = isscreensmaller ? '10px 0px 0px 0px' : '0px';     var display = isscreensmaller ? 'none' : 'block';     paddingelements.css('padding', padding);     displayelements.css('display', display);   }    function updatesetting(){     screenwidth = $(window).width();     screenwidth = $(window).height();     elementwidth = element.width();     elementheight = element.height();     heightoffset = (screenheight > 960) ? 220 : 200;     totalheight = elementheight + heightoffset;   }    function fullscreen() {     $('#hero').css({       width: screenwidth,       height: screenheigth     });   }    function settocenterofparent(element, parent, ignorewidth, ignoreheight) {     var parentwidth = parent.width();     var parentheight = parent.width();     if (!ignorewidth) {       element.css('left', parentwidth/2 - elementwidth/2);     }     if (!ignoreheight) {       element.css('top', heightoffset);     }   }    // init   onresize();    $(window).resize(function() {     // don't     if (delayedhandler !== null) {       cleartimeout(delayedhandler);     }     // delayed function executed, updates when user stop     // resizing fixed amount of time.     delayedhandler = settimeout(onresize, resize_deley);   });    console.log("height:", elementheight);   console.log("total height:", elementheight + heightoffset);   console.log("screenheight:", screenheight);   console.log("heightoffset:", heightoffset);   console.log("upcomingheader:", upcomingheader); }); 

the idea is:

1. pull out of elements queried again , again, $('.hs-info .btn-slide') , $('.hs-info p, .hs-sponsor'), $('.hs-caption') seems used, pull out.
2. do samething variables, here i'm not sure if use settocenterofparent other elements, i'll try input jquery wrapped element, can directly use jquery on them in function.
3. elementwidth/elementheight here not clear whether it'll change or not, remain code not edited.
4. add settimeout resize, jquery won't lots of computation during user resizing window, , 0.2 sec's delay should fast enough user won't feel delay(or can adjust resize_deley smaller number).
5. unless you're using library conflict jquery, keep code style same preferable, change jquery(foo).bar $(foo).bar consistency.

i believe should can do, if there's no example jsfiddle, demonstrate code for.