Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Combine search and filter with more/less

Combine search and filtering with see more / less I have this... where I would like to have added see more / less like this... I hope that it is possible

User Gravatar

KlintMX

Posted Jul 2 2014 16:30 UTC

$25


  • Assigned To renekorss
  • Solved
  • isotope
  • 585 Views

11 Replies


I made codepen for you.

You have

layoutMode: 'fitRows',

So the effect wount be the same, but I guess you want it so. You could remove layoutMode and then the effect would be same too.

If you want to change divs width or other css if it is open, div with class "auto" will get class "lg" if open.

User Gravatar

renekorss

Posted Jul 2 2014 22:57 UTC

Solution

This didn't solve your task? Get your own custom solution.

"fit rows" is not a must, but the div width should be amendable. I've tried to add

. auto.lg {
width: 65.75%;
}

Here... It seems to work fine on all elements except the first, as you can see.
And

. auto.lg {
width: 98.9%;
}

Here... Here the "fit rows" has obviously no impact, but there occurs blank areas.

I've tried both of the above with and without the

layoutMode: 'fitRows',


I would like to have both options, but "width: 98.9%" without blank areas are the most important

User Gravatar

KlintMX

Posted Jul 3 2014 4:10 UTC

I've corrected the first response, and would delete this one, but I can not

User Gravatar

KlintMX

Posted Jul 3 2014 4:12 UTC

fitRows is ment to act like this. If items have different heights, then it has blank areas.

For masonry layout mode add

masonry: {
  columnWidth: 100,
},

so the result would be

var $container = $('.isotope').isotope({
itemSelector: '.auto',
//layoutMode: 'fitRows',
masonry: {
  columnWidth: 100,
},
filter: function() {
  console.log('filtering');
  var $this = $(this);
  var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
  var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
  return searchResult && buttonResult;
}
});

If you don't want any blank areas, then you have to use masonry layout mode.

User Gravatar

renekorss

Posted Jul 3 2014 4:33 UTC

Is your problem solved now?

User Gravatar

renekorss

Posted Jul 3 2014 5:52 UTC

I can not get masonry to work, so I work on with more / less at 98.9% - this one...
Thanks for the help!

User Gravatar

KlintMX

Posted Jul 3 2014 6:15 UTC

I updated my codepen. Check it out.

JS:

var columnsCount = 3; // How many columns you want?

var $container = $('.isotope').isotope({
itemSelector: '.auto',
layoutMode: 'masonry',
masonry: {
  columnWidth: parseInt($('.isotope').innerWidth()/columnsCount),
},
filter: function() {
  console.log('filtering');
  var $this = $(this);
  var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
  var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
  return searchResult && buttonResult;
}
});

This part is important

layoutMode: 'masonry',
masonry: {
  columnWidth: parseInt($('.isotope').innerWidth()/columnCount),
},

CSS (two columns wide):

.auto.lg
{
    width: 65.2%;
}

Pay attention to widths of .auto div. If it dosen't fit then masonry will have blank areas.

User Gravatar

renekorss

Posted Jul 3 2014 6:32 UTC

Thanks a lot

User Gravatar

KlintMX

Posted Jul 3 2014 7:13 UTC

Sorry to be back here, but you missed a single function, and I was not aware of it - probably because I was focused on the view itself.

<div class="story-snip">

which should have "display: none" when "view more" is enabled.

Do I have to create a new case or can / will you do it here

User Gravatar

KlintMX

Posted Jul 4 2014 1:44 UTC

Updated codepen

Add

CSS:

.auto.lg .story-snip
{
  display: none;
}

HTML (to every item):

<div class="story-snip">
    <p>Story snip - Sed neque sapien, sagittis a fermentum sit amet, interdum faucibus nisi. Proin sit amet malesuada ante. Sed dapibus, nunc eu luctus dignissim, felis tortor aliquet nulla, eget gravida massa ipsum non libero. In lacinia elit ut risus vestibulum feugiat. Aenean ornare augue et ligula pretium cursus. Maecenas vulputate nisl sit amet nulla dictum eleifend. Phasellus vitae congue erat. Cras tempor libero libero, in mollis felis dignissim in.
   </p>
</div>
User Gravatar

renekorss

Posted Jul 4 2014 1:56 UTC

Perfect - thanks a lot! Have a nice day!

User Gravatar

KlintMX

Posted Jul 4 2014 2:07 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions