Re: Loading CSS for AJAX apps.

Alex Duffield
Thu, 15 Jun 2006 21:23:27 -0000

OK, I have come up with this:

function LoadCSS(file){
	var head = document.getElementsByTagName(''head'').item(0)
	var linkTag = $(''loadCSS'');
	if(linkTag) head.removeChild(linkTag);
	csslink = document.createElement(''link'');
	csslink.href = file;
	csslink.rel = ''stylesheet'';
	csslink.type = ''text/css'';
	csslink.id = ''loadCSS'';
	head.appendChild(csslink)
}

It seams to work well on Firefox, writes it to the head and doesnt
end up with old and duplicate links...

Can any one see any flaws to this???

Cheers.

______________________________________________________________________
Alex Duffield . Principal . InControl Solutions . http://
www.incontrolsolutions.com



On 15-Jun-06, at 9:44 AM, Tristan Kelley wrote:

> Yeah, if you''re looking for valid markup (or W3C validation) that
> won''t work but you can call a CSS linked file anywhere in your
> document.
>
> On 6/15/06, Alex Duffield
<alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote:
> I am fairly sure that technically speaking, the tag can
> only be in the and not the body...
>
> (Some one please correct me if I am wrong!)
>
> For now I have been doing this as well as just having each modules
> CSS inline, but it doesnt display the CSS on IE Windows...
>
> After I posted my original question I found this online...
>
> function loadobjs(){
> 	if (!document.getElementById)
> 	return
> 	 for (i=0; i<arguments.length; i++){
> 		var file=arguments[i]
> 		var fileref=""
>  		if (loadedobjects.indexOf(file)==-1){ //Check to see if this
> object has not already been added to page before proceeding
> 			if (file.indexOf(".js")!=-1){ //If object is a js file
> 				fileref=document.createElement(''script'')
> 				fileref.setAttribute("type","text/javascript");
> 				fileref.setAttribute("src", file);
> 			}
> 			else if (file.indexOf(".css")!=-1){ //If object is a css file
> 				fileref=document.createElement("link")
> 				fileref.setAttribute("rel", "stylesheet");
> 				fileref.setAttribute("type", "text/css");
> 				fileref.setAttribute("href", file);
>  			}
> 		}
> 		if (fileref!=""){
> 			document.getElementsByTagName
("head").item(0).appendChild(fileref)
> 			loadedobjects+=file+" " //Remember this object as being
already
> added to page
>  		}
> 	}
> }
>
>
> I haven''t tested it yet, but this was the sort of thing I had in
mind.
>
> Cheers.
> ______________________________________________________________________
> Alex Duffield . Principal . InControl Solutions . http://
> www.incontrolsolutions.com
>
>
>
> On 15-Jun-06, at 9:19 AM, Tristan Kelley wrote:
>
>> Maybe just have a seperate style sheet for each module? At the
>> beginning of each code section you''re calling just include
your
>> CSS link:
>>
>>
>>    @import url(css/style.css);
>>
>>
>> On 6/15/06, Alex Duffield
<alex-GLL9njBnHiGqPKKiFzS5XxZCeNDtXRbv@public.gmane.org> wrote:
>> I am working on an update to my content management system and I am
>> using a lot of AJAX to load in the different "Modules"
>>
>> I want each module to be self contained, including all its
>> specific js and CSS.
>>
>> Does any one know of a good solution for loading in new CSS to go
>> with the code loaded in via the AJAX call?
>>
>> Thanks.
>> _____________________________________________________________________
>> _
>> Alex Duffield . Principal . InControl Solutions . http://
>> www.incontrolsolutions.com
>>
>>
>>
>>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>>
>>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs