{"id":5934465,"date":"2015-03-24T10:12:34","date_gmt":"2015-03-24T10:12:34","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/overlapping-posts-isotope-bootstrap-and-wordpress\/"},"modified":"2016-08-22T18:23:48","modified_gmt":"2016-08-22T18:23:48","slug":"overlapping-posts-isotope-bootstrap-and-wordpress","status":"closed","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/overlapping-posts-isotope-bootstrap-and-wordpress\/","title":{"rendered":"Overlapping posts – Isotope, bootstrap and wordpress"},"content":{"rendered":"

I have searched the internet for almost 4 hours. And I cannot find a solution to my problem. <\/p>\n

I have got the isotope to work with both bootstrap and wordpress. The thing is that my posts overlap eachother when I refresh my site. The solution to that should be: (window).load, or image load. But when I implement them to my code, the filtering function stops working .. <\/p>\n

My site:
\nHeres my JS (when it works, but overlapping):<\/p>\n

jQuery(document).ready(function ($) {\n\n\tvar $container = $('#isotope-list'); \/\/The ID for the list with all the blog posts\n\n    $container.isotope({ \/\/Isotope options, 'item' matches the class in the PHP\n\t\titemSelector : '.item',\n  \t\tlayoutMode : 'masonry',\n\t});\n\n\t\/\/Add the class selected to the item that is clicked, and remove from the others\n\tvar $optionSets = $('#filters'),\n\t$optionLinks = $optionSets.find('a');\n\n\t$optionLinks.click(function(){\n\tvar $this = $(this);\n\t\/\/ don't proceed if already selected\n\tif ( $this.hasClass('selected') ) {\n\t  return false;\n\t}\n\tvar $optionSet = $this.parents('#filters');\n\t$optionSets.find('.selected').removeClass('selected');\n\t$this.addClass('selected');\n\n\t\/\/When an item is clicked, sort the items.\n\t var selector = $(this).attr('data-filter');\n\t$container.isotope({ filter: selector });\n\n\treturn false;\n\t});\n\n});<\/code><\/pre>\n
Here is my mark up:<\/p>\n
<div class="container-fluid articlewrapper">\n\n        <section class="row">\n            <div class="overskrift2 text-center">\n                <h3>Seneste projekter<\/h3>\n            <\/div>\n        <\/section>\n\n        <section class="row">\n            <div class="col-lg-12 text-center">\n                <ul id="filters">\n                    <li><a href="#" data-filter="*" class="selected">Alle \/<\/a><\/li>\n                    <?php\n                        $terms = get_terms("category"); \/\/ get all categories, but you can use any taxonomy\n                        $count = count($terms); \/\/How many are they?\n                        if ( $count > 0 ){  \/\/If there are more than 0 terms\n                            foreach ( $terms as $term ) {  \/\/for each term:\n                                echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . " \/ " . "<\/a><\/li>\\n";\n                                \/\/create a list item with the current term slug for sorting, and name for label\n                            }\n                        }\n                    ?>\n                <\/ul>\n            <\/div>\n        <\/section>\n\n        <section class="row">\n\n            <?php $the_query = new WP_Query( 'posts_per_page=8' ); \/\/Check the WP_Query docs to see how you can limit which posts to display ?>\n\n                <?php if ( $the_query->have_posts() ) : ?>\n\n                <div id="isotope-list" id="container" >\n                <?php while ( $the_query->have_posts() ) : $the_query->the_post();\n                $termsArray = get_the_terms( $post->ID, "category" );  \/\/Get the terms for this particular item\n                $termsString = ""; \/\/initialize the string that will contain the terms\n                    foreach ( $termsArray as $term ) { \/\/ for each term\n                        $termsString .= $term->slug.' '; \/\/create a string that has all the slugs\n                    }\n                ?> \n\n                    <div class="<?php echo $termsString; ?> item col-xs-12 col-sm-4 col-md-3 col-lg-3" onclick="location.href='<?php the_permalink(); ?>';" style="cursor: pointer;"> <?php \/\/ 'item' is used as an identifier ?>\n                        <div data-content="<?php the_title(); ?>" class="postthumbnail">\n                            <?php if ( has_post_thumbnail() ) {\n                                        $attributes = array('class' => 'post-thumbnails img-responsive');\n                                        the_post_thumbnail('thumbs', $attributes);\n                                } ?>\n                        <\/div>\n                    <\/div> <!-- end item -->\n\n                <?php endwhile;  ?>\n                <\/div> <!-- end isotope-list -->\n\n                <?php endif; ?>\n        <\/section>\n\n        <section class="row">\n\n            <div class="buttonPad">\n\n                <div class="col-lg-4"><\/div>\n\n                <div class="col-lg-4 text-center">\n                    <a href="http:\/\/laerkelyhne.dk\/portfolio\/kontakt\/" class="btn btn-success btn-lg button">Se mere<\/a>\n                <\/div>\n\n                <div class="col-lg-4"><\/div>\n\n            <\/div>\n\n        <\/section>\n    <\/div><\/code><\/pre>\n
<\/a><\/p>\n","protected":false},"template":"","class_list":["post-5934465","topic","type-topic","status-closed","hentry","topic-tag-isotope","topic-tag-overlap"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/5934465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/5934465\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=5934465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}