Dynamic Grid Stack for Expiring Content

Hi

I’m trying to create a grid, with elements that expire when a date is reached. The Expiry Stack (Stacks4Stacks) does exactly what I need it to do, but when I use this element inside a Grid Stack (I’ve tried Adaptive Grid and Grid by Doobox) I’m left with a blank space where the stack was, when what I want is the remaining elements to shuffle up and close the space.

So, in the image below I want the first item to expire on 12 Feb 2017, and the 19 Feb 2017 element to become the first item in the grid, at them moment I’m getting white space where 12 Feb 2017 was when it expires.

Appreciate a recommendation of a stack and or technique that can achieve this please.

Many thanks

Mark

That is a tough one and I doubt there is an answer as you describe. Expiry simply outputs or doesn’t output whatever is placed in the stack. (I love Expiry!)

There could be something that does what you want but it would not be thru the use of a simple “Expiry” type stack.

Perhaps someone else has knowledge of a stack that will do as you ask…

I agree with you that Expiry simply does what it does and works well.

I’m guessing the issue is with the Grid stacks, and how they work, rather than Expiry. The grid stacks I have need to have the number of grid places set, rather than having the number of grid places defined by the content that is available to fill them.

Would be an interesting one to work out, will be doing some reading over the weekend to see if I can progress, but would appreciate any help too.

Regards

Mark

I would venture to guess that you will need to use javascript to decide if the grid element is empty and then get rid of it if it
This may not be a simple task.

Andrew Tavernor @tav wrote a js snippet that does this very thing on a foundation Blockgrid when using the toggle stack to “turn off” content and it works like a champ. You can read about it here.

I’ve spent a little time on this and have come up with what (I hope) is a solution that works reliably, that doesn’t involve any Javascript - thanks for the link Scott, looks interesting.

Rather than use Will’s Adaptive Grid Stack I tried his Useful Grid Stack with an Expiry Stack inside the grids. Worked straight out of the box, the only problems occurred when trying to style the Expiry Stack grid elements, even adding padding and margin caused issues.

I tried a few things to work out the padding/margin issues, finally settled on Joe Workmans Jack Stack, dropped it into the Expiry Stack and was able to add margin and padding without breaking the layout I wanted.

You can see the issues here and the final working solution, where I have set Cell A and Cell D to have expired dates, so the effect I wanted was the other cells to shuffle up, maintaining the same order, without leaving any spaces.

Happy to hear if anyone has a neater solution.

Regards

Mark

2 Likes

Mark… pretty thoughtful! I use Adaptive Grid, Useful Grid, Expiry and love them all but I would not have thought of using them in this fashion. Thanks for sharing!