My first suggestion is to create an item for "no results" and put it together with others. Give it a special class so that it is not visible along with the others (as long as there is no filter, for example):
<li class="sem-resultados">
Nenhum resultado encontrado
</li>
At first, that alone would be enough for him to stay hidden (for he does not possess the class produkt-element
, but in your code before any filtering is done it still remains visible. Then put a rule in your CSS to actually hide it:
.sem-resultados {
display: none;
}
With an item like this in each column, we go to filtering: whenever the plugin finishes disposing the elements on the screen, the event occurs layoutComplete
. In this event, you can count how many elements in each column are visible, and if there are none, show the .sem-resultados
:
$(".isotope.full").each(function() {
var semResultados = $(this).find(".sem-resultados");
var algumVisivel = $(this).find("li:visible").length > 0;
semResultados.toggle(!algumVisivel);
});
However, I found two problems with this approach:
When the layoutComplete
is called, the elements still have the same visibility they had before (because it seems to me that this event occurs before of the smooth transition of the elements, not to their end). This makes it a little but complicated to know if there are any visible elements or not.
A workaround is to use a setTimeout
to execute the above code only after all pending events have already been executed:
$container.isotope("on", "layoutComplete", function() {
setTimeout(function() {
$(".isotope.full").each(function() {
var semResultados = $(this).find(".sem-resultados");
var algumVisivel = $(this).find("li:visible").length > 0;
semResultados.toggle(!algumVisivel);
});
}, 500);
});
For the same reason, if in the previous filter the "no results" element was visible, in the new one it is shown "above" the elements present until the workaround above is executed, causing an unpleasant visual effect... The solution is to hide the .sem-resultados
just before filtration:
$(".sem-resultados").hide();
$container.isotope({ filter: selector });
Final example. The visual effect can not be the best possible be a bit unpleasant, but it was what I managed given the restrictions imposed by that plugin.
Updating: If you don’t mind losing the smooth transition, just assign to zero the property transitionDuration
:
$container.isotope({
itemSelector : '.produkt-element',
transitionDuration: "0"
});
And so you can put the timeout also in 0
(but you need to keep it anyway). So no delay, just a slight "Flicker"... :)
That way only the column "Post-graduation" appears the message?
– Laerte
@Laerte Not at first, any of the 3 columns should show. Is something not working? If yes, please give me an example of a filter in which the 1st or 3rd column is empty, for me to test.
– mgibsonbr
Filter: City: 5 and School 2.
– Laerte
I edited the code and added a filter that gives no results. http://jsfiddle.net/ecpkryae/3/.
– Mauro Alves
@Laerte Aff, by the way a
timeout
low for some reason is not giving the message... Changing thetimeout
for500
it seems to work in all cases, but the delay is visually unpleasant... As for this, I have no idea what to do to improve :(– mgibsonbr
+1
also I have been testing the plugin and did not get better results– Sergio
@Sergio I also tried a solution with pure CSS but did not succeed. By chance you know why
li ~ .sem-resultados
works butli:visible ~ .sem-resultados
doesn’t work?! (regardless of the plugin, filtering, etc., the fact is that the selector seems to be doing nothing - although the element has been visible brothers...)– mgibsonbr
@mgibsonbr this pseudo is native? I can’t find him on MDN.
– Sergio
@Sergio It is explained then, he must be jQuery only... :( It seemed so promising, and I can’t find another way to select by visibility. Thanks!
– mgibsonbr
@mgibsonbr Thank you for the answer and all research upon my question. Even with the effect you didn’t like, the result is exactly what I need. Anything change to version without transition effects. Thank you also for your didactics in answering and explaining everything right. I marked your answer as correct. Thank you :)
– Mauro Alves