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 alert
ing (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.
Comments
Post a Comment