Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Appling .style to DOM element before window.onload

    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.

    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So... why can't you just use a normal stylesheet?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #4
    New Coder
    Join Date
    Jan 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doing something like this in the head appears to work

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

  • #5
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Keep in mind that document.write() can not be used if you server your XHTML document with an XML mime-type.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you would get round that by doing a createElement etc?

  • #7
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •