Use jquery to get a dynamic style value -

i playing idea of custom responsive slider , having difficulty getting slider container adjust on "resize". on intial load values correct when alert sliderwid on resize nan... why work on load not on resize? code same... thx

var winwid = $(window).width();     $('.panel').width(winwid); var panelwid = $('.panel').css('width'); var panels = $('.panel').length; var sliderwid = parseint(panels) * parseint(panelwid)     $('.slider').width(sliderwid);  $(window).on('resize', function(){     var winwid = $(window).width();     var panelwid = $('.panel').width(winwid);      var panels = $('.panel').length;     var sliderwid = parseint(panels) * parseint(panelwid)      //alert(sliderwid);     //$('.slider').width(sliderwid);  }); 

your problem on resize setting panelwid width value, returns jquery object. on load getting panel width returns integer.

var panelwid = $('.panel').width(winwid); // returns jquery obj var sliderwid = parseint(panels) * parseint(panelwid); // not number here 

you can see true alerting (or better console.log) panelwid

alert($('.panel').width(winwid)); // outputs [object object] console.log($('.panel').width(winwid)); // outputs array dom element 

the reason can chain jquery methods if unfamiliar chaining check out: quick guide: chaining in jquery

the fix:

$(window).on('resize', function(){     var winwid = $(window).width();     var $panel = $('.panel');  // cache selector         $panel.width(winwid); // set width in onload     var panelwid = $panel.width(); // return width - use jquery without units     // shortened panelwid = $panel.width(winwid).width();      var panels = $panel.length;     var sliderwid = parseint(panels) * parseint(panelwid);      $('.slider').width(sliderwid); }); 

at least think that's you're trying do.