Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Isotope not applying layout. Inheritance the issue?
    primarykey
    data
    text
    <p>I'm having trouble getting the loop to align in the classic Masonry style layout with the jquery Isotope module.</p> <p>All browsers are loading the script fine in console, but the attributes don't see to be working at all. The alignment for the .item class div elements are all right up the left side and stacked horizontally.</p> <p>Does Wordpress have some kind of inheritance blocking it from working? I'm trying this on the default TwentyTwelve theme for wordpress with no other plugins, but it is in a positin:fixed; div wrapping it to the lower 50% of the page.</p> <pre><code> &lt;script type="text/javascript" src="http://&lt;?php echo $_SERVER[HTTP_HOST]; ?&gt;js/jquery.isotope.js"&gt; $(document).ready(function(){ $('#container').isotope({ $container.isotope({ itemSelector:'.item' }); masonry: { columnWidth: 20 }; }); &lt;/script&gt; </code></pre> <p>Followed by the calls to html:</p> <pre><code> &lt;div id="container" &gt; &lt;div class="item"&gt; &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt; &lt;?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); }?&gt; &lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="&lt;?php the_ID(); ?&gt;" title="Permanent Link to &lt;?php the_title_attribute(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt; &lt;?php the_excerpt(); ?&gt; &lt;?php endwhile; endif; ?&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>With these applicable CSS attributes, which I'm thinking shouldn't be the problem...</p> <pre><code> #container { position:relative; } .item { width:50px; height:auto; border:1px; } </code></pre> <p>A live example for where it is now is here: justingaskin.com</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload