Databases
StackOverflow2013
Postsdbo
POfilter dynamic data using isotope
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POfilter dynamic data using isotope
    text
    copied!<p>I'm not a expert in JavaScript and need your help. I'm using isotope for a website with pictures <a href="http://strategenundgestalter.de" rel="nofollow noreferrer">http://strategenundgestalter.de</a>, but in the layout is a break. </p> <p>It looks like: <img src="https://i.stack.imgur.com/ewsMJ.png" alt="http://i.stack.imgur.com/2noqf.png"></p> <p>but it should look like: <img src="https://i.stack.imgur.com/kKJVb.png" alt="http://i.stack.imgur.com/09yu1.png"></p> <p>The code I'm using is:</p> <pre><code>if( jQuery().isotope ) { jQuery(function() { var container = jQuery('.isotope'), optionFilter = jQuery('#sort-by'), optionFilterLinks = optionFilter.find('a'); optionFilterLinks.attr('href','#'); optionFilterLinks.click(function(){ var selector = jQuery(this).attr('data-filter'); container.isotope({ filter : '.' + selector, itemSelector : '.isotope-item', animationEngine : 'best-available', layoutMode : 'masonry', columnWidth: '220' }); // Highlight the correct filter optionFilterLinks.removeClass('active'); jQuery(this).addClass('active'); return false; }); }); } </code></pre> <p>When I load the page the default filter is "all" and the layout looks like this. When I click on the filter-button for all the layout is OK. But not after pageload. I must always click on the "all button".</p> <p>Do you see a problem?</p> <p>Oh Sorry. The Html: </p> <pre><code>&lt;?php /* Template Name: Portfolio Template */ ?&gt; &lt;?php get_header(); ?&gt; &lt;!--BEGIN .page-header --&gt; &lt;div class="page-header"&gt; &lt;h1 class="page-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt; &lt;ul id="sort-by"&gt; &lt;li&gt;&lt;a href="#all" data-filter="type-portfolio" class="active"&gt;&lt;?php _e('alle', 'framework'); ?&gt;&lt;/a&gt;&lt;/li&gt; &lt;?php wp_list_categories( array('title_li' =&gt; '', 'taxonomy' =&gt; 'portfolio-type', 'walker' =&gt; new Portfolio_Walker() ) ); ?&gt; &lt;/ul&gt; &lt;!--END .page-header --&gt; &lt;/div&gt; &lt;!--BEGIN #primary .hfeed--&gt; &lt;div id="primary" class="hfeed isotope"&gt; &lt;?php $args = array( 'post_type' =&gt; 'portfolio', 'orderby' =&gt; 'menu_order', 'order' =&gt; 'ASC', 'posts_per_page' =&gt; -1 ); $query = new WP_Query( $args ); while ( $query-&gt;have_posts() ) : $query-&gt;the_post(); ?&gt; &lt;?php $terms = get_the_terms( $post-&gt;ID, 'portfolio-type' ); $term_list = ''; if( is_array($terms) ) { foreach( $terms as $term ) { $term_list .= urldecode($term-&gt;slug); $term_list .= ' '; } } ?&gt; &lt;!--BEGIN .hentry --&gt; &lt;div &lt;?php post_class("$term_list isotope-item"); ?&gt; id="post-&lt;?php the_ID(); ?&gt;"&gt; &lt;?php if ( (function_exists('has_post_thumbnail')) &amp;&amp; (has_post_thumbnail()) ) { ?&gt; &lt;div class="post-thumb"&gt; &lt;a title="&lt;?php printf(__('Permanent Link to %s', 'framework'), get_the_title()); ?&gt;" href="&lt;?php the_permalink(); ?&gt;"&gt; &lt;?php the_post_thumbnail('portfolio-thumb'); ?&gt; &lt;/a&gt; &lt;/div&gt; &lt;?php } ?&gt; &lt;h2 class="entry-title"&gt;&lt;/h2&gt; &lt;!--BEGIN .entry-meta --&gt; &lt;div class="entry-meta"&gt;&lt;?php the_title(); ?&gt;&lt;br/&gt; &lt;span class="entry-portfolio-type"&gt;&lt;/span&gt; &lt;!--END .entry-meta --&gt; &lt;/div&gt; &lt;!--END .hentry--&gt; &lt;/div&gt; &lt;?php endwhile; ?&gt; &lt;?php wp_reset_postdata(); ?&gt; &lt;!--END #primary .hfeed--&gt; &lt;/div&gt; &lt;?php get_footer(); ?&gt; </code></pre> <p>and the css:</p> <pre><code>.page-template-template-portfolio-php #primary, .tax-portfolio-type #primary { width: 100%; } .page-template-template-portfolio-php .page-header, .tax-portfolio-type .page-header { margin-right: 20px;} .page-template-template-portfolio-php .hentry, .tax-portfolio-type .hentry, .tz-recent-portfolios-widget li { background: #fff; border-bottom: none; float: left; margin: 0px 20px 0px 0px; padding: 0px; width: 220px; } .page-template-template-portfolio-php .last, .tax-portfolio-type .last { margin-right: 0; } .page-template-template-portfolio-php .post-thumb, .tax-portfolio-type .post-thumb, .recent-work .post-thumb, .portfolio-related .post-thumb, .tz-recent-portfolios-widget .post-thumb { margin: 0; position: relative; } .page-template-template-portfolio-php .post-thumb a, .tax-portfolio-type .post-thumb a, .recent-work .post-thumb a, .portfolio-related .post-thumb a, .tz-recent-portfolios-widget .post-thumb a { border-bottom: none; display: block; margin: 0px; padding: 0; position: relative; width: 220px; } .page-template-template-portfolio-php .post-thumb-overlay, .tax-portfolio-type .post-thumb-overlay, .recent-work .post-thumb-overlay, .portfolio-related .post-thumb-overlay, .tz-recent-portfolios-widget .post-thumb-overlay, { background-color: #333; color: #fff; display: none; padding: 2px 6px; position: absolute; top: 43%; left: 32%; } .page-template-template-portfolio-php a:hover .post-thumb-overlay, .tax-portfolio-type a:hover .post-thumb-overlay, .recent-work a:hover .post-thumb-overlay, .portfolio-related a:hover .post-thumb-overlay, .tz-recent-portfolios-widget a:hover .post-thumb-overlay, .page-template-template-portfolio-php .hentry .entry-meta { display: block; z-index: 99; } .page-template-template-portfolio-php .hentry .entry-title, .page-template-template-portfolio-php .hentry .entry-title a, .tax-portfolio-type .hentry .entry-title, .tax-portfolio-type .hentry .entry-title a, .recent-work .entry-title, .recent-work .entry-title a, .portfolio-related .entry-title, .portfolio-related .entry-title a, .tz-recent-portfolios-widget .entry-title, .tz-recent-portfolios-widget .entry-title a { font-size: 13px; line-height: 10px; margin: 15px 0 2px; text-align: left; } .page-template-template-portfolio-php .hentry .entry-meta, .tax-portfolio-type .hentry .entry-meta, .tz-recent-portfolios-widget .entry-meta{ font-size: 12px; line-height: 12px; font-weight: bold; margin: 5%; text-transform: uppercase; left: auto; color: #fff; text-align: center; width: 90%; opacity: 0.6; } .page-template-template-portfolio-php .post-thumb a:hover img, .tax-portfolio-type .post-thumb a:hover img, .recent-work .post-thumb a:hover img, .portfolio-related .post-thumb a:hover img, .tz-recent-portfolios-widget .post-thumb a:hover img { opacity: 0.1; } .page-template-template-portfolio-php .page-title, .tax-portfolio-type .page-title { display: inline-block; } #sort-by { float: right; } .ie7 #sort-by { position: relative; top: -20px; right: -18px; } #sort-by li { float: left; padding-left: 0px; margin-left: 7px; } #sort-by li:first-child { background: none; } #sort-by a { border-bottom: none; color: #555; padding: 2px 5px; margin: 0; } #sort-by a.active { background-color: #ffd62c; } </code></pre> <p>Thanks!!!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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