Three boxes, two roll over, one falls out

What?
So this is an article to note an oddity when I was working with a Yootheme template called "yoo_sync". Some clever scripts (both mootools and jquery) using the equalize method to make div layers the same height, and in this case, the same width. It isn't so much a miscalculation of 100% divided by 3 that leaves 1 pixel left over, more the fact that the scripts use that 1 pixel (ceiling rather than floor?).

Why?
We have a row on a website of three boxes made of div layers. When viewed normally on a 15" Laptop, all was good using Chrome and tolerable using MS Internet Explorer. If we maximized the Google Chrome browser, the row would split and there would be 2 boxes on the top row and the third would pop under these. As for MSIE, that was ok when maximized.

How?
You could do loads of code hacks which is what I tested but all for nothing because you always end up needing to specify a third of the width.

Our template was 900 pixels in width. I tracked down some code that was simply calculating with 33% as the third of the page width.

Changing this to 990 pixels in width fixed the problem. I'm guessing this was because 990 divided by 33 leaves a remainder of zero but I'm not 100% sure this fixes the issue throughout other systems.




IMO: Somewhere in the Javascript (based on jquery), the script is using the remainder when it should be discarding it.

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: The information on this website is provided without warranty and any content is merely the opinion of the author. Please try to test in development environments prior to adapting them to your production environments. The articles are written in good faith and, at the time of print, are working examples used in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 3QnhmaBX7LQSRsC9hh6Je9rGQKEGNQNfPb
© 2021 Joel Lipman .com. All Rights Reserved.