How to force margins to be ready from js before document ready

Question

I am using an effect a website I have built to detect and move the website from on document ready as well as when the browser window is resized. There is an effect I must address that I did not consider. When the page loads it reads css from the css file and once document is ready it reads from dynamic value provided from js. I was hoping someone can give some insight on how I can read the js value before the css value.

Thank you in advance,

DT

Answer 1

I made this example http://jsfiddle.net/efortis/kUfdE/

First, hide it by default in the CSS with display:none

.orangeBox{
  background: orange;
  display: none;
}

Then display it with javascript, equivalent to .css('display', 'block') to show the display:none element

$(document).ready(function () {
  $('.orangeBox').delay(1500).fadeIn('slow');
});