Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Scrollable table comparators
What is this sorcery? I like it…
I’m going to try and squint through their code and see how it’s done, but it doesn’t do it on desktop as far as I can tell.
Presumably it’s some sort of sticky CSS trickery? First time I’ve seen it in use but it’s very cool.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Scrollable table comparators
Presumably something similar as the sticky positioning we set up in the adi_matrix plugin, couple with some clever positioning (alignment) of the text in the first cell.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Scrollable table comparators
Yeah, it does the same thing as adi_matrix on the desktop site by keeping the first column sticky and scrolling the rest, but on mobile it stickies the labels instead. Very neat.
I can’t find out for sure how it does it because there’s no inspector on mobile (I’ve tried plugins and all sorts) so I’ll need to delve deeper one day and do companion debugging over USB or something to see it properly.
Meantime, if anybody has any insight on how this is done, I’d love to find out.
CSS relative positioning to anchor the label to the nearest table ‘row’ + fixed (sticky) left alignment, maybe?
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Scrollable table comparators
You can sort-of reproduce it on desktop browsers if your window is not too wide. But there the first and second cell / column are sticky (second column is the product you have selected, the next columns are comparisons).
The rest is clever vertical alignment in the first column (the “label” column).
(based on the rendering on a product page on amazon jp)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline