Home:ALL Converter>Changing div layout with javascript

Changing div layout with javascript

Ask Time:2012-09-22T05:10:58         Author:user1689870

Json Formatter

I am new to the 960 grid and adaptive.js.

I understand the concepts and have successfully implemented the 960 grid. My problem is that I am not understanding how to implement the "adaptive" part.

Here is my code

<div class="container_12">
       <div id="container1" class="grid_3"></div><!--end grid_3 -->
       <div id="container2" class="grid_7"></div><!--end grid_7 -->
       <div id="container3" class="grid_2"></div><!--end grid_2 -->
</div><!--end container>

This works great for 1200.css, but for 960.css I would like container2 to be a grid_9 and container 3 to drop to the next "row" and be a grid_12: see this image: [adaptive example] https://docs.google.com/open?id=0BzR0r0y6_XGgMHZQNm9kcDJvNFU

<div class="container_12">
       <div id="container1" class="grid_3"></div><!--end grid_3 -->
       <div id="container2" class="grid_9"></div><!--end grid_9 -->
           <div class="clearfix"></div>
       <div id="container3" class="grid_12"></div><!--end grid_12 -->
</div><!--end container>

I know adaptive can do style overrides,

.foobar {
   /* Default styles here. */
 }

html.range_0 .foobar {
   /* Style overrides for: 0px to 760px */
}

html.range_1 .foobar {
  /* Style overrides for: 760px to 980px */
}

but this won't work, right?

Any guidance is much appreciated.

Thanks.

Author:user1689870,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/12538202/changing-div-layout-with-javascript
yy