Is there a web2py plugin which lays out divs in a neat grid?

125 views
Skip to first unread message

Spokes

unread,
Jun 9, 2014, 1:41:46 PM6/9/14
to web...@googlegroups.com
Is anyone aware of a web2py plugin which can take a bunch of divs (let's say, of the same class name) and lay them out, in sequence, in a neat grid? I'm looking for something like the following jquery plugin: http://vnjs.net/www/project/freewall/. Thank you.




Derek

unread,
Jun 10, 2014, 2:02:15 PM6/10/14
to web...@googlegroups.com
There's nothing preventing you from using freewall. What troubles have you had with it?

Spokes

unread,
Jun 10, 2014, 10:31:12 PM6/10/14
to
It's a good plugin, and it seems to work fine with a page that is being loaded or refreshed in a standard sense. However, my page has a scroll feature in which the #content div's contents are updated (i.e. replaced through an ajax call to a controller function that performs db queries and returns a bunch of divs/cells which are not neatly arranged) - when this scroll feature is utilized with freewall, you can see the cells (which contain images) being shifted around within the #content div into a grid arrangement. It's sort of a cool animation-like effect, but I'm not sure that I want it for this page. It would be great if I could just generate the grid server-side, but for that, I guess I'd need to know the heights of the individual cells/divs, and those heights are variable and not set in advance (i.e. no styling is applied); in other words, apparently this is technically unfeasible.

Derek

unread,
Jun 11, 2014, 1:51:01 PM6/11/14
to web...@googlegroups.com
Ah, I use a different plugin for my website. You can animate or not, that's entirely up to you. Just a note that if you are animating, your animations should be much smoother if you use tweenmax.

The grids plugin is called Masonry. http://masonry.desandro.com/

The animation engine is Tweenmax. http://www.greensock.com/tweening-speed-test/



On Tuesday, June 10, 2014 7:31:12 PM UTC-7, Spokes wrote:
It's a good plugin, and it seems to work fine with a page that is being loaded or refreshed in a standard sense. However, my page has a scroll feature in which the #content div's contents are updated (i.e. replaced through an ajax call to a controller function that performs db queries and returns a bunch of divs/cells which are not neatly arranged) - when this scroll feature is utilized with freewall, you can see the cells (which contain images) being shifted around within the #content div into a grid arrangement. It's sort of a cool animation-like effect, but I'm not sure that I want it for this page. It would be great if I could just generate the grid server-side, but for that, I guess I'd need to know the heights of the individual cells/divs, and those heights are variable and not set in advance (i.e. no styling is applied); in other words, apparently this is technically unfeasible.

On Tuesday, June 10, 2014 1:02:15 PM UTC-5, Derek wrote:

Spokes

unread,
Jun 12, 2014, 9:40:41 PM6/12/14
to web...@googlegroups.com
Thanks, Derek. I'd like to not animate at all, and I've adjusted freewall's settings accordingly, to no avail. The animation effect only happens under particular circumstances (i.e. when the page is updated with an ajax call, rather than refreshed or loaded through a link), which makes me suspect that the "animation" in this particular case is a side-effect of the plugin's basic functionality, and something is going slightly screwy.

I tried masonry (that was actually the first one I tried), and there was some issue with that as well, but that was in the early stages of development, and I've since made some fixes to the site, so perhaps it's worth another look...

Derek

unread,
Jun 13, 2014, 4:01:17 PM6/13/14
to web...@googlegroups.com
Well, if you run into issues with masonry let me know, I'll try to help you out.

Spokes

unread,
Jun 13, 2014, 5:42:28 PM6/13/14
to web...@googlegroups.com
Just tried Masonry again, and it works like a charm! I guess whatever fixes I've applied since I first tried it have made it easier for the plugin to do its arrangement function. Thanks again!
Reply all
Reply to author
Forward
0 new messages