javascript - Jquery doesn't change div's width on smaller screen after auto adjusting on regular screen -
javascript - Jquery doesn't change div's width on smaller screen after auto adjusting on regular screen -
got script auto adjusts width of children divs depending on number of children. , on smaller screen need them 100% wide. i've tried inserting script right script adjusts width on regular screen. doesn't work. tried inserting in bottom of page. didn't work too.
here code
$(".basecollections").each(function(){ var child_width = 100 / $(this).children().length; child_width = math.floor(child_width); $(this).children().css("width", child_width + "%"); if ( screen.width < 1000 ) { $(this).children().css('width','100%'); } })
http://jsfiddle.net/3x466nb1/
instead of screen.width
need utilize $(window).width()
: demo
$(".basecollections").each(function(){ var child_width = 100 / $(this).children().length; child_width = math.floor(child_width); $(this).children().css("width", child_width + "%"); if ( $(window).width() < 1000 ) { $(this).children().css('width','100%'); } });
also if want alter dynamic, need write piece of code within resize event of window element:
$(window).resize(function(){ $(".basecollections").each(function(){ var child_width = 100 / $(this).children().length; child_width = math.floor(child_width); $(this).children().css("width", child_width + "%"); if ( $(window).width() < 1000 ) { $(this).children().css('width','100%'); } }); });
javascript jquery css
Comments
Post a Comment