PDA

View Full Version : style switching not work on IE, but works on everything else



trampt
08-14-2006, 04:13 PM
Script Title: Style Sheet Switcher (v1.0)
Script URL: http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

Problem: The script seems to work great on all browsers on my Mac. It also works fine when running on a PC ... except for Internet Explorer. When you choose the alternate style you get no style sheet. Tested on three different PC's. Does anyone know what could be causing this?

If you click link at the top right "change this site with just one click" can you change the style sheets inside the popup.

www.addedsugar.com

Thanks in advance

trampt
08-15-2006, 06:17 PM
Nobody knows why this doesn't work?

ddadmin
08-15-2006, 10:56 PM
Hmmm at a glance I can't see any problems with your set up. The script seems to be switching styles properly, just not the "corporate" style sheet specifically. In other words, switching back to the default style sheet in IE works.

Try adding a 3rd style sheet that's minimal in substance, and see if you're able to set the script up to switch to that style sheet in IE. This is to confirm where the problem lies.

trampt
08-15-2006, 11:21 PM
Well I added a third style sheet sheet and IE won't pick up either "alternative" style sheet. The only thing I can see that is different on the DD setup is that the "default" style sheet doesn't have a title, but when I try that it seems to load my alternate style sheets on top of the default instead of replacing it causing everything to screw up.

(loaded to another domain for testing so I wouldn't mess up my live site)

http://www.trampt.com/test.shtml

trampt
08-15-2006, 11:32 PM
Also, if I change one of the other "alternate stylesheet" to "stylesheet" that one will work and the other "alternate stylesheet" will not.

If I try and use the 'none' link for the default stylesheet it breaks and renders both the default and alternate stylesheets together which just completely breaks the layout.

ddadmin
08-16-2006, 04:09 AM
Ok it seems IE is suddenly having problems with rel="alternate stylesheet", namely, that such style sheets aren't enabled even if told to. For a temporary fix, find the line:


if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //enable chosen style sheet

inside the .js file, and change that to:


if(cacheobj.getAttribute("title") == title){
cacheobj.disabled = false //enable chosen style sheet
cacheobj.setAttribute("rel", "stylesheet")
}

I'll have to investigate the issue more closely later and see if the patch should be added to the DD script itself.

trampt
08-16-2006, 04:52 AM
That is beautiful work. The script works like a charm now.

ddadmin
08-23-2006, 10:31 PM
Just an update on this issue in IE, I think I found the problem, which isn't due to a bug in the script. Your CSS is defined as follows:


<link href="/_css/global-01.css" type="text/css" media="screen" rel="stylesheet" title="pop" />
<link href="/_css/global-02.css" type="text/css" media="screen" rel="alternative stylesheet" title="corporate" />

Notice how you gave your default stylesheet a title as well. This shouldn't be the case, as only rel="alternate stylesheet" styles should have a title attribute.

mwinter
08-23-2006, 10:59 PM
Just an update on this issue in IE, I think I found the problem, which isn't due to a bug in the script.

In so far as the script doing something wrong; no, there's no bug. The problem as I see it is that IE doesn't understand how style sheets can be combined, and extra effort is required to get it to co-operate.





<link href="/_css/global-01.css" type="text/css" media="screen" rel="stylesheet" title="pop" />
<link href="/_css/global-02.css" type="text/css" media="screen" rel="alternative stylesheet" title="corporate" />

Notice how you gave your default stylesheet a title as well.

His preferred style sheet, yes.



This shouldn't be the case, as only rel="alternate stylesheet" styles should have a title attribute.

Not so. I'll try to explain it clearly to anyone that's interested. Section 14.3 (http://www.w3.org/TR/html4/present/styles.html#h-14.3) of the HTML specification describes external style sheets.

There are two types of style sheet: persistent, and alternate. A persistent style sheet is always applied to whatever media is indicated. Switching between style sheets does not affect the persistent sheets (there can be more than one). Alternate style sheets are mutually exclusive: there can be more than one style sheet per group, but only one active group. Amongst the alternate style sheets, the author may designate a preferred set.

A persistent style sheet is one that doesn't include a title attribute. As it isn't part of any group, it doesn't get a name. The rel attribute for a persistent style sheet simply contains "stylesheet".

An alternate style sheet does have a title attribute, and that designates the group to which it belongs. An alternate style sheet also has the word "alternate" in the rel attribute value (rel="alternate stylesheet").

The preferred style sheet has a title attribute just like any other alternative, but it doesn't include the word "alternate" in the rel attribute value.

The markup is valid; IE doesn't like it.

Mike

ddadmin
08-24-2006, 02:52 AM
Hi Mike:
Just to clarify then, the only difference between a preferred style sheet and persistent style sheet syntax wise is that the former has a "title" attribute added right? How does the browser treat these two types of style sheets differently? And for rel="alternate stylesheets", the only special treatment it gets is that it's disabled by default by a competent browser until you explicitly enable it via scripting right?

I'm wondering whether, for the next update of this script, to just use regular linked style sheets for the alternates as well and using the disabled attribute to disable the secondary ones by default:


<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="stylesheet" type="text/css" media="screen" title="blue-theme" href="custom.css" disabled="disabled" />
<link rel="stylesheet" type="text/css" media="screen" title="brown-theme" href="custom2.css" disabled="disabled" />

Is there anything horribly wrong with this approach?

mwinter
08-29-2006, 07:03 PM
Sorry for taking so long to respond. I was hoping to offer an alternate solution, but got caught up. I'll follow up at some point with something, soon. Until then, I'll just answer your questions.



Just to clarify then, the only difference between a preferred style sheet and persistent style sheet syntax wise is that the former has a "title" attribute added right?

Yes.



How does the browser treat these two types of style sheets differently?

A preferred style sheet is the default alternate style sheet, and of all of the alternate style sheets, this one will be used initially. However, the user can exchange it for one of the other style sheets with a different title attribute value.

A persistent style sheet is applied regardless of what alternate style sheets are chosen; it persists, despite what the user chooses.

Alternate style sheets are where one would implement a theme, with each theme given its own group name using the title attribute. The default theme would be the preferred style sheet. Common rules that apply to all themes can be put in a persistent style sheet. Also, a persistent style sheet would be appropriate when styling media where the themes aren't intended to be used; perhaps on handhelds or when printing.



And for rel="alternate stylesheets", the only special treatment it gets is that it's disabled by default by a competent browser

Yes.



until you explicitly enable it via scripting right?

Or if the user chooses it from the browser interface. Both Gecko-based browsers and Opera have controls in the View menu for switching between alternate style sheets.



I'm wondering whether, for the next update of this script, to just use regular linked style sheets for the alternates as well and using the disabled attribute to disable the secondary ones by default:

The link element doesn't have a disabled attribute. The disabled property exposed through the DOM is a manifestation of the switching mechanism that browsers should implement.



<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="stylesheet" type="text/css" media="screen" title="blue-theme" href="custom.css" disabled="disabled" />
<link rel="stylesheet" type="text/css" media="screen" title="brown-theme" href="custom2.css" disabled="disabled" />

Is there anything horribly wrong with this approach?

Yes: you have three preferred style sheets, all of which belong to different groups. Only one group can be "preferred".

Mike

mwinter
08-30-2006, 03:24 AM
The promised followup. The two attached files implement cookie management and style sheet switching, respectively. The latter didn't exhibit the bug when I tested it.

The problem, as far as I can see, is that IE doesn't consider non-preferred alternate style sheets to be disabled. When the list of style sheets is iterated, the initial change to the disabled property isn't effective and it takes a second iteration to make IE behave properly. In my code, the usePreferred method is called when the script is included (line 32), setting the disabled property so that preferred style sheets are enabled, and alternate style sheets are disabled.


If you don't mind, I'd like to comment on the current script.

You can improve efficiency quite significantly in both the getCookie and setStylesheet functions by retaining a reference for the duration of each function to the return values of the match and getElementsByTagName methods, respectively. There is no need to re-evaluate the match, nor regenerate the collection of link elements within either function.

Be consistent when accessing attributes. You currently use a mixture of properties and the getAttribute method. Just use one - I'd strongly recommend the former.

Test relevant methods and objects: the getElementById method has no bearing on the operation of the code, whilst the getElementsByTagName method does.

The regular expression used in the getCookie function isn't very discriminating: any suffix match on the function argument will be considered good. The same applies to the rel attribute value, though to a much lesser extent.

The global undefined property (line 43) isn't implemented in all environments. Either use the typeof operator:



(typeof element.type == 'undefined')

or provide the declaration yourself:



var undefined;

Mike

ddadmin
08-30-2006, 03:58 AM
Thanks Mike for the comprehensive info! It definitely helped clarify a few things, especially on the difference between preferred and persistent style sheet.

I also looked at your two .js files- it's going to be a while before I code at that level sadly:) I'm going to go through it more closely, and take the relevant parts into consideration when updating this script.