CODEWITHSUNDEEP
javascripthtmljquery-masonry
tr4nc3
tr4nc3

Reputation: 101

Force a refresh of masonry grid

I have a script that is creating a grid, and the grid elements are "re-positioned" every time the viewport width is changed. I don't have access to the script, nor did I write it. I think it's a Masonry grid.

I'm dynamically changing the content of the grid, so I need to somehow "refresh" (re-calculate) the grid without refreshing the page. On mobile I did this by changing the "initial-scale" meta tag (then resetting it) to force the grid to update. However the viewport tag is ignored on desktop, so I don't know how to actually make the browser think that page dimensions are changed and force a refresh on the grid.

Any ideas are appreciated, thanks.

Upvotes: 2

Views: 2745

Answers (2)

KFish
KFish

Reputation: 450

Depending on how the script is setup you may be able to simply trigger the resize event causing it to recalculate based on the current size. If the script is actually tracking the size and checking for changes then you will need to find the best way to force the script to perform it's grid recalculation, which means examining the script. It might be as simple as changing the value of the variable where the script is storing the previously recorded viewport width right before you trigger the resize event.

FYI: If the script is loading on your page then you do have access to the script.

window.addEventListener("resize", function(){
  // Resize event listener from masonry script
  console.log("Masonry grid resized for width "+window.innerWidth);
});

// If using jQuery
$(window).trigger("resize");

// Plain JS version
window.dispatchEvent(new Event('resize'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 2

Kalnode
Kalnode

Reputation: 11366

If the masonry script is good it may have an API feature to do what you need, however I think you'd explore that already.

Alternatively...

Option #1: Modify a parent container

See if you can force a refresh by simply temporarily modifying a parent container. For example, increase container width by 1 pixel for an instant, and return back to the original width.

Option #2: Find the existing listener; find the functions

The existing script probably has a listener + actions for when the viewport changes size (as you describe happening). Inspect the script and find that listener, and see what it's running inside. It'll have some function(s) to calculate and render the grid, and you'd want to call those same functions in your own data-update function.

To find that listener, do a find for "resize", see what comes up.

Here's how a vanilla JS resize listener may look like:

var screenWidth = document.documentElement.clientWidth;
resizeRefresh(screenWidth);


function resizeRefresh(width) {

    window.addEventListener("resize", function(){
          newWidth = document.documentElement.clientWidth;

          if (newWidth != width) {

                width = newWidth;

                // do stuff
          }

  }, true);
}

Upvotes: 1

Related Questions