0

Here's a weird one -- something that works great in IE, but not in Safari. Here's my code:

<script type="text/javascript">
 $(document).ready(function(){
 $('body').css('display', 'block');
 });</script>

</head>
<body style="margin:0; display:none;">

The goal is to set the body display to none until the document is ready. Then change the display property to block.

Any idea what I'm doing wrong here?

user624385
  • 363
  • 1
  • 6
  • 14
  • It seems to work for me (mac safari) http://jsfiddle.net/Vkzcd/ – biziclop Oct 15 '11 at 11:37
  • This is a bad idea. Users without JavaScript enabled will never be able to see anything. – thirtydot Oct 15 '11 at 11:48
  • Weird. I see that it does, indeed, work on the jsfiddle site. I have a few other things going on code-wise. There must be a conflict... – user624385 Oct 15 '11 at 11:58
  • CAN I ADD some sort of conditional code, such that if javascript is not enabled it loads immediately, but if it is enabled it waits to display until the document is ready? – user624385 Oct 15 '11 at 12:06

2 Answers2

2

CAN I ADD some sort of conditional code, such that if javascript is not enabled it loads immediately, but if it is enabled it waits to display until the document is ready?

Yes, you can:

<script type="text/javascript">
 $(function(){
   $('body').css('display', 'block');
 });
</script>
</head>
<body>
<script type="text/javascript">
  $('body').css('display','none'); // this will execute before $(document).ready()
</script>
biziclop
  • 14,466
  • 3
  • 49
  • 65
1

You should use jQuery's .load() if you want the page to really be ready (images loaded too) before displaying it. On the other hand, you shouldn't hide the body at all with css, as people with javascript turned off will assume the site just crashed. Unless of course you're creating a 100% javascript dependent application.

JNissi
  • 1,120
  • 9
  • 22
  • Who turns off javascript? Certainly not the average user. You have to go hunting to find the setting. I'm betting 99% of people have it set on as default and don't think twice about it. Am I wrong? – user624385 Oct 15 '11 at 11:59
  • That sounds quite an educated bet. That 1% might not be much, but it will be one angry 1%. But again, it's one's own decision to drop support for them. I myself don't support IE in my own projects at all, and that's a bit larger percentage. – JNissi Oct 16 '11 at 07:23
  • And one thing I forgot. If the javascript doesn't download for one reason or another, the user will not see the content at all. Also this approach may show a blank page for quite a while if you have a lot of content and javascript to load. A better approach imho is Progressive enhancement, basically: Add your css inside , load the page content and at the end of load the . – JNissi Oct 16 '11 at 07:35