javascript - CSS through jQuery not applied -

i in process make slideshow responsive. using simple jquery achieve this. logic is:

if width of window < 620, make changes in css through jquery.
else
set default(fixed) css

i have element has top:470px fixed css when window of normal size. if size of window goes below 620, i've changed relative image size (which changes on window resize). here code:

function resizevideo() {   var width = $(window).width();   if(width < 620) {     $('#controls').css('top', $('img').height());   }   else {     $('#controls').css('top', '470');   } } $(window).resize(resizevideo); 

in way, controls stick bottom of image when size less 620. of problems stopping me right are:

1. whenever i'm maximizing window size less 620, images scale original sizes, #controls element remains @ same height before maximizing.

2. when resize window size greater 620, #controls stay somewhere around 345px when in actual, height of image greater.

3. whenever image in slideshow changes , resize window @ time, #controls goes @ top of everything, i.e. doesn't apply top: property @ all.

i have asked these queries in on single question because of them #controls element , believe fixing 1 automatically fix others. pointers highly appreciated!

think have wrap closure function inside .resize() e.g. $(window).resize(function(){ resizevideo(); });.

also because function resizevideo not reference have call ()

for jquery .css() function they've made css hooks can use without strings apply css be: $('#controls').css({top: 470 + "px"});