This is an interesting module and I hope to use it to 'jazz up' this page of our company website: http://www.accessadvertising.co.uk/work
However, when I setup this view using Views Quicksand on a test website, I noticed that the Quicksand view rows are output after the main view container div. This means that all the styles targeted at the view rows don't work and that the pager now appears above the view rows.
For reference, this is the structure of the html produced:
<div class="view view-our-work view-id-our_work view-display-id-page view-dom-id-1 views-processed">
<div class="view-header">...Header text...</div>
<div class="view-filters">...Filters...</div>
<div class="view-content clearfix" style="display: none;">... standard rows hidden by Quicksand...</div>
<div class="item-list"><ul class="pager">...Pager...</ul></div>
</div>
<div class="views-quicksand-container">
... Quicksand view rows ...
</div>
I've tried changing where the div views-quicksand-container is output in views_quicksand.js but this just breaks the Quicksand view each time.
My thoughts are that the Quicksand container is output inside the main views div, below the hidden rows and above the pager:
<div class="view view-our-work view-id-our_work view-display-id-page view-dom-id-1 views-processed">
<div class="view-header">...Header text...</div>
<div class="view-filters">...Filters...</div>
<div class="view-content clearfix" style="display: none;">... standard rows hidden by Quicksand...</div>
<div class="views-quicksand-container">
... Quicksand view rows ...
</div>
<div class="item-list"><ul class="pager">...Pager...</ul></div>
</div>
Any thoughts?
Paul
Comments
Comment #1
leschekfm commentedHi,
I waited for someone to notice this behaviour :D
The problem with putting the quicksand container inside the view is that on every ajax request the whole view gets replaced. So the quicksand container would be gone and there would be nothing to compare the new result set against.
Nonetheless I solved this by cloning the pager and appending it to the quicksand container.
Please test the latest dev version and provide feedback.
Comment #2
paul_gregory commentedThat seems to work quite well.
Can I make another suggestion that I think would help with theming. Because the Quicksand rows and the cloned pager sit out side of the View div, there are no view-specific classes wrapping this content. If you have more than one quicksand view on your site it could be difficult to theme them separately.
How about wrapping the Quicksand content in a div with similar classes found on the View div? Example:
Comment #3
Macronomicus commentedthe pager shows but no loger works in the .dev version that has this tweak, but going back to your last release with the pager left alone it works, for me at least.
Im using jquery 1.7 too, not sure if that could be it.
Comment #4
leschekfm commented@macrocosm:
Yes it seems that your jquery version is causing this. I replaced my standard jquery.js with a 1.7 version and the pager stopped working. But I think that is a general problem as there has to be some reason that jquery update only updates to jquery 1.5.2.
@Paul Gregory:
I don't think this is really a problem as you are able to select the views-quicksand-container in combination with it's view using the CSS adjacent sibling combinator.
Comment #5
leschekfm commentedComment #6
bluephx commentedComment #7
bluephx commentedHi,
Simple replace $viewContainer.after = $viewContainer.before in views_quicksand.js
gud luck!
Comment #9
sam152 commentedThe correct fix for this would be to maintain a complete copy of the original view element and keep the quicksand container in the same place in the cloned structure. Then it's a matter of hiding the original and letting the copy take the originals place, with all the correct styles/pagers/themes.
Comment #10
sam152 commentedThis has been fixed. The quicksand container is now a deep copy of the original view.