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?

score 3 · Accepted Answer · answered Feb 27 '11 at 23:31

3

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.

answered Feb 27 '11 at 23:31

BJ Safdie

3,399
23
23

1

Even better, just use something that's already in your markup: ``. Then just drop the `#gridContainer` qualifier. – Matthew Scharley Feb 27 '11 at 23:33

Kieran Andrews · Answer 2 · 2011-02-27T23:29:17.093

-1

Have you thought of changing the stylesheet on the fly?

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

edited Feb 27 '11 at 23:29

answered Feb 27 '11 at 23:18

Kieran Andrews

5,845
2
33
57

1

I think this jQuery switcher looks a lot more concise. http://frinity.blogspot.com/2008/06/switch-css-stylesheets-using-jquery.html – BJ Safdie Feb 27 '11 at 23:38

JQuery 960 fixed / fluid switch?

2 Answers2