} I'd like a button that will reload the current controller/action/view } but with an alternative CSS (eg, Print Version and Large Text Version). } } Has anyone done this in Rails and if so are you able to provide me with } your code?
This is the wrong approach, both for efficiency and for the convenience of the user. It is preferable to serve up CSS only once and have the client browser cache it, even if that means sending more CSS the first time. Within reason, it is worthwhile to trade larger data sends for fewer HTTP connections (i.e. send more CSS at once so you don't have to send another chunk later).
The way to go about this is to have all of your CSS rooted at body.class_name and have a different class name for each style. Changing styles can be done in JavaScript by just changing the class of the body tag, which improves the user experience as well (no page refresh to get a new style).
Of course, to work with browsers that have JavaScript turned off (and to support saving a user's preferred style) you need to have the class="class_name" of the body tag in a conditional in your view, and grab that class_name from the params, the session, or stored user data. Your "change style" link/button/whatever needs to do a page refresh with the right style param unless JavaScript intervenes and just changes the body class on the fly.
To make this clearer, I'll give an example:
<html><head> <title>Foo</title> <script src="javascripts/prototype.js"></script> <script> Event.observe(window, 'load', function() { var select = $('style_choice'); var body = document.getElementsByTagName('body')[0]; $('hideme').className = 'hidden'; Event.observe(select, 'change', function() { body.className = select.value; }); }); </script> <style type="text/css"> .hidden { display: none; } #content { /* default theme */ background-color: #EEEEEE; color: black; width: 20em; padding: 3ex; text-align: center; } body.green_theme #content { background-color: #99FF99; color: black; } body.blue_theme #content { background-color: #9999FF; color: black; } body.christmas #content { background-color: green; color: red; }
</style> </head><body>
<div id="content">The quick brown fox jumps over the lazy dog.</div> <form id="change_style"> <select name="style" id="style_choice"> <option value="">Default</option> <option value="green_theme">Green</option> <option value="blue_theme">Blue</option> <option value="christmas">Merry Christmas!</option> </select> <input type="submit" id="hideme" value="Change style" /> </form> </body></html>
Note that the inline CSS should really be in a separate static file. Also note that the JavaScript depends on Prototype. There is a certain lack of cleanliness to this since it's just an example, but I did test it with Firefox.
} Thanks --Greg
