JQuery 960 fixed / fluid switch?

Question

I'm trying to create a jQuery function which allows a page to switch from fixed to a fluid grid programmatically. So far I haven't been able to get anything working as everything is separated in its own class.

Any suggestions?

Answer 1

Set up a grid container "div" that by default uses, say, fixed layout: <div id="gridContainer">. Define all of your contained classes based on that fixed container.

#gridContainer .foo { ... } and so on.

Next, define a class "fluid" for "gridContainer." Now redefine your styles for fluid layout:

#gridContainer.fluid .foo { ... } and so on.

Now, you can use jQuery to add or remove the "fluid" class from "gridContainer," thus switching out the defined styles.

Answer 2

Have you thought of changing the stylesheet on the fly?

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml