Looking for a stack that can reflow column content when toggled

(Chris Handley) #1

I’m using Foundation’s Total Content Management System’s Toggle Stack, so I can toggle content on or off.

I would like to setup several stacks of content that I can toggle on/off into three columns and several rows as needed (desktop view). How can I get this content to reflow without showing a hole when a stack is toggled off?

Example: If I Toggle-off a stack in row 1, column 2, I would like the stack from column 3 to flow into row 1, column 2. And row 2, column 1 to flow into row 1, column 3. I hope this makes sense. I suspect there is a stack out there I could use to make this happen.

Thanks

(Brad Halstead) #2

I’m not 100% on this but perhaps Doobox’s Reflow Stack will give you what you need?

Brad

(Chris Handley) #3

I looked into Doobox’s Reflow Stack, but it just looks like a responsive column stack. Maybe they will someone will chime in with another stack recommendation.

Thanks

(Doobox Software) #4

So reflow stack for example…

Set 4 columns on all devices of equal width by setting each device row in the settings to 3,3,3,3

Now if you wanted to for example hide the contents of column 2 on only iPad portrait size, then on the iPad portrait row change the setting to 4,0,4,4

0 will hide a column and allow the proceeding column to flow into the newly available ospace.
As long as each row totals twelve in the settings then the columns will neatly fill that row at that device size.

0,0,0,12
12,0,0,0
2,3,4,3
6,6,0,0
4,4,4,0
2,10,0,0

There is a row available for each device size to enter these numbers. This tells the columns how to behave for each of the device sizes.

You get the idea. :wink:

(Jason Bostick) #5

Not sure if you’re on the other forum (that shall not be named) but @tav posted a link to a snippet that should do what you’re asking:

http://csnipp.com/s/1174/-Remove-a-Foundation-Block-Grid-Item-when-Total-CMS-toggle-is-OFF-

(Chris Handley) #6

Thanks, but I don’t want to hide entire columns. I want to be able to toggle specific stacks on or off and have everything reflow. I’ll check out the snippet mentioned below.

(Chris Handley) #7

Yes, the snippet WORkED! I used Foundation’s Block Grid stack and put content into several Foundation Toggle stacks. Then I pasted the JV Snippet into the global JV script area and it worked. Now when I toggle the content off of a block (so that it’s blank) the blocks adjust and there are no blank spots.

Great solution!

(Mark Spaulding) #8

Hmm, Check out Joe’s CMS stacks. Sounds like those may do what you are looking for.
Blessings,
—Mark

(Chris Handley) #9

Yes, that’s what we’re talking about. Joe’s Total Content Management Stack called Toggle, plus his Foundation Stack called Block Grid. By adding the Javascript snippet to the global javascript I was able to solve my challenge, thanks to the community’s support.

(Robert Ziebol 🖖🏼) #10

You can actually turn on and off pages with Total CMS!
http://www.zeebedesigns.com/page-removal/

(Chris Handley) #11

Thanks. That’s good to know, but it doesn’t really relate to the challenge and solution presented. Read the beginning of this thread and you’ll find a cool little trick that would be great to incorporate into the Block Grid stack someday.

Instead of leaving a blank space if a block’s stack is toggled off, the snippet fills the blank space with the next block. Pretty cool if you ask me.

(Robert Ziebol 🖖🏼) #12

I know, was just informing you and everyone else about that ability, as it is not well known.

(Matthias Ficht) #13

Hey zeebe, can you pleeeease tell me how you did that? Some description about the necessary procedure would be highly appreciated! :slight_smile:

(Robert Ziebol 🖖🏼) #14

Yes, I am going to try and finish the FAQ for that today, but more likely this weekend.

(Matthias Ficht) #15

Hey, that would be great. Thanks a lot!