Bricklayer.js: how to use Bricklayer multiple times on the same page?

Question

UPDATE I have added @Alice answser to this code snippet to illustrate why and for what i am using bricklayer. Bricklayer is only modifying the first briklayer but completely ignores the second one, i can understand that since i use querySelector .

But even after adding @Alice's answer, the result is still the same. i have tried masonry but it messes up the layout of my cards. so here i am stuck with bricklayer

here's the modified version.

 $(document).ready(function() { $(document).on('click', '#post-link', function posts(event) { event.preventDefault(); $(this).addClass('underlined'); $('#project-link').removeClass('underlined'); $('#post-card').slideDown(); $('#project-card').slideUp(); }); $(document).on('click', '#project-link', function projects(event) { event.preventDefault(); $(this).addClass('underlined'); $('#post-link').removeClass('underlined'); $('#post-card').slideUp(); $('#project-card').slideDown(); }); }); const bricklayers = [] document.querySelectorAll('.bricklayer').forEach(function (section) { bricklayers.push(new Bricklayer(section)); }); //console.log(bricklayers) 

 .my-title { text-transform: uppercase; letter-spacing: 0.2em; } .underlined { text-decoration: underline; } #project-card { display: none; } .bricklayer-column-sizer { width: 25%!important; } /* @media (min-width: 320px) and (max-width: 480px) { .bricklayer-column-sizer { width: 50%!important; } } */ 

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.css" rel="stylesheet" /> <div id='post-project' class="container"> <div class="my-2"> <h4 class="text-center my-title"> <p><a href="" id='post-link' class="underlined">posts</a> | <a href="" id='project-link'>projects</a> </p> </div> <!-- This bricklayer is for posts --> <div id="post-card" class="bricklayer"> <div class="card bricklayer-item mb-3"> <a href="#"> <img src="https://i.postimg.cc/gjWk2VpS/Pay-Pal-Logo.png" class="card-img-top"> </a> </div> <div class="card bricklayer-item mb-3"> <a href="#"> <img src="https://i.postimg.cc/gjWk2VpS/Pay-Pal-Logo.png" class="card-img-top"> </a> </div> </div> <!-- this bricklayer is for projects --> <div id="project-card" class="bricklayer"> <div class="card bricklayer-item mb-3"> <a href="#"> <img src="https://i.postimg.cc/QN4ysXq5/django-logo.jpg" class="card-img-top"> </a> </div> <div class="card bricklayer-item mb-3"> <a href="#"> <img src="https://i.postimg.cc/QN4ysXq5/django-logo.jpg" class="card-img-top"> </a> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.js"></script> 

any solution ?

Answer 1

Just looking through your code, and your approach is very slightly wrong. With bricklayer, you only need 1 parent which acts as a container element, and is denoted by the classname bricklayer .

• Can you double check that bricklayer is correctly installed and initialized in you app (since that part is missing from your code snippet)
• Next, define a single container element for bricklayer, eg <div class="bricklayer">
• Add a couple of children to your container ( follow this example )

• Finally call to bricklayer, only once .

  eg const bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

Here is a working Fiddle . For more details, see the official getting started guide

Hope that helps. If you can share a little more of your code, or create a Fiddle, I can amend it to get it working for you :)

Answer 2

I have Fixed this problem by switching to salvattore . but you are still free to post a fix to my bricklayer issue for future users. Thank you :D