ansaurus

Question

Dynamically changing stylesheet path not working in IE and Firefox

Answer 1

+1 A:

maybe this will help you ... http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

Moran 2009-01-12 15:42:16

Answer 2

A:

It might be a caching issue. If you do a hard refresh (Ctrl+R in FF, Ctrl+F5 in IE) does it display the style properly? If that does fix it, you may want to look at removing the Last-Modified header from the CSS file or adding a cache control header telling the browser not to cache it.

palehorse 2009-01-12 15:43:14

Answer 3

+6 A:

Rather than changing the sheet in a single link, try using alternate style sheets. See this link on using alternate style sheets:

http://www.alistapart.com/articles/alternate/

Joel Coehoorn 2009-01-12 15:47:08

Answer 4

A:

It looks like you are simply reloading the existing page every time. Why not just use the refresh tag in your header to force the document to reload each time and put in the CSS and content server-side. A lot simpler and it works even with javascript disabled.

<meta http-equiv="refresh" content="5;url=http://example.com/DOC" />

tvanfosson 2009-01-12 15:49:53

Answer 5

+3 A:

The best way to include files via javascript is to insert a new dom element.

var a = document.createElement('link');
a.href="inset.css";
a.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(a);

However, obviously the problem you're going to run into though is that firefox and ie will not repaint the canvas once the document is finished loading (and you're using ajax). The way you get around that is by taking the contents of the stylesheets and including them in a style element. This sample code will change the color on the page dynamically.

function onLoadFunction() {
    var a = document.createElement('style');
    a.appendChild(document.createTextNode('body {color: blue;}'));
    document.getElementsByTagName("body")[0].appendChild(a);
}

When you load a new sheet, just destroy the css inside the style element and replace it.

jacobangel 2009-01-12 15:59:08

Interesting...2 things though.How do I access and change the CSS once I've created the element?? I haven't a clue. And second...I searched around and found a bunch of places saying that document.createElement('link') won't work on IE...are there any other ways?

Adam Haile 2009-01-12 16:41:51

Instead of using a link element, you load the content of the css into a style element. The browser knows to repaint after you include a style element, but not necessarily after a link.

jacobangel 2009-01-12 21:02:47

ansaurus

tags:

views:

answers:

Dynamically changing stylesheet path not working in IE and Firefox

related questions