Wednesday, February 21, 2018

Calc Issue

Some discrepancies between browsers can cause problems. I
wanted to work with the cute green box code from a helper site
on Plunker, but try as I may, I couldn't get it to move in my Edge browser.
Turns out that Edge does not recognize the calc command.

For the green box to move to the other side of the screen, it needs to
know how far to go. One can throw in a width value in pixels(1250px), but
if the screen is ever made smaller, one waits patiently for the box to reappear...

The original code called for a calculation to be made taking the width at 100%
and subtracting 50pixels (the width of the box). Perfect at all sizes in Chrome.

Turns out Edge does understand 100%, and works alright on all sizes. It
just won't do that little calc for the size of the screen.

I know, I know, Javascript does everything...

I am currently running the code at 90% width, which is decent once the screen is
the width of a tablet!



https://javascript.info/css-animations




















                                        *      *      *
First step: I know how to get window width readings, For test purposes,every
3 seconds. Below:

                                      *     *    *
Finally resolved the issue with a little stratagem of biblical
simplicity: I run the green box - a div - within another div;
and the latter has a margin-right property of 50px.Thus, it will not allow
the child div's left border nearer than 50 pixels from the screen's right edge.

Works in a similar manner in all browsers. As they say, problem solved.


















No comments: