geertvanamerongen

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.