another jquery issue using jquery masonry WordPress

enodekciw comments:

now your markup looks like this:
<div class="box homepagebox">
<h2>Projects</h2>
<ul>
<li class="page_item page-item-337">...</li>
<li class="page_item page-item-339">..</li>
</ul>
</div>
<div id="grid">
<div id="sort">
<div class="box">
.....
</div>
</div><!-- #sort -->
</div><!-- #grid -->

Try removing that 'box' class from first element. It'll fix your grid layout but homebox will be out of the grid. So if you still want that home box to be into the grid, your markup should look something like this:

<div id="grid">
<div id="sort">

<div class="box homepagebox">
<h2>Projects</h2>
<ul>
<li class="page_item page-item-337">...</li>
<li class="page_item page-item-339">..</li>
</ul>
</div>

<div class="box">
.....
</div>
</div><!-- #sort -->
</div><!-- #grid -->


You have to have that div into #sort, to get it into grid.

enodekciw comments:

important: Btw, in that second code snippet 'box' class is needed again! Because your masonry script is placing elements with that exact class - 'box'. So in conclusion:
remove 'box' class from element with class 'homebox'. If you're not happy with that result - look at second code snippet i've pasted.

I hope this helps! ;)

Dave Smith comments:

ok so i need to use the second solution, with the nav in the grid. However, I've edited the index.php file and that's not worked:
<?php get_header(); ?>

<div class="wrap">
<div id="grid">
<div id="sort">
<div class="box homepagebox">
<h2>Projects</h2>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
</div>
</div><!-- #grid -->
</div><!-- #wrap -->
<?php get_footer(); ?>

am i missing something?

thx!

Dave Smith comments:

edit: just removed the homepagebox div code from index.php and put it in loop-index.php inside the "sort" div... still no joy...

enodekciw comments:

jQuery('#sort').masonry({
animate: true,
itemSelector: '.box'
//easing: 'linear'
},
function() { jQuery(this).css({
margin: '10px'
});
});


removed columnWidth parameter. Try it. If this won't work - try setting different values, but not auto. Like this (just test with 300 or so):

jQuery('#sort').masonry({
columnWidth: 300,
animate: true,
itemSelector: '.box'
//easing: 'linear'
},
function() { jQuery(this).css({
margin: '10px'
});
});


Dave Smith comments:

bingo. removing it worked, although ironically that was the last bit of code fix i got on this site!!

thanks for your help.