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
258 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,231 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
213 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
248 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
3,991 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
205 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
279 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,808 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,503 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
498 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,193 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