CODEWITHSUNDEEP
javascriptjqueryjquery-ui
HorusKol
HorusKol

Reputation: 8706

jQuery ui size effect is not resizing to the specified width/height

jQuery UI v1.8.17 (testing in FF 10.0 on Ubuntu)

We are trying to fit large data tables into a fixed width design, and have opted for initially displaying a scaled down version of the table which can be clicked on to view at 100%.

I have found the jQuery UI size effect method, and it has a nice effect where it also scales everything inside the tables (cells, padding, text/font).

However, one problem is that we have to specify the new height and width (it would be great if we could just pass a width and it maintained aspect ratios) - but the other, much larger, problem is that it is not actually sizing to the specified dimensions.

For example - I have a table that is 502x60 and want that to fit into 300x36. Passing this height and width as parameters into the size method gets me a table that is about 354x40. When I reset to 502px in a subsequent size request, it actually is set to about 492px. Subsequent resizing seems to bounce between a width of 334 (when I want 300) and 492 (when I want 502).

$(document).ready(function() {
    /* create a selector for all tables over the width limit */
    $.expr[':'].wideTable = function(obj) {
        return $(obj).width() > 300;
    }

    /* create an array of width table dimensions */
    var wideTableWidths = [];
    $('table:wideTable').each(function() {
        wideTableWidths[$(this).attr('id')] = {
            width: $(this).width(),
            height: $(this).height(),
            ratio: $(this).height() / $(this).width(),
            scaled: false,
        };
    });

    /* set up the click event to resize the tables */
    $('table:wideTable').click(function() {
        if (wideTableWidths[$(this).attr('id')].scaled) {
            /* if the table is currently scaled, we can reset to original height and width as stored */
            $(this).effect("size", {to: {width: wideTableWidths[$(this).attr('id')].width, height: wideTableWidths[$(this).attr('id')].height} }, 0);
            wideTableWidths[$(this).attr('id')].scaled = false;
        } else {
            /* if the table requires scaling, we know we want a width of 300px and the height should be set to match the original aspect ratio */
            $(this).effect("size", {to: {width: 300, height: 300 * wideTableWidths[$(this).attr('id')].ratio} }, 0);
            wideTableWidths[$(this).attr('id')].scaled = true;
        }
    });

    /* initialise the page so that all wide tables are scaled to fit */
    $('table:wideTable').click();
});

Upvotes: 0

Views: 945

Answers (3)

szymonszukalski
szymonszukalski

Reputation: 81

Reviewing the jsFiddle you have provided, I found the solution to the problem.

The initial ratio calculation doesn't take into account the padding and border values of table td. You need to subtract these from the height and width.

This updated jsFiddle demonstrates the solution.

Hope that helps.

Upvotes: 1

szymonszukalski
szymonszukalski

Reputation: 81

I noticed that you have not set the scale argument within your .effect call.

The default value for scale is both which means that the resize affects both border and padding values.

In obtaining your original height and width values, you have used:

width: $(this).width()
height: $(this).height()

which return the content width of the elements (ie, not including the border, padding, or margin).

You can try using the .outerWidth() and .outerHeight() methods which include the border and padding, or specify scale: 'content' in your call to the .effect method. For example:

$(this).effect("size", {to: {width: 300, height: 300 * wideTableWidths[$(this).attr('id')].ratio, scale: 'content'} }, 0);

Upvotes: 0

tfcmaster9
tfcmaster9

Reputation: 113

I'm not sure this is related, but what is your doc type? I had issues with height/width calculations and not having a doctype defined with jqueryui. Try <!DOCTYPE html> if you dont already have one.

Upvotes: 0

Related Questions