CODEWITHSUNDEEP
javascriptjqueryhtml
user2304394
user2304394

Reputation: 323

Show all divs and Select by category

Kindly take a look at following URL : http://demo.templaza.com/w/vania/ you'll notice that you can view divs by relevance All | Images | Videos | Post all I have been trying to do is in simple HTML5 when the divs loaded in all section with all types of post then I can view each post by relevance just that quick as its being done on the above URL. Can anyone please provide me the direction to follow to accomplish this kind of functionality the way it filter images from all generated divs or the like.

I've been using class name for the div that use image = class="image" , video = class="video" etc. Just wondering how to create this filter.

Upvotes: 0

Views: 133

Answers (3)

lee_gladding
lee_gladding

Reputation: 1100

It looks like the example URL you have given is using a plugin to do this (isotope).

But basically all you need to achieve this kind of smooth effect is a JS function that loops through all your div's and adds/removes a class of hidden depending on whether its classes match the button that is clicked.

$('div').not('.someClass').addClass('hidden');

or

$('div.someClass').removeClass('hidden');

Doing this by adding and removing a class hidden (instead of using JS for it all) means you can make use of CSS3 transitions to fade in/out your div's, optimising browser performance and allowing for more interesting transitions.

The CSS would look similar to:

//default div
div{
    opacity: 1;
    transition: opacity 1s linear;
}
//toggled class
div.hidden{
    opacity:0;
}

only a very basic example but: CSS TRANSITION FILTER FIDDLE

Upvotes: 1

Eric Hotinger
Eric Hotinger

Reputation: 9316

Something like:

$('#FilterByAll').on('click', function(){
    $('div').show(); 
});

$('#FilterByImage').on('click', function(){
    $('div').not('.image').hide(); 
    $('.image').show();
});

$('#FilterByPost').on('click', function(){
    $('div').not('.post').hide();
    $('.post').show();
});

Should work for you. See JSFiddle

Upvotes: 1

Sam Battat
Sam Battat

Reputation: 5745

The website you mentioned uses a jquery plugin called isotope

http://jsfiddle.net/AYQET/

// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

Upvotes: 1

Related Questions