Question

I have a pretty basic function:

 function bx_thumbs() {
    pager_count = jQuery('.bx-pager').children().size();
    total_width = jQuery('.bx-pager').width();
    item_width_margin = pager_count*16;
    page_width = total_width-item_width_margin;
    item_width = page_width/pager_count;

    jQuery('.bx-pager a img').each(function(){
        jQuery(this).css('width',item_width+'px')
        console.log('hi' + total_width);        
    });  
}

jQuery(document).ready(function() {
  bx_thumbs();
});
jQuery(window).resize(function() {
  bx_thumbs();
 });

The goal of this is to set the images to a width that keeps things all on one row.

this works just fine on load. but on resize while I get the console log, the images loose their width setting.

You can see this in action at http://simpleandcrisp.com/pairings

I have css max-width set in my css so that it doesn’t blow up the page if js is deactivated… Just can’t figure out why it doesnt work on resize.

thanks in advance

Answer 1

Noted by SegioCruz above:

Try this: jQuery(document).ready(function() { jQuery(window).resize(function() { bx_thumbs(); }).trigger(‘resize’);// triggers initial resize });