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
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: <style type="text/css" media="screen"> @import url(css/style.css); </style> 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* <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
I am fairly sure that technically speaking, the <style> tag can only
be in the <head> 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:
>
> <style type="text/css" media="screen">
> @import url(css/style.css);
> </style>
>
> 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
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
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 <style> tag can only be in > the <head> 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* <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: > > <style type="text/css" media="screen"> > @import url(css/style.css); > </style> > > 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 > > * <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 > > > > _______________________________________________ > 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
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 <style> tag can
> only be in the <head> 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:
>>
>> <style type="text/css" media="screen">
>> @import url(css/style.css);
>> </style>
>>
>> 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
>
>
> _______________________________________________
> 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
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
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)
}
Nice. I''d like to hear of any cross-browser support issues, or lack
of. I
can see this being useful in my application if it works. Has anyone tried
this in Safari?
Sam
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Sam wrote:> 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) > } > > Nice. I''d like to hear of any cross-browser support issues, or lack > of. I can see this being useful in my application if it works. Has > anyone tried this in Safari?Look at scriptaculous.js for a cross browser way of doing this. It''s specifically doing it with JS files, but I imagine CSS is similar. -- Michael Peters Developer Plus Three, LP
Ya, this seems to work in Safari, but a similar function for loading the JS fails in Safari. ______________________________________________________________________ Alex Duffield . Principal . InControl Solutions . http:// www.incontrolsolutions.com On 15-Jun-06, at 2:45 PM, Sam wrote:> 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) > } > > Nice. I''d like to hear of any cross-browser support issues, or > lack of. I can see this being useful in my application if it > works. Has anyone tried this in Safari? > > Sam > _______________________________________________ > 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
Ya, I have looked at that code in scriptaculous.js but it seems that
that class only uses document.write to put the new links in...
require: function(libraryName) {
// inserting via DOM fails in Safari 2.0, so brute force approach
document.write(''<script type="text/javascript"
src="''+libraryName
+''"></script>'');
}
and that doesnt seem to be of any help in dynamicly loading CSS or JS
via an AJAX call.
the "load" function just does a version check and get the path for
loading the rest of the files.
______________________________________________________________________
Alex Duffield . Principal . InControl Solutions . http://
www.incontrolsolutions.com
On 15-Jun-06, at 2:45 PM, Michael Peters wrote:
>
>
> Sam wrote:
>> 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)
>> }
>>
>> Nice. I''d like to hear of any cross-browser support issues,
or lack
>> of. I can see this being useful in my application if it works. Has
>> anyone tried this in Safari?
>
> Look at scriptaculous.js for a cross browser way of doing this.
It''s
> specifically doing it with JS files, but I imagine CSS is similar.
>
> --
> Michael Peters
> Developer
> Plus Three, LP
>
> _______________________________________________
> 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