Jquery Masonary and item filtering does not work together

0 votes

I am using a small js filter script to sort the images according based on their classes. It works fine in isolation. As soon as I add masonary plugin to the images. It stops working.

the HTML.........................................................................

unordered list: ul.list containing thumbnails of various sizes.

Javascipt

Filter Script:

$(document).ready(function(){$("ul#filter a").click(function(){$(this).css("outline","none");$("ul#filter .current").removeClass("current");$(this).parent().addClass("current");var a=$(this).text().toLowerCase().replace(" ","-");if(a=="all"){$("ul.list li.hidden").fadeIn("slow").removeClass("hidden")}else{$("ul.list li").each(function(){if(!$(this).hasClass(a)){$(this).fadeOut("normal").addClass("hidden")}else{$(this).fadeIn("slow").removeClass("hidden")}})}return false})})

Masonary:

$(function(){ $('ul.list').masonry();});

I want items filtered and then rearranged with masonary.

Please help me find a solution.

Thanks in advance.

JSNovice

Jul 25, 2022 in Web Development by gaurav
• 23,260 points
268 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

toaster.clear('*') does not work inside a jQuery function

The error - "TypeError: $.toast is not a ...READ MORE

answered Aug 5, 2022 in Web Development by rajatha
• 7,640 points
3,284 views
0 votes
0 answers

jquery virtual keyboard - Curser not blinking in Chrome and Edge

I used the jQuery virtual keyboard, but ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
217 views
0 votes
0 answers

jquery: unbind mouseenter and leave won't work

i have a tabbed view and when ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
258 views
0 votes
1 answer

What does cors means in Angularjs and what the use of it?

CORS is Cross Origin Resource Sharing which means you ...READ MORE

answered Jan 29, 2020 in Web Development by kartik
• 37,510 points
4,002 views
0 votes
1 answer

Jquery and Menu and logo

Seems your anchor tag is not visible ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,640 points
215 views
0 votes
1 answer

jQuery $(this) selector function and limitations

this isn't a jQuery "thing", but a basic JavaScript ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,640 points
293 views
0 votes
1 answer

jQuery 'if .change() or .keyup()'

you can bind to multiple events by ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,640 points
1,866 views
0 votes
1 answer

jquery function setInterval

This is because you are executing the ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,640 points
1,565 views
0 votes
1 answer

jquery - is not a function error

In Wordpress jQuery.noConflict() is called on the jQuery file ...READ MORE

answered Aug 4, 2022 in Web Development by rajatha
• 7,640 points
512 views
0 votes
2 answers

How can we pass a function as a parameter in java?

Java 8 and above Using Java 8+ lambda ...READ MORE

answered Aug 28, 2018 in Java by Daisy
• 8,120 points
1,212 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP