Trigger resize event

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.

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

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("<div id='categoryFilters'><span>FILTERS:</span></div>");

		for (var i = 0; i < _artistCategories.length; i++) {
			
			$("#categoryFilters").append("<div class='catButton'>" + _artistCategories[i] + "</div>");

			_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 5 years, 1 month ago by geertvanamerongen.

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: https://www.resasunshine.com/.

I’m not sure why this is happening. Could you post your shortcode?