Oddly stacked masonry tiles in a horizontal layout

After spending more than an hour trying to figure it out, searching and reviewing other solutions, I still haven't been able to resolve my issue.

My problem is with 5 divs, where the third and fourth div are not stacking up as expected. Instead, the last div is stacking on top of the third div.

Check out this link for reference

Here is the HTML structure:


  <div class="isotope js-isotope">
      <div class="item width2 height2"></div>
      <div class="item width2 height2"></div>
      <div class="item width2 width2"></div>
      <div class="item width2 width2"></div>
      <div class="item width2 height2"></div>  
  </div>

And here is the JS code:


var $container = $('.isotope').isotope({
layoutMode: "masonryHorizontal", 
itemSelector: ".boxes", 
masonryHorizontal: { rowHeight: 360 } 
});

The expected behavior was to have the divs stack up differently

Answer №1

Initially, there seems to be an issue with the absence of the jQuery library being utilized. Take a look at your console. An error message stating "$ is not defined" is appearing. It is recommended to enclose your initialization within

 $(document).ready(function(){   INSERT YOUR CODE HERE    });

or some other form of closure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning a div within another div and organizing its elements

Hey everyone, I'm struggling with centering a div that contains two Tumblr posts columns, as shown in the screenshot linked below. I really want it to be centered on the page where there is no sidebar present. Additionally, I'm hoping to get the ...

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

Retrieving CSS file using admin-ajax.php in WordPress

The website has been tested on GTmetrix and you can view the report here I am puzzled as to why admin-ajax.php is causing a delay of over 3 seconds in loading time on this particular page that I am attempting to optimize. It seems to be related to a CSS ...

What is the method by which jQuery achieves synchronous behavior in its $.ajax function?

I previously asked a similar question on Stack Overflow, but I wanted to approach it from a different angle to get more feedback. So far, I haven't found a solution that works for me. I am trying to make XCode execute a JavaScript command and receive ...

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

What is an effective method for coordinating JQuery animations simultaneously?

My current understanding of $("#someElement").animate() is that it will run asynchronously in relation to other JavaScript statements. For example: $("#anotherElement").css("display", "none"); $("#someElement").animate(); //The CSS display may change a ...

A div element without a float property set will not automatically adjust its

Can someone help me with this issue? The left-menu div is not the same height as the main content. I've tried using overflow, but it just adds a scroll bar. I've looked at numerous posts on Stack Overflow, but I can't seem to fix this proble ...

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

For a while now, I've been working on SharePoint Online and trying to troubleshoot an issue without success. That's why I'm considering starting over with a specific section of my SP site from scratch. My current project involves creating a ...

jQuery Summation: A Step-by-Step Guide

Hello everyone, I am a new member of this forum and I am looking forward to learning and contributing with all of you. I have encountered a problem that I tried to solve on my own but couldn't figure it out. Would anyone be able to lend me a hand? H ...

Adjust text to fit within a specified height container automatically

Is there a way to make text resize automatically based on the height and width of its container? I've looked at similar questions but none seem to provide the right solution for me. I tried using fitText, but it doesn't take the container's ...

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

I have been searching online for solutions on how to create a table similar to the one in this image, but so far I haven't had much luck. I attempted to use colspan, however, it didn't yield the results I was hoping for. Does anyone have any alt ...

Swinging text using Javascript/JQuery on the edges of a container

I am looking to create a bouncing text effect within a specific div element (#header). The text successfully bounces off the right side, then reverses and hits the left side. However, the issue arises when it reaches the left side and begins moving right a ...

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

Getting the scroll position of a Vuetify v-table: A guide

Utilizing the Vuetify v-table component to handle a large amount of data, I am seeking a way to read the current scroll position (both horizontally and vertically) of the table during certain actions. Here is what I have attempted thus far: Playground < ...

What is the best way to retrieve the ID of an element using ViewChild in Angular 2 and

How can I establish a relationship between jQuery and ViewChild in Angular 2? I attempted the following code, but it returned an undefined value: @ViewChild('item', {read: ViewContainerRef}) Item; console.log( $(this.Item.nativeElement).attr(& ...

Enrich your HTML using AngularJS

CSS <div class="container"> <section> <p>{{content}}</p> </section> </div> script.js (function () { var script = function ($scope){ $scope.content = "example"; } }()); I am currently ...

Chrome not recognizing Jquery form select option

Hello, I am new to using Jquery and facing an issue with the following scenario: I am trying to create a form select tree where selecting one option triggers another select box to appear. The code works perfectly in Firefox and Internet Explorer, but seem ...

Set the class of the list item to "active" class

My approach to styling involves using a UL and li class to contain form selection options. I plan on hiding the radio button and using its value upon form submission. I have managed to enable checking the radio box when the <li> is clicked, but for s ...

Take action upon window.open

I have a code snippet here that opens a window. Is it possible to make an ajax call when this window is opened? window.open("http://www.google.com"); For instance, can I trigger the following ajax call once the window is open: var signalz = '1&apos ...

Initiating an Ajax POST request when the onblur() event is triggered

Having an issue with Ajax. I'm trying to submit a changed value from an input field on the onblur() event, but there's a flicker that's bothering me. When I enter a new value and click away, the old value briefly flashes back before changi ...