What is the best way to deactivate or remove isotope once the animation has completed?

I have been using the isotope js library to add sorting animations to my div elements. However, I encountered an issue where some of my previously programmed actions are now being affected by isotope.js.

The main problem lies in the fact that the container div on which I applied isotope is now causing interference with my other actions. This interference is preventing me from executing certain functions as intended.

In short, I am looking for a solution to remove the effects of isotope and get rid of it entirely. How can I disable its influence?

Here is the link to my fiddle. After the event occurs, I would like to see the disabling action take place:

Code:

 var $container = $('#container').isotope({
    itemSelector: '.item',
    isResizeBound: false,
    getSortData: {
        weight: function (itemElem) {
            var weight = $(itemElem).find('.weight').text();
            return parseFloat(weight.replace(/[\(\)]/g, ''));
        }
    }
});
// bind sort button click
$('.button').click(function () {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({
        sortBy: sortByValue
    });
});
$container.isotope('on', 'arrangeComplete', function () {
    alert('arrange is complete'); 
    //completely remove isotope effects, somehow disable it,
});

Answer №1

If you're hesitant about removing isotope, consider experimenting with this alternative method by visiting this jsfiddle link:

 $(".buttonz").click(function () {
 var $newItems = $('<div class="item"><p class="weight">7</p></div>');
 $('#container').prepend( $newItems).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });

 });

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

Stylus Vue Vite: The Trio of Global Variables

I'm trying to figure out how to globally import and use stylus variables in my Vue Vite project. How can I achieve this and access the variables within the script section of my Single File Component (SFC)? Below is an excerpt from my Vite config: exp ...

trigger a function when the iframe is altered

I am currently working on creating a function that can process credit card payments using an iframe. The challenge I am facing at the moment is dealing with error messages appearing in a less than ideal manner. Photo: I have been attempting to capture the ...

Animating a div to move up and down upon clicking using jQuery

Looking for a solution with my HTML setup: <div id="one">One</div> <div id="two">Two <br/> <br/> Two </div> <div id="three">Three</div> <div id="four">Four <br/> <br/> Four < ...

What is the process for generating an array of arrays in a React component?

I'm currently working on developing a word-guessing game similar to Wordle using React. The interesting twist in this game is that players have the ability to choose both the number of attempts allowed and the length of the word they are trying to gue ...

Retrieve live JSON data using Node.js

I am currently running an express server with the following code: server.js const express = require('express'); const app = express(); var json = require("./sample.js") app.use("/", (req, res) => { console.log("----------->", JSON.strin ...

Objects saved in an array are still being overwritten

I'm currently tackling the challenge of saving objects in an array, but I'm facing an issue where the data is being overwritten instead of added. Any suggestions? export function onClick(name: string, price: string) { let data = { name: n ...

Updating AngularJS to have the same page TITLE tag as the page's H1 tag

Is there a way to dynamically update the title tag of my page based on the H1 tag in AngularJS? In jQuery, I could achieve this by: var title = $('#content').find('h1').first().text(); if (title.length >= 1) { document.title = ...

Unable to locate module - relative file path

I'm currently running a test with the following code and encountering an error message: Failed: cannot find module '../page/home_page.js The main page consists of: describe("login to website",function(){ var employeeId; var employee ...

If an iframe contains a div with a particular class inside, then execute the following code

I need to dynamically add a class to the parent element if a specific class is present in its child. The issue: the content is within an iFrame and I'm not very proficient with jQuery. It doesn't necessarily have to be jQuery, any alternative m ...

Problem with Jquery token-input not displaying data retrieved from database

I'm currently attempting to populate data from a database using the jQuery token-input plugin available at , but I'm encountering difficulties as nothing seems to show up. Any guidance on where I might be making mistakes would be greatly apprecia ...

Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I'm facing a jquery issue and could use some assistance. I am trying to achieve the following: Add a class "active" to style tags when they are active. Slide up/down vertically within a div (#information - containing "About" and "Contact"). Slide le ...

Dynamic Map Maker with JavaScript

Looking to create a tile map using just one picture for a 5x5 grid of small pictures. I've written some Javascript code with nested loops, but only one picture is showing up. If I remove the br tag in the second loop, I get 5 pictures displayed in a r ...

When the <div> element appears, it should cause the images below to be pushed downward

I have an HTML file where clicking on an image opens a box with text below it using jQuery. Is there a way to push the images under the box down to ensure that the box never covers an image? It needs to be responsive as well. Here is the fiddle link: Bel ...

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

Using Material UI with React hooks

I'm encountering an error while trying to incorporate code from Material UI. The error message is: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. Mismatc ...

How can you select a variable using Jquery?

$.get('sampleurl.com',function(result){ target = $(result #specificID).attr("href") // Can someone help me with this??? }) I fetch content from an external website using $.get and store it in the result variable, now I'm trying to figure ou ...

Triggering a delayed onkeypress event in JavaScript

In my HTML form, I have an optional input field for a phone number, as well as two radio buttons (Leave Message, Don't Leave Message): <input type="text" class="input-medium phoneNum2" name="secondaryPhone" id="se ...

What is the procedure for configuring custom request headers in Video.js?

Encountering this issue, I created a simple example using guidance from this documentation: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link href="https://vjs.zencdn.net/7.4.1/video-js.css" re ...

Can you explain the variances between TypeScript access modifiers and JavaScript's? When should TypeScript access modifiers be favored over JavaScript ones in coding practices?

When it comes to defining visibility in TypeScript, the public, protected, and private keywords are commonly used. However, it's worth noting that with ES6 JavaScript, you can use the "#" prefix for a class member or method to achieve similar results. ...

Issue involving AJAX and PHP references

After closely examining the code, it seems like the main issue may lie in the file I am referencing, but I can't be certain. In my project folder, there are numerous PHP files spread throughout, with one of them being NavBar.php located in the same di ...