...

View Full Version : Appling .style to DOM element before window.onload



rh2600
08-02-2006, 02:29 AM
Hi, I am wanting to write some unobtrusive JS that will modify an element. I've been pulling my hair out so far!

Basically, I want to be able to modify an elements style before the page renders, so that I don't get a 'flash' of unstyled content. I thought brothercake's DOM-Ready watcher would do the trick.. but no dice..

Here is an HTML page with my example... the text is shown as black for a sec before changing to red.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
//DOM-ready watcher
function domFunction(f, a)
{
//initialise the counter
var n = 0;

//start the timer
var t = setInterval(function()
{
//continue flag indicates whether to continue to the next iteration
//assume that we are going unless specified otherwise
var c = true;

//increase the counter
n++;

//if DOM methods are supported, and the body element exists
//(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]
//in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null))
{
//set the continue flag to false
//because other things being equal, we're not going to continue
c = false;

//but ... if the arguments object is there
if(typeof a == 'object')
{
//iterate through the object
for(var i in a)
{
//if its value is "id" and the element with the given ID doesn't exist
//or its value is "tag" and the specified collection has no members
if
(
(a[i] == 'id' && document.getElementById(i) == null)
||
(a[i] == 'tag' && document.getElementsByTagName(i).length < 1)
)
{
//set the continue flag back to true
//because a specific element or collection doesn't exist
c = true;

//no need to finish this loop
break;
}
}
}

//if we're not continuing
//we can call the argument function and clear the timer
if(!c) { f(); clearInterval(t); }
}

//if the timer has reached 60 (so timeout after 15 seconds)
//in practise, I've never seen this take longer than 7 iterations [in kde 3
//in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]
if(n >= 60)
{
//clear the timer
clearInterval(t);
}

}, 250);
};

//Just before window.onload do this

var foobar = new domFunction(function()
{
if (document.getElementById('test')) {
document.getElementById('test').style.color = '#F00';
}

});
</script>
</head>
<body>
<div id="test">
Boo!
</div>
</body>
</html>

Kravvitz
08-02-2006, 03:36 AM
So... why can't you just use a normal stylesheet?

rh2600
08-02-2006, 04:10 AM
Here is an example...

I have a page with an image I want to fade in (with JS).

If I set the image opacity to 0 with a stylesheet, and then fade it in with JS it works great.

However.. what happens when someone comes to my site without JS enabled? They see nothing...

No good..

rh2600
08-02-2006, 05:03 AM
Doing something like this in the head appears to work

<script>document.write('<link href="javascript.css" rel="stylesheet" type="text/css" />');</script>

Kravvitz
08-02-2006, 05:42 AM
Keep in mind that document.write() can not be used if you server your XHTML document with an XML mime-type.

rh2600
08-02-2006, 09:52 PM
So you would get round that by doing a createElement etc?

Kravvitz
08-02-2006, 09:58 PM
Yes. I'm not sure which browsers will allow you to append a new child element of <head> before onload though.

Maybe I'll make a test case for this later, because it's something that I would find useful to know.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum