CODEWITHSUNDEEP
javascriptjquery
J. Sveum
J. Sveum

Reputation: 29

Correct outerWidth with transform: scale

I have a slideshow where all the elements except from the active one has the transform scale(0.925). I need to get the total width of all my elements and apply this to the parent. 

$(slides).each(function() {
    console.log($(this).outerWidth());
    tot_width += $(this).outerWidth();
});

$('ul').css({width: tot_width});

The tot_width is wrong because of the scaling of the elements. How can I fix this?

Upvotes: 1

Views: 257

Answers (2)

Jonas Grumann
Jonas Grumann

Reputation: 10786

You could check if each element is active and then multiply by the scale factor:

$(slides).each(function() {
    var width = $(this).outerWidth();
    if (!($(this).hasClass('active'))) {
        width = width * .925;
    }
    tot_width += width;
});

Upvotes: 1

Syntac
Syntac

Reputation: 1777

Assuming, you are displaying them already, you can use

tot_width += $(this)[0].getBoundingClientRect().width;

Upvotes: 2

Related Questions