Based on n items being shown, I’m wanting to evenly distribute them across a width after scaling.
Here’s what I have so far
var window_width = window.innerWidth;
var section_width = parseInt(window_width/asset_windows.length);
var scale = 1;
for (i=0; i < asset_windows.length; i++) {
var asset_window_width = asset_windows[i].clientWidth;
if ( asset_window_width > section_width ) {
// scale asset to section_width
var scale = section_width/asset_window_width;
}
var centering_offset = ((section_width - asset_window_width)/2)*scale;
var x_positioning = section_width * i - asset_windows[i].offsetLeft;
document.getElementById('scheme_application_container').style.overflow = "hidden";
document.body.style.overflow = "hidden";
$(asset_windows[i])
.css({transformOrigin:'0 0'})
.transition({
scale: scale,
x: x_positioning
});
}
This works as expected until I scale the elements to fit into divided area. Maybe I’ve been banging my head at this for too long, but I’m stumped.
I thought I had it by also adding the below to the x_positioning value:
(section_width * i)*scale
but wasn’t consistent.
ANY help/hint/helpful push is MOST appreciated.