How to modify CSS in window resize event before rendering?

Question

I have two DIV elements with style="float:left;". I set the margin, width, etc. based on the size of the window. When the window is smaller I lower the width and margin CSS attribute values of the DIVs to make them appear next to each other (not below).

This looks nice in Firefox, however in Chrome and Opera the DIVs jump below each other for a moment before my JavaScript runs. After a moment the screen looks nice again.

The question: Is there a way to catch a window.onresize event and manipulate CSS before the effects of the resize event are visible on the browser?

Without seeing your particular code, it's likely you can accomplish all your styling with media queries and without using javascript at all. There are lots of tutorials on the web, including [this one][1] by Nick La. [1]: webdesignerwall.com/tutorials/… — Adam Hart
– Adam Hart, Commented Jul 29, 2013 at 19:24
What about width: 50% ( lower this based on your paddings/margins ) use float left or display inline-block depending what you like. — Trouble
– Trouble, Commented Jul 29, 2013 at 19:25
I second @AdamHart, a concrete example and use case would reduce a great deal of ambiguity in your question. — pygeek
– pygeek, Commented Jul 29, 2013 at 19:38
The demo site that Adam Hart sent is pretty cool. However, when I resize the window in chrome it also blinks. As much as I saw the demo uses percentage divs. What I am implementing is a kind of grid where there widths and spaces based on the available space can be calculated with a bit special equotations. — Balazs Zsoldos
– Balazs Zsoldos, Commented Jul 29, 2013 at 20:08

Kevin Lynch · Accepted Answer · 2013-07-29 19:29:44Z

2

You could use media-queries. These are the prefered method for responsive design.

CSS

 div {
        margin-left: 20px;
    }

    @media (max-width: 600px) {
      div {
        margin-left: 5px;
      }
    }

In this example the div will have a margin-left of 5px on screens that are 600px in width or lower. This is part of your CSS so no waiting for things to load, it loads with the rest of your CSS.

answered Jul 29, 2013 at 19:29

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pygeek Over a year ago

His question explicitly mentions modifying the width, which means that the variable event he is looking for must be change in height.

pygeek · Accepted Answer · 2013-07-29 19:33:27Z

0

This is because Firefox waits for javascript to load before rendering the page. Chrome and Opera display the page, regardless of whether javascript has loaded or not. Try writing javascript to set the effected body to visibility: hidden; initially, and changing it to "visibility: visible;" after the javascript has executed.

Update:

Set visibility: hidden; in the css.

And add this inside of your <head></head>:

<noscript>
    body { visibility: visible; }
</noscript>

This will ensure the body is invisible until the javascript has loaded. In the case that javascript isn't enabled for the device, it defaults to visibility: visible;.

edited Jul 29, 2013 at 19:33

answered Jul 29, 2013 at 19:26

pygeek

7,4141 gold badge22 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to modify CSS in window resize event before rendering?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related