Title: Trigger resize event
Last modified: January 28, 2020
---
# Trigger resize event
* [geertvanamerongen](https://wordpress.org/support/users/geertvanamerongen/)
* (@geertvanamerongen)
* [6 years, 3 months ago](https://wordpress.org/support/topic/trigger-resize-event/)
* Hi guys, is there a way to trigger the resize event manually? I’ve tried triggering
the window resize event but it doesn’t seem to effect the masonry grid. I want
to do some custom filtering, where I put the filtered content on display: none
manually. It doesn’t rearrange the items until I manually resize the window,
I would like to achieve that trough javascript.
* Any help would be much appreciated!
* Cheers
Viewing 3 replies - 1 through 3 (of 3 total)
* Plugin Author [A. Jones](https://wordpress.org/support/users/nomadcoder/)
* (@nomadcoder)
* [6 years, 3 months ago](https://wordpress.org/support/topic/trigger-resize-event/#post-12379149)
* Hi,
* If I understand correctly, you want to load a page with the content already filtered.
* I’m not completely sure but you could try using css transitions. Feel free to
send me more details and I can help you out with the javascript.
* Thread Starter [geertvanamerongen](https://wordpress.org/support/users/geertvanamerongen/)
* (@geertvanamerongen)
* [6 years, 3 months ago](https://wordpress.org/support/topic/trigger-resize-event/#post-12403811)
* Hi nomadcoder,
* Thanks for the response, please see link to my staging site to see what I’m intending
to do: [https://bit.ly/381NAQb](https://bit.ly/381NAQb)
* When you use one of the filters, the blocks hide but the grid doesn’t rearrange.
If you resize the browser window after you select a filter, the blocks do rearrange
correctly. It can’t seem to trigger the resize effect of the grid manually through
JS. I tried triggering a window.resize event manually but it doesn’t respond
to that. So when the plugin actually changes size it does exactly what I need
it to do, but I want to be able to call that resize function after I filter my
items basically.
* JS
* ```
jQuery(document).ready(function($){
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var _artists = []
var _artistCategories = []
var _artistLength = $(".artists_item").length;
var _activeFilters = [];
var _filtersDOM = [];
$(".artists_item").each(function(i){
var _obj = {};
var i = i;
_obj.target = $(this);
_obj.href = $(this).children(":first").children(":first").attr("href");
_obj.id = _obj.href.split("&p=")[1];
_obj.categories = [];
$.ajax({
type: 'POST',
url: my_ajax_object.ajax_url,
dataType: "json",
data: { action : 'get_ajax_category', id: _obj.id},
success: function( response ) {
response.forEach(function(item, index){
if(item.name != "artists"){
_obj.categories.push(item.name)
if(_artistCategories.indexOf(item.name) === -1) {
_artistCategories.push(item.name);
}
}
});
_artists.push(_obj)
if(i==_artistLength-1){
afterCategories();
}
}
});
});
function afterCategories(){
$(".proto_masonry_top").parent().prepend("FILTERS:
");
for (var i = 0; i < _artistCategories.length; i++) {
$("#categoryFilters").append("" + _artistCategories[i] + "
");
_filtersDOM.push(_artistCategories[i]);
getLabelDOM(_artistCategories[i]).click(function(e){
changeFilter($(this).html());
})
}
}
function getLabelDOM(t){
var ret = null;
$(".catButton").each(function(){
if($(this).html() == t) ret = $(this);
})
return ret;
}
function changeFilter(t){
if(_activeFilters.indexOf(t) === -1){
_activeFilters.push(t)
for (var i = 0; i < _filtersDOM.length; i++) {
if(t.indexOf(_filtersDOM[i]) === -1) $( getLabelDOM(t)).css('background','#ddd');
}
}else{
_activeFilters.remove(t)
for (var i = 0; i < _filtersDOM.length; i++) {
if(t.indexOf(_filtersDOM[i]) === -1) $( getLabelDOM(t)).css('background','none');
}
}
for (var i = 0; i < _artists.length; i++) {
if(_activeFilters.length === 0) fadeBlock(_artists[i].target, 1)
else fadeBlock(_artists[i].target, 0)
for(var j = 0; j < _artists[i].categories.length; j++){
for(var k = 0; k < _activeFilters.length; k++){
if(_activeFilters[k]==_artists[i].categories[j]){
fadeBlock(_artists[i].target, 1)
}
}
}
}
}
function fadeBlock(t,a){
if(a==1)
{
$(t).css("display","block")
$(t).stop(true).fadeTo( 200 , 1, function(){
resetPositions();
});
}
else if (a==0)
{
$(t).stop(true).fadeTo( 200 , 0, function() {
resetPositions();
$(t).css("display","none")
});
}
}
function resetPositions(){
window.dispatchEvent(new Event('resize'));
}
});
```
* Thanks a lot in advance!
* Cheers
- This reply was modified 6 years, 3 months ago by [geertvanamerongen](https://wordpress.org/support/users/geertvanamerongen/).
* Plugin Author [A. Jones](https://wordpress.org/support/users/nomadcoder/)
* (@nomadcoder)
* [6 years, 3 months ago](https://wordpress.org/support/topic/trigger-resize-event/#post-12403895)
* Interesting. It looks to me like it’s the transitions that aren’t working which
means that they may have been overridden or disabled. The plugin works properly
in this site: [http://www.resasunshine.com/](http://www.resasunshine.com/).
* I’m not sure why this is happening. Could you post your shortcode?
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘Trigger resize event’ is closed to new replies.
* 
* [Featured Image Pro Post Grid](https://wordpress.org/plugins/featured-image-pro/)
* [Frequently Asked Questions](https://wordpress.org/plugins/featured-image-pro/#faq)
* [Support Threads](https://wordpress.org/support/plugin/featured-image-pro/)
* [Active Topics](https://wordpress.org/support/plugin/featured-image-pro/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/featured-image-pro/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/featured-image-pro/reviews/)
* 3 replies
* 2 participants
* Last reply from: [A. Jones](https://wordpress.org/support/users/nomadcoder/)
* Last activity: [6 years, 3 months ago](https://wordpress.org/support/topic/trigger-resize-event/#post-12403895)
* Status: not resolved