Question

I have written some JS and CSS that allows certain columns to be flexible and when the browser is resized (or by default) making a column thinner than it’s original width then I remove the flexible ability. This works fine in this example: http://dev.driz.co.uk/FlexGrid.html as you will see as you resize the browser the window the red cell either fills the screen or becomes a fixed width. This is because you need at least one 100% cell for proper table-layout fixed to work as intended with cols.

The problem I am having though is that when I have TWO flexible columns the function runs on one of them BEFORE the other (at least I think as much) and means that only ONE column will have its flex class re-added. It’s fine removing it but can’t reapply the flexible state if the cell gets larger than its original. See the example here: http://dev.driz.co.uk/FlexGrid2.html

Can anyone help? Offer suggestions to improve the code to get the function to work on BOTH flexible columns.

Answer 1

The code was almost spot on, you only had it in the wrong order.

Before you had it declaring multiple updateWidth() function declarations and binding the window resize event for as many columns that have the class flex, in this case being twice. This resulted in the events being fired separately one after another. So I moved that out of the .each() call, and put that .each() inside the function instead and it seems to work now.

$(document).ready(function() {

    // function declaration
    function updateWidth() {

        $('col.flex').each(function() {

            var flex = $(this);

            var original = flex.data('original');

            var flexIndex = flex.index() + 1; /* Add 1 because JS and CSS differ with indexes */

            var flexCell =  $('.uiGrid table tbody td:nth-child(' + flexIndex + ')');

            flexCell.css({'background':'#ff0000'});

            //////////////////////////////////////////////////////////////
            if(flexCell.width() < original) {
                $('col.flex').removeClass('flex-width');
            }
            else if(flexCell.width() >= original) {
                $('col.flex').addClass('flex-width');
            }
        });

    }

    // initial call
    updateWidth();

    // subsequent call upon window resize
    $(window).bind('resize', function() {
        updateWidth();
    });

});

I had to add another class for the flex function to work. One class to denote that the column is always flexible (flex) and another class to control the width of the column (flex-width). This means we can add/remove the flexible width without losing the fact that the column is flagged as flexible.

Another minor code tweak I made, which didn’t stop it initially working but was redundant, was to remove any double-jquery’ed objects. One example was :

var flex = $(this); // flex is now a jquery object
var original = $(flex).data('original'); // flex is turned into a jquery object again

to

var flex = $(this); // flex is now a jquery object
var original = flex.data('original'); // flex is already a jquery object, so can reference it as a var

See code at : http://jsfiddle.net/GoranMottram/TysFf/1/
See demo at : http://jsfiddle.net/GoranMottram/TysFf/1/embedded/result/