Swap CSS

Presumably, the easiest way to do this would be to have some session value, or an instance variable, hold the stylesheet choice and reference that in the layout…

<%= stylesheet_link_tag “#{session[:stylesheet]}” %>

Your button, when clicked, would simply update this session value.

PGP.sig (186 Bytes)

Perhaps #{params[:style]} may work better as you can link to it quite
easily.

Long

But if we’re talking about a stylesheet applied to a layout used in all pages of the app, wouldn’t params make things a little tricky?

PGP.sig (186 Bytes)

You could set it in a cookie too, so that the user gets his choice of
styles back automatically.

But if we're talking about a stylesheet applied to a layout used in all pages of the app, wouldn't params make things a little tricky?

It'd make it very tricky.

I'd say have a StylesController with a 'switch' method

class StylesController < ApplicationController
   def switch
     if params[:style]
       session[:stylesheet] = params[:style]
     end
   end
end

Then a nice route:

map.connect '/style/switch/:style/'

to make urls like this:

/style/switch/print
or
/style/switch/large_text

Then in the layout:

<%= stylesheet_link_tag session[:stylesheet] || "my_default" %>

As long as you name your stylesheets print.css or large_text.css they'll be picked up. If nothing is specified, your default stylesheet will be loaded.

Hope that helps,

Steve

The nice way to do this IMHO is to use alternate style sheet tags and a little js to set a cookie. That way you can switch the stylesheet without reloading the page. Something like this:

In the head of your layout:

   <link href="/stylesheets/main.css" rel="stylesheet" type="text/css" title="main" />
   <link rel="alternate stylesheet" type="text/css" href="/stylesheets/print.css" title="print" />
   <link rel="alternate stylesheet" type="text/css" href="/stylesheets/largetext.css" title="largetext" />
   <script type="text/javascript" src="/javascripts/style_switch.js"></script>

The links to change the stylesheet:

<a href="#" onclick="setActiveStyleSheet('main');return false;">Main</a>
<a href="#" onclick="setActiveStyleSheet('print');return false;">Print</a>
<a href="#" onclick="setActiveStyleSheet('largetext');return false;">Large Text</a>

And the style_switch.js file:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

function getActiveStyleSheet() {
   var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
   }
   return null;
}

function getPreferredStyleSheet() {
   var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("rel").indexOf("alt") == -1
        && a.getAttribute("title")
        ) return a.getAttribute("title");
   }
   return null;
}

function createCookie(name,value,days) {
   if (days) {
     var date = new Date();
     date.setTime(date.getTime()+(days*24*60*60*1000));
     var expires = "; expires="+date.toGMTString();
   }
   else expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
   var nameEQ = name + "=";
   var ca = document.cookie.split(';');
   for(var i=0;i < ca.length;i++) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1,c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
}

window.onload = function(e) {
   var cookie = readCookie("style");
   var title = cookie ? cookie : getPreferredStyleSheet();
   setActiveStyleSheet(title);
}

window.onunload = function(e) {
   var title = getActiveStyleSheet();
   createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Cheers-
-Ezra

Hmm, you are right. I got a bit ahead of myself there.

The approach I would take is to add a before_filter. It would
check params for a "new" style and set the value in the session,
like you've suggested.

Now one can construct links to switch styles with ease.

Long