Grid View / List View featuring Masonry

[dnnot]

hi everyone,
i’m sitting on this problem since 2 days.
http://jsfiddle.net/DSk8D/

first problem:
why there is a big whitespace below the 1st Item of the grid-view? (maybe a css prob?)

second problem:
i want to implement jquery.masonry with the grid view but the jquery hook is wrong $(‘#products.grid‘).masonry({ ?
only on refresh it works a bit – eh strange, maybe a cookie problem? i tried so many things but nothing worked.

I will be very thankful for help.
Sorry if it is in the wrong category.

[Cwapface]

As far as your first problem, you do have a bottom-margin set to 50px, which causes that whitespace below.

.view {

margin: 0 0 50px 0;

}

I am not very familiar with your masonry grid jquery plugin, but I will look into it. Maybe someone experienced with it will answer your question before I get back.

[dnnot]

sorry, maybe I misspelled something . I mean the whitespace below the h1 of the red face ape.

[dnnot]

sure, but a fixed height is not a good solution for it, if i have more content as the fixed height : / (the height could change by different lengths of blog-articles)

[wolfcry911]

You haven’t linked to the masonry plugin. The whitespace is how it renders with normal floats ( a float can’t be higher than a previous float by default).

[dnnot]

its linked in “Manage Resources” (3) (http://jsfiddle.net/DSk8D/)
https://raw.github.com/desandro/masonry/master/jquery.masonry.js

[wolfcry911]

my error, sorry. the rendering was standard css as if masonry wasn’t being applied

[dnnot]

ah ok thank you, now I know it is a javascript problem.
i must find a way to implement masonry correctly at the beginning and not after refresh : /

[Taufik Nurrohman]

Should work with reload and destroy method. But I check the console then show some errors :

cannot call methods on masonry prior to initialization; attempted to call method 'reload'

cannot call methods on masonry prior to initialization; attempted to call method 'destroy'

http://jsfiddle.net/tovic/DSk8D/240/

[Author]

Posts