Forums

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.

jurotek

I think because of the difference in text amount in each div you have to set the height based on tallest div


.grid .post{
width: 150px;
    height:500px;
float: left;
margin: 0 0 30px 0;
padding: 0 5px 0 0;
}

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 : /

Hompimpa

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/

treehouse : what would you like to learn today?

Forums

Grid View / List View featuring Masonry