0

I'm using drupal for a website and I've created a grid with the View module to display my nodes.

Can I dynamically change the number of columns of my grid with javascript according to the browser width ?

At the moment I can only specify it in the back-end.

thanks

aneuryzm
  • 63,052
  • 100
  • 273
  • 488

4 Answers4

2

Why bother with the extra overhead, and it'll break if they disable javascript? We had this same problem with displaying employee pics.

Rather than the view display style grid, use the view display style Unformatted. Then in firefox use the firebug plugin to inspect the div containing your content and add a float:left; style for that.

Example:

div#content div.view-display-id-page_4 div.views-row { 
 float: left; // floats left so they fit the space
 margin: 0 20px 20px 0; // gives them breathing room
 position: relative;
 width: 150px; // or whatever you need for your content
 height: 250px; // or whatever you need, prevents 'stacking' elements
}

It flows with the browser width, and there's no extra overhead.

Stay-at-home-dad
  • 876
  • 3
  • 12
  • 27
1

I've solved with this wonderful jquery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/

aneuryzm
  • 63,052
  • 100
  • 273
  • 488
0

You can rewrite the DOM as much as you like with javescript. You can do almost anything with JavaScript. Detecting browsers can be a bit tricky though, but this is not related to Drupal or the Views module.

googletorp
  • 33,075
  • 15
  • 67
  • 82
  • do you know where I can find a dynamic columns javascript script (if necessary, otherwise just css) ? These are the features I need: 1) the columns width is fixed 2) the columns number depends on the window width 3) the elements has not fixed height 4) the content should be possibly vertically distributed – aneuryzm Feb 21 '10 at 16:34
0

I was just looking into this myself - I believe this does what you want: http://drupalcontrib.org/api/function/cck_gallery_preprocess_node/6

Nevermind, I see you want to do it via JS, not PHP.

Justintime
  • 269
  • 2
  • 6