Topic awaiting preservation: Style Switching Glitch (Page 1 of 1)

I'm not sure if this question has been raised here before, but something has been bugging me about the style switching code I'm using.

First of all, much thanks to Slime, who provided the slightly altered version of the ALA code. I'm not as up on JS as I used to be, and Slime was a great help in getting this off the ground.

There does some seem to be a minor "glitch" in the code (which Slime is aware of)--whenever I switch to a new page, it loads up with the default style sheet, only switching to the style sheet saved in the cookie when the page finishes loading. Apparently this is happening because the script runs onLoad. Is there any way to get the proper style to load immediately, as soon as the page starts loading? In other words, is there anything I can use besides onLoad that will run the script immediately?

It's not a fatal flaw, of course, but it is a tad distracting, and several people have mentioned it to me. You can see it in action on my site (first link in my sig below). Here is the switcher script. You can view the source code on my site, of course, to see how it is called.





www.liminality.org

You know, I suppose you could use a script in the head to document.write out the <link> tags with the correct rel attributes. If you try that, be sure to also include a <noscript> tag, containing the default link tags.

I have used style sheet switching in the website that I developed as the final project of an Introductory course of XHTML, it can be seen here, http://www.people.fas.harvard.edu/~viol/fp12/ , and I have noticed the same problem. I have tried Slime code, that I was aware has a different version of the known ALA code, and the ALA code. Since the cookie feature of the Slime code doesn't work in Opera - or Mozilla, I don't remember which one - and since both suffer from the same "flicker" problem, I opted for the ALA code, with cookie code from other guy.
I noticed also that the flicker only happens, or mostly happens in IE, not in Netscape/Mozilla.
I don't know how to "correct" it and I also would like to know if someone comes up with a new approach that doesn't suffer from that problem. I also think that the problem I have had only with my website, of fonts being badly rendered, occurs because of the switching on-the-fly, because it doesn't happen under any other circumstances that I know of.

Slime: Um, you're going to have to explain that to me... how would that help the flicker? Wouldn't it still check the cookie only after the page is loaded?

Sorry for being so dense...

[Edit: OK, I'm trying to figure out what the deal is here. I hopped over to Zeldman to see if his styleswitcher suffered from the flicker, but it doesn't. I noticed that he imports his default style sheet (rather than linking to it), but that doesn't seem to affect anything. I also looked at the JS script, and it too begins on window.onload(). So I'm kind of stumped as to why I have the flicker and Zeldman doesn't... need to look at the code more carefully.]

[Edit2: Hmm... OK, took a look at the code, and it definitely uses a different approach from the ALA code (which is interesting) or Slime's code. My JS is way too rusty to noodle through it right now, though. I still can't really see how it gets around the flicker...]

[This message has been edited by Suho1004 (edited 05-29-2003).]

[This message has been edited by Suho1004 (edited 05-29-2003).]

Before building my project site, I had taken a look at Zeldman's code and it is similar to the one at ALA, in my opinion. http://www.zeldman.com/about/switch/
I believe it's more difficult to see the flicker because his pages are lighter.
I tested both, using @import and using <link> and both ways I had the flicker.
BTW, Zeldman's cookie feature doesn't work for Netscape 7.01/Mozilla 1.2.1, the ones I have installed.

If you do a hard refresh on his pages and look close you'll notice that there is absolutely no flicker. Believe me, I've stared long and hard at them. I still can't figure out what's up...

[Edit: I love how I can misspell two-letter words... ]

[This message has been edited by Suho1004 (edited 05-29-2003).]

Suho, you could simply read the cookie that Javascript sets with PHP. This would read it before the page loads and you'd simply generate the <style>/<link> tags with PHP before the HTML is actually sent to the client. Thus completly eliminating the flicker and it'd be 100% cross-browser too.

All I know is that I have tried exactly the code that Zeldman uses and it flickered in my pages. This idea of ColdFusion seems to be great.

ADDED: on the other hand, changing style would mean reloading the whole page from the server. With the javascript code, I believe the page is not reloaded but re-rendered, I mean, it seems so smooth, different from when the page is reloaded.

[This message has been edited by viol (edited 05-29-2003).]

You know, Drac, I think that may be the way I'll go. I wanted to see if I could figure this out, but now that I'm into PHP I think I could probably wing it--especially since there are some good PHP style switchers out there.

viol: Yes, PHP is server-side and JS is client-side, so the PHP option would be more of a drain on the server (which is why I wanted to solve this with JS), but I don't think it will slow down things that much. I think I'll give that option a try today. I'll let you know what happens.

Printing out some link tags generated from a cookie isn't going to strain the server at all. Although you may have to alter the Javascript of the style changer as you won't need to read the style from the cookie ith Javascrip when the page loads if your doing all that with PHP.


The other option would be to use that little trick InI found that emulates a kind of client side sessions:
http://www.OzoneAsylum.com/Forum2/HTML/002104.html

The idea behind fixing the 'glitch' here is basically the same. You need to get the usere's style preference before you render the page. Doing this with javascript by reading a cookie will always fail because it won't read the cookie till the page has rendered. InI figured out a different method for passing data back and forth between HTML page without cookies, best of all, the data is passed through the URL so it's there before the page is rendered.

You'd need to use a combination of this and slime's suggestion of using document.write() to print the <link> tags whilst the page is rendering. The code InI posted will let you automatically add a value to the end of each link on your page, which you can read form the URL with document.search (? - might be a little off on the correct object here). That value is set whenever a user makes a style choice and it updates the links URLs on the fly. Then when the user clicks a link to a new page, you read the value from the URL search string with a script in the head and document.write() the correct <link> tag for that style.

It's a bit of a stretch but once you get it up and running all should be fine. Check out the example InI linked to if your not quite sure what I'm talking about.

Anyways, that's if you want a fully JS solution. A JS & PHP combo would be just as good and you could even provide style switching for non JavaScript-capable browsers.

Best of luck with it

InI's method wouldn't work for me because of the way my page is set up. I've got a PHP script in mind that I'd like to try, so I'll see how that goes. Thanks for the info, though.

Well, due to the complexity of my page (which is a PHP template), I can't seem to get the PHP solution to work either. Maybe some day when I'm a lot better at PHP I'll be able to figure out why it doesn't seem to want to read the cookie. Until then, I'll just have to live with the flicker--unless I can figure out how to fix it in JS (maybe Slime's document.write solution)...

When I'm finished classes for the semester (two weeks left) I'll try and make a little example of Javascript setting a cookie and PHP reading it.

I'm not actually sure that this can be done as of yet but as long as there are no security issues (and I can't see why their would be) it should be posible.

What I plan to do, when I find some free time, is to try to understand why Zeldman's pages show no flicker while mine do. I have tried the same code as his, with my style sheets and pages, and I have the flicker. I don't know but there has to be an explanation, maybe the way the CSS of Zeldman is made, he uses a lot of IDs to identify the elements while I use only classes. Have to study it deeper.

To be honest, I think it's just the fact that he's Zeldman, and we're not.

Seriously though, I'd like to sit down and pick apart his code too, but I actually feel more comfortable with PHP than JS at the moment. The reason I'm having difficulty getting the PHP solution to work (I think--I'm not sure, though) is that my site is a single PHP template, and I think this might be interfering in the way the cookie is read. At least, that's my best guess. I really don't see why it isn't working, but it definitely has something to do with the cookie. It also might have something to do with my local host (which is where I'm testing everything now). When I get the chance, I'm going to make up some simple test pages to get the hang of the cookies. Results will most likely be posted in the Server-Side forum, with a link to this thread.

If you do discover anything about Zeldman's code, viol, let us know.