UDASSS Official Documentation
UDASSS stands for Unobtrusive Degradable Ajax Style Sheet Switcher. As some might know, this package made it’s debut on 24ways, however for further documentation, I will be keeping that here. So for now, since the download package links to this page, I am putting up this page as a place holder until I get more time to document the in’s and out’s of its use.
Download U.D.A.S.S.S | V0.8
Technical Information
The Unobtrusive Degradable Ajax Style Sheet Switcher combines the power of Server Side processing and DOM scripting to swap style sheets on the fly with the power of Ajax. If JavaScript is disabled - UDASSS degrades gracefully to improve your website accessibility. Needless to say, it is very sexy indeed.
Good news about UDASSS
UDASSS is special for quite a few reasons. It doesn’t fully rely on JavaScript to swap alternate style sheets. If you’re looking for a pure JavaScript solution, look no further than Paul Sowden’s excellent article found at Alistapart called Alternate Style. It has been trusted for many years and to this day is the best JavaScript style sheet switcher. The only down-side to using Paul’s method is that when a user saves an ‘alternate style’ as their preferred, they will experience FOOS (Flash of Old Styles) since the user has to wait for the window ‘load’ event to occur before the cookie is read which ultimately is used to get the preferred style sheet.
However with UDASSS one does not need to worry about the perils of visitors having JavaScript being disabled. As of this date it is known that anywhere from 9% - 11% of web users are browsing without JavaScript. So with this information, some web developers have turned to alternative methods such as using server-side technologies like PHP to save their users preferences of styles. This is a great method, but we have nonetheless lost our ’sleekness’ of client-side ‘hoorah’.
All things being said, UDASSS takes advantage of combined client-side style switching and xmlHttpRequest to set cookies via PHP to save the user’s style preference. Furthermore, a user with JavaScript disabled can still benefit from UDASSS because it degrades to have the functionality of normal PHP style switcher. Hence, you get the best of both methods!
Other Resources for U.D.A.S.S.S.
- Official Debut on 24ways
- 24ways Example of UDASSS
- UDASSS Latest Release page
- Digg this badboy
- Del.icio.us goody
December 18th, 2005 at 7:25 pm
Not to be a pest, but why do you choose to use addEvent as opposed to prototype’s Event.Observe?
Doesn’t prototype handle all that event watching cleanup as well, just like EventCache does?
December 18th, 2005 at 8:01 pm
I use my own addEvent because it preserves the ‘
this‘ keyword and the Event.observe() method doesn’t.December 18th, 2005 at 10:32 pm
‘this’ in what context, at the event handling function? Like this line:
altStyles.currentStyle = this.href;
Whatever function handles event action has access to the object that fired the event by using ‘this’? I thought that was what “e” or “window.event” was for, no?
Forgive me, I’m just curious. I have been using a funky method I came up with on my own to capture the clicked object, but I like being able to use ‘this’, that’s the way to go for sure.
December 19th, 2005 at 12:09 am
Justin,
in the olden days (yea, I say that now), I use to use a function called
getEventSrc(e), and I would assign that to a variable and pass that off as if it were ‘this‘. But then I discovered the ways around that and have ever since loved it! And that’s what I do now…and so should you. It’s quite dandy.January 4th, 2006 at 12:01 am
Looks Great. Can you use flash to change the stylesheet with this method? If I use a getURL still flashes and reloads the swf.
January 11th, 2006 at 3:04 am
Hey Dustin, great work here. I wanted to point out that you can preserve `this` with Prototype’s `Event.observe` by using `bind`.
Event.observe('ele', 'mousedown', this.onPress.bindAsEventListener(this));
January 18th, 2006 at 2:17 am
[...] d personal diary of Saint UDASSS Official Documentation UDASSS Official Documentation Style switcher with AJAX This entry was posted [...]
January 19th, 2006 at 9:45 am
If that’s what your site uses, it doesn’t work with Mozilla Suite 1.7.12
If you can get it to be completely cross browser compatible, I might use it :)
January 19th, 2006 at 10:48 am
Chris. It is in fact Cross-Browser… you’re just seeing the result of not being on the correct host name which introduces a small problem. Try visiting http://www.dustindiaz.com and not http://dustindiaz.com
January 20th, 2006 at 11:32 am
how to support IE5.2.3 Mac, addEvent does not addLoadEvent does
January 21st, 2006 at 1:05 am
Jay, having expressed my feelings about IE5 before… I’ll remind you that I could care less about IE5 anymore. I would also suggest that you stop supporting it too. It’s just not worth it DOM-wise.
January 21st, 2006 at 4:52 pm
what about IE hacks in IE7 when they are fixed?
How to write IE proof hacks with IE comments, with php?
January 24th, 2006 at 2:06 am
how could you do this?!
You are so wierd…
it wulod look lkie tihs if i kenw how to wrtie cdoe.
January 25th, 2006 at 4:34 pm
holy cow! this is great stuff! I’ll add UDASSS support to my Binary Blue AJAX based WP2.0 theme tomorrow - this solution is EXACTLY what I was looking for to enable visitors to switch between the different schemes.
Thanxalot for this great unobtrusive solution!
February 3rd, 2006 at 7:42 am
Great solution this.
Thanks for the script!
not sure I have found a bug or not?
When I hold down the control key and use the mouse wheel to increase/decrease text size, the whole of IE version 6 shuts down, with an unexpected error message? (I am on Windows XP SP2)
I can send you an example link?
Cheers
Ben
February 8th, 2006 at 6:02 pm
[...] With the above code, we’ve now trimmed out URL’s that would have looked like this: http://www.dustindiaz.com/udasss/ http://dustindiaz.com/sweet-titles/ http://www.dustindiaz.com/downloads/ajax-contact.zip to look like this: [...]
February 9th, 2006 at 11:20 am
Dustin, I’m getting conflicting styles with this.
Here’s steps to reproduce (I’m on Firefox/Win):
1. Choose a style other than default, like say: Big and Zoomed
2. Leave your site and then come back
3. Choose yet another different style, like: Design Free
4. Leave the site and then come back.
5. Look at your cookies, you’ll have two different entries for the Preferred Styles.
ps. the button text (for comments) is illegible on Big and Zoomed.
February 15th, 2006 at 9:18 pm
I love UDASSS! I just have one request. Is there a lighter way to get the AJAX in there? prototype.js is the largest single object in my page and twice as large as the rest of the non-image objects combined! That seems excessive for a style-sheet switcher, and I don’t have any other use for the prototype functions. Thanks for the great technique anyway. If I had better skills I would write my own AJAX calls I guess.
February 15th, 2006 at 11:15 pm
@Doug: YES! Your request will be fulfilled with the new release of the YUI libraries. Expect a newer version coming real soon.
February 16th, 2006 at 12:22 am
[...] It’s been a solid run for almost two years but ever since Marketing (or so it appears) got their hands on my hosting, they’ve been offering a whopping terabye of disk space and 2 terabytes of data transfer per month. Um. Right. Or so they say. Not too much longer after that little fiasco I began experiencing several timeouts, 500’s (Internal Server Errors) and loss of database connections. They may have a 99.998% uptime aggregate, but that doesn’t include the amount times things just don’t work. However that wasn’t even the end of it. At one point I lost about 12 hours of data (the case of the dissappearing comments) from my database and I was never even informed through an email that this happened. On more than 10 occassions (I can honestly say 10) my stats broke and they failed to record some hi-level days. I was looking forward to seeing how well UDASSS would fair on the day after its launch but to my unfortunate haphazard my host reported zero hits and zero visitors and claimed all statistics were accurate during those times. Bull caca-doohicky. [...]
March 2nd, 2006 at 10:08 pm
[...] Integrated UDASSS-based scheme switcher support [...]
March 16th, 2006 at 1:47 pm
i can use this for styleswitching, but if i just want to increase font-size will it be able to handle this ?
anyway - great!
March 23rd, 2006 at 8:25 pm
I’ve been trying out UDASSS on a site I’m working on and found that the styles weren’t ’sticking’ when changing pages; it would always revert back to the default. So I came back here to check your site out and found a similar problem. I’m using FF 1.5 on Windows and find that sometimes the style will revert back to the previously chosen one when changing pages.
March 24th, 2006 at 12:42 am
John,
that’s interesting. You’re actually having problems on this very site getting the styles to ’stick’? I’ve tested this on Safari and Firefox 1.5 (win & mac) and haven’t had that issue.
Question: What are your security settings, and more specifically, your cookie settings? Without proper cookie settings, then you won’t get the “consistent styles” from page to page.
March 24th, 2006 at 3:04 am
Just tried again on my home PC (same browser & OS) and I’m getting the same results. Not sure what the proper settings should be but mine are set to accept cookies from sites. I’ve got six different ones from your site:
PrefStyles Big+and+Zoomed /download/
PrefStyles Default+Theme /about/
mmtmpsess1660 true /
mmsession1660 45475544 /
mmrepeat1660 true /
PrefStyles Handheld+Devices /
May 12th, 2006 at 12:10 am
This is a great script! I’ll have to use this soon!
May 13th, 2006 at 8:09 pm
hi, i’m having an issue with the UDASSS on my web page, which already has php in the top of the page. I get this error:
Cannot modify header information - headers already sent by (output started at C:\Program Files\xampp\htdocs\blog\functions.php:12) in C:\Program Files\xampp\htdocs\blog\utils\style-switcher.php on line 73
Any help would be greatly appreciated.
Thanks!
Will H
May 21st, 2006 at 10:36 pm
[...] One common complaint you might hear about YUI is that everything is YAHOO.foo.bar.MyDaddyCanBeatUpYourDaddy. Fair enough. It’s not quite as sexy looking as the dollar symbol - but in practicality, it’s for your own good. You really should be thanking the team that they’ve done that for you since it is very unlikely that Yahoo! code is ever going to clash with yours (ok, no need to “thank,” but just know that it’s a good thing). It allows for better code organization and it keeps a visual hierarchy of how the libraries are laid out. If it’s a utility, expect it to live under YAHOO.util, if it’s a widget (not to be confused with Konfabulator), expect to find it under YAHOO.widget. Likewise if has something to do with Ajax, expect to locate it under YAHOO.util.Connection. Make sense? Unlike Prototype.js, you may have to worry about collisions such as Event, Element, or Ajax; all of which live under the global namespace. But I’m sure that’s nothing Sam Stephenson hasn’t got flack for before - not to mention it doesn’t stop people from using it anyway. Indeed, I’m still using Prototype for my UDASSS script, but soon enough, I will be changing my ways. All in all, the choice is up to the developer. Use what you’re most comfortable with. [...]
June 22nd, 2006 at 8:04 pm
Hi there Dustin! Thanks for your brilliant piece of code here. I’ve struggled as of late to find a proper way of switching styles and storing them in a nice cookie. Your solution is the one that actually works on all of my pages on my current project.
I only have one issue with it - print styles. Despite defining two of my css-files as ‘print’- media, they totally replace the current stylesheet once clicked upon.
Do you have any hint or clues on where to look, in order to make it work with print styles as well and keep the screen styles intact?
Cheers and thanks. Good job!
July 19th, 2006 at 11:33 pm
Dustin,
Thank you for a style switcher that works AND is easy to implement. Sweet.
The WebDom
August 5th, 2006 at 6:18 pm
Hey buddy.
I’ve setup your script on my website right. Works fine in Firefox.
IE7 no go. nooooooo go at all.
You click blue green or black, and it takes off the current sheet, doesnt put the new one on. I’ve gone back and forth copying code exactly from the example but still no luck.
If you got a minute to take a look that’d be great.
My site: http://notorius.bounceme.net/axxx
Pastebinned Index.php: http://papernapkin.org/pastebin/app/view/694
Any advice would be great buddy.
August 5th, 2006 at 6:44 pm
@All: I received an email with a confirmation that the script works as intended when upgrading to the latest version of Prototype.js
August 28th, 2006 at 11:07 am
[...] I am surprised I missed this beauty! Posted Sunday, December 18th, 2005… this Unobtrusive Degradable Ajax Style Sheet Switcher from our loveable web developer Dustin Diaz is a must have for your css swapping requirements. Thanks for sharing this with us Dustin! [...]
October 6th, 2006 at 12:33 pm
I have been having trouble with your style switcher in Internet Explorer. My first style sheet has an element with display: none; when I switch to the version without display: none; it creates a glitch and fails to display the whole div that the undisplayed div is nested in.
November 28th, 2006 at 2:25 pm
I just found your cool tool and wanted to implement it into the forum software I am using called Vanilla. I tried to follow your instructions and thought I had it right. I am trying to build your stuff into an add-on for Vanilla. But I get these 2 errors:
Notice: Undefined index: css in D:\Program Files\xampp\htdocs\Vanilla.1\extensions\udasss\default.php on line 27
which corresponds to your code:
$this->prefStyleSheet = $this->cleanTitle($_GET['css']);
and then the same error for PrefStyles. Do you have any idea what would cause this?
Thank you, jim
February 22nd, 2007 at 12:19 pm
[...] I am surprised I missed this beauty! Posted Sunday, December 18th, 2005… this Unobtrusive Degradable Ajax Style Sheet Switcher from our loveable web developer Dustin Diaz is a must have for your css swapping requirements. Thanks for sharing this with us Dustin! [...]
March 4th, 2007 at 12:25 pm
[...] I FINALLY have a working version of my UDASS plugin on my site. And I’ve replaced it with the theme switcher I just setup, I might bring the theme switcher back but I don’t want to distract from this nor confuse people. [...]
June 26th, 2007 at 11:46 am
Hmmm, how do I get this to work through page changes? It works fine on the one page, but when I change to another it just resets. :(
July 2nd, 2007 at 5:02 am
Thank you, this looks and behaves wonderfully on your site. I look forward to using it myself :D
September 1st, 2007 at 5:47 am
The examples of UDASS look good, but the switcher you used on this page behaves differently than all of the UDASS examples. Are you using UDASS on this page? If not, what are you using, I really like the way it fades into the alternate stylesheet. Thanks.
September 10th, 2007 at 4:27 pm
Only works on one page - totally useless for a website - no, I do not expect my visitors to keep clicking that with every page they visit
Sorry dude, but its useless…
October 22nd, 2007 at 2:04 am
[...] I have implemented a style sheet switcher called UDASSS into my website what this little gem does is set a cookie so that when the style sheet is changed all of the other pages use the same style sheet. [...]
December 30th, 2007 at 8:17 am
Hi. I’m using UDASSS on the new version of my site, thank you it’s just what I was looking for! Or so I thought until I actually had already taken it into use.
As a usability professional, there is a key problem with the UI: the user probably isn’t aware of the status of the font sizer much longer after they’ve clicked the ‘bigger’ link. The UI isn’t at all communicating to the user - at least not if there are only three options as in the default - that actually the resizing buttons only allow to enlarge/reduce font size once. “Visibility of system status” in the pretty much de facto heuristics:
http://www.useit.com/papers/heuristic/heuristic_list.html
As the font size is persistent across a site as it should be, we shouldn’t expect the user to remember which size they have selected n pages back, nor whould we expect that the user is smart enough to try the other buttons to realize what is the problem if they should try to further increase/decrease the size beyond what is possible.
To fix this, UDASS could add (both in php and in javascript) an additional class, say “activeStyle”, to the link which points to the active style, so we can highlight the active one and perhaps even make it a non-link since it indeed does nothing. I tried to start to implement this myself but it seemed like I would have to change too many things and it would probably be easier for someone who already knows the code. This would be a simple solution, but doesn’t actually address the issue in the basic idea of UDASSS.
If we display the font size status, the user will realize what is the problem: they can’t resize the font further since it is in the maximum setting. In fact, the best solution would be to not limit the sizes available (heuristics “User control and freedom”, “Consistency and standards”), Just as the browser controls do on at least the better browsers.
You could argue that you only need a certain amount of predefined font sizes. However, which are the ones users actually need depends on the site, the user’s special needs and the device in use. If they press the “bigger” button again, it should indeed make the font bigger even if it has already been resized on a past page.
However, to implement this, the overall logic would have to be changed; to not think of font sizes as something that belongs to the site-wide stylesheet (since are meant to be static, even though potentially switchable). Instead, the actual size of the fonts would be stored in the cookie, displayed as inline CSS of the body tag, and added/modified in php and js. I hear you shouting “inline styles are heresy!” already, but due to the reasons stated above, inline styles would be the only right place for this. The only downside, and I’m not sure it is one, is that the browser isn’t aware of the active size as it currently is (of the active alternate style). Optimally we could just alter the browser’s font size setting from javascript, but this would pretty much make UDASS useless :).
During tweaking, I made some styles to make the swither semantically correct (though I’m not sure if the list should be ordered or not) and look more like command buttons that they are, than links. Thought this might come in handy for others.
div#fontSizer a{
text-decoration:none;
border:0.05em solid white;
padding:0 0.2em 0 0.2em ;
}
div#fontSizer ul{
display:inline;
list-style-type:none;
margin:0;
padding:0;
}
div#fontSizer ul li{
margin:0;
padding:0;
display:inline;
}
Also, something for the current implementation: as the PHP portion of the script uses get parameters on the current page, and a) we don’t necessarily know the current page b) we may need to preserve the other get parameters, I made the following PHP function which accepts an array of keys and values and returns the current URL with the get parameters added. Might be smart to include something like this in UDASS?
function generateCurrentUrl($parameters){
$result_array=array();
$result=$_SERVER["PHP_SELF"];
$result_array=array_merge($_GET,$parameters);
if(count($result_array)){
$result.=”?”;
$count=0;
foreach ($result_array as $key => $value){
if ($count!=0){
$result.=”&”;
}
$result.=”$key=$value”;
$count++;
}
}
return $result;
}
You would use it like this with UDASS, for example:
echo generateCurrentUrl(array("css"=>"bigger"));
Oops, looks like I got a bit carried away :).
January 1st, 2008 at 4:29 pm
Hi,
It seems that UDASSS doesn’t tolerate any other GET parameters in the url except its own in the url? If the page already has GET parameters, I get the below in firefox error console. If I remove the parameters, it works.
Error: styleHalves[1] has no properties
Source File: http://www.pilpi.net/!res/udass/js/alternateStyles.js
Line: 38
March 19th, 2008 at 9:24 am
Did not work as hoped for me.
I found that the stylesheet with the largest font size was the default.
Also the code snippit
drop();
?>
froze the switching.
Almost worked.
I look forward to the next version.