Changing "link" tag's href, dynamic only on one browser?

drblitzkrieg · Dec 10, 2007

Hi,

Let's say you have a stylesheet linked in from the <head> section like
so:

<link id="ourlink" rel="bababooey stylesheet" type="text/css"
media="screen" href="style.css">

For when you need to dynamically swap the style out to another sheet,
or perhaps to a php file passing it parameters via get, you have it
like so:

var ourlink=document.getElementById("ourlink");

ourlink.href="othersheet.css";
//or:
ourlink.href="style.php?someVar=someVal";

In any case, it needs to change dynamically, because there might be
thousands of css's on the server and the user wouldn't be able to
download them all from the beginning.

I have tested this, and it works as expected in Mozilla/Firefox, but
not in IE. Does someone know the difference between the 2 browsers,
ie. does Firefox re-load from the server when the .href property's
value changes, but IE just sits there? Is there a way to wake IE up
and get it to do the same?

Thanks.

David Mark · Dec 10, 2007

Hi,

Let's say you have a stylesheet linked in from the <head> section like
so:

<link id="ourlink" rel="bababooey stylesheet" type="text/css"
media="screen" href="style.css">

What is a "bababooey" relationship?

For when you need to dynamically swap the style out to another sheet,
or perhaps to a php file passing it parameters via get, you have it
like so:

var ourlink=document.getElementById("ourlink");

ourlink.href="othersheet.css";
//or:
ourlink.href="style.php?someVar=someVal";

Just use alternate style sheets. That's what they are for. Your
"bababooey" moniker goes in the title attribute.

In any case, it needs to change dynamically, because there might be
thousands of css's on the server and the user wouldn't be able to
download them all from the beginning.

User agents aren't supposed to download alternates until used, but
unfortunately some do, so you might want to limit the number of
themes. Do you really need thousands of them? Do you have time to
write and test that many alternatives?

I have tested this, and it works as expected in Mozilla/Firefox, but
not in IE. Does someone know the difference between the 2 browsers,
ie. does Firefox re-load from the server when the .href property's
value changes, but IE just sits there? Is there a way to wake IE up
and get it to do the same?

If you use alternate style sheets, modern standards-based browsers
will provide an interface for the user to choose between them. IE
does not, so you have to use a script. Something like:

function setActiveStyleSheet(id) {
var a, i, l, t;
a = document.getElementsByTagName("link");
i = 0;
l = a.length;
while (i < l) {
t = a.getAttribute("title");
if (t && a.getAttribute("rel") &&
a.getAttribute("rel").indexOf("style") != -1) {
a.disabled = true;
if (t.toLowerCase() == id) { a.disabled = false; }
}
i++;
}
}

drblitzkrieg · Dec 10, 2007

What is a "bababooey" relationship?

Nothing, just wanted to make it unique from "stylesheet" which I had
used before when trying multiple stylesheet links..

Just use alternate style sheets. That's what they are for. Your
"bababooey" moniker goes in the title attribute.

I have tried this, but unfortunately the site involves a dynamic
screen which doesn't allow reloading, and other reasons listed below:

User agents aren't supposed to download alternates until used, but
unfortunately some do, so you might want to limit the number of
themes. Do you really need thousands of them? Do you have time to
write and test that many alternatives?

Because it allows for users to upload their own css's, which we will
then want to apply to individual div's in the page. Once enough users
come on, yes, thousands of css's is a likely possibility.

If you use alternate style sheets, modern standards-based browsers
will provide an interface for the user to choose between them. IE
does not, so you have to use a script. [...]

Thanks for the suggestion, but I've tried it and in this particular
application which is both very large and requires generating dynamic
css content from a large, everchanging source, it becomes implausible.

In any case, my main question remains: why does it work in Mozilla
(here 2.0.0.11), and not in IE (7)? How can one make IE7 do the same,
or else have another way to swap the css dynamically, and without
downloading all the gajillion css files from the start?

TIA

David Mark · Dec 10, 2007

Nothing, just wanted to make it unique from "stylesheet" which I had
used before when trying multiple stylesheet links..

I have tried this, but unfortunately the site involves a dynamic
screen which doesn't allow reloading, and other reasons listed below:

Can you elaborate this concept of a "dynamic screen?" Regardless,
alternate style sheets do not require reloading.

Because it allows for users to upload their own css's, which we will

Why would they want to do that? User style sheets typically reside on
the users' machines.

then want to apply to individual div's in the page. Once enough users
come on, yes, thousands of css's is a likely possibility.

If you use alternate style sheets, modern standards-based browsers
will provide an interface for the user to choose between them. IE
does not, so you have to use a script. [...]

Click to expand...

Thanks for the suggestion, but I've tried it and in this particular
application which is both very large and requires generating dynamic
css content from a large, everchanging source, it becomes implausible.

If it generates dynamic CSS, then how will uploaded static style
sheets work with it?

In any case, my main question remains: why does it work in Mozilla
(here 2.0.0.11), and not in IE (7)? How can one make IE7 do the same,
or else have another way to swap the css dynamically, and without
downloading all the gajillion css files from the start?

I still don't understand the concept that needs to expose a
"gajillion" css files to each user. Wouldn't they just be interested
in the ones they uploaded?

Anyway, try removing the link element and adding a new one.

Doug Gunnoe · Dec 10, 2007

Hi,

Let's say you have a stylesheet linked in from the <head> section like
so:

<link id="ourlink" rel="bababooey stylesheet" type="text/css"
media="screen" href="style.css">

For when you need to dynamically swap the style out to another sheet,
or perhaps to a php file passing it parameters via get, you have it
like so:

var ourlink=document.getElementById("ourlink");

ourlink.href="othersheet.css";
//or:
ourlink.href="style.php?someVar=someVal";

In any case, it needs to change dynamically, because there might be
thousands of css's on the server and the user wouldn't be able to
download them all from the beginning.

I have tested this, and it works as expected in Mozilla/Firefox, but
not in IE. Does someone know the difference between the 2 browsers,
ie. does Firefox re-load from the server when the .href property's
value changes, but IE just sits there? Is there a way to wake IE up
and get it to do the same?

Thanks.

Hello. I tried the following, which worked locally on IE 6. May or may
not be what you need.

Good luck.

--
contents of style1.css

p{color:#FF00FF;font-family: sans-serif;font-size: 100%}
--

contents of style2.css

p{color:#00ff00;background-color:yellow;font-family: courier;font-
size: 200%}

--

and the file: swapstyles.html

<html>
<head>
<link id="ourlink" rel="stylesheet" type="text/css"
href="style1.css">

<title>Swap Style Sheets for IE</title>
<script>
function swapStyleSheets(){
pimpMyCSS = document.getElementById("ourlink");
pimpMyCSS.href="style2.css"

}

</script>
</head>
<body>

<input type = button onclick="swapStyleSheets()" />

<p>Notice this text with all kind of style, it has more style than
picasso got paint.

</body>
</html>

Doug Gunnoe · Dec 10, 2007

<input type = button onclick="swapStyleSheets()" />

- Show quoted text -

I failed to mention, you have to click that button ^.

What?

David Mark · Dec 10, 2007

I failed to mention, you have to click that button ^.

What?

I don't know, but you also failed to notice that your solution is
identical to what the OP originally tried.

Doug Gunnoe · Dec 10, 2007

I don't know, but you also failed to notice that your solution is
identical to what the OP originally tried.

Sounds like you "do" know.

Mine worked for some reason. He is either doing something slightly
different, or there is a difference between IE6 and IE7.

I uploaded it, thinking maybe there was something going on because it
was on my machine, but it worked there too.

http://polisick.com/swapstyles.html

David Mark · Dec 10, 2007

Sounds like you "do" know.

Know what?

Mine worked for some reason. He is either doing something slightly
different, or there is a difference between IE6 and IE7.

His code is the same as yours and your linked example worked in IE7.

There are lots of differences between IE6 and 7. Which did you test
with?

Doug Gunnoe · Dec 10, 2007

Know what?

Lots of stuff.

His code is the same as yours and your linked example worked in IE7.

There are lots of differences between IE6 and 7. Which did you test
with?

I only have access to IE 6 at the moment. But since it worked for you
in IE7, which is what the OP said he was using, then I guess something
is wrongish with the OP's script.

Only one table shows up with the information	2	Mar 29, 2023
How to have two html audio players on one page?	0	May 3, 2022
How to store data from a sign up form on a website into an sql databse	1	Sep 9, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Multi select options in a menu	1	Oct 30, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
I need help making an html website	2	Aug 2, 2023

Changing "link" tag's href, dynamic only on one browser?

drblitzkrieg

David Mark

drblitzkrieg

David Mark

Doug Gunnoe

Doug Gunnoe

David Mark

Doug Gunnoe

David Mark

Doug Gunnoe

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads