Show how many items are hidden by CSS Overflow using jQuery or JS

Asked Oct 17 '17 at 20:35

Active Oct 17 '17 at 20:55

Viewed 90 times

Ive been digging all day on a way to handle this. Im showing color swatches for products but I want to only show 1 row and have the rest that don't fit within the box to be hidden and show either a + sign or +3,+4,+5 based on how many cant be seen. The box also changes sizes based on screen size.

I'm open to ideas that dont use CSS overflow but I'm not sure where to start.

HTML and CSS is just one DIV with 15 image tags in it. Height of 20px and overflow:hidden. All of this doesnt matter as I can change it to anything needed though.

edited Oct 17 '17 at 20:55

asked Oct 17 '17 at 20:35

John Moore

Can you include HTML and CSS at Question? – guest271314 Oct 17 '17 at 20:37
Why do not you use a carrousel or slider? – Alvarez Oct 17 '17 at 20:38
@guest271314 Its just one DIV with 15 image tags inside it. but I can change it if needed. – John Moore Oct 17 '17 at 20:43
@LuisFernando Actually not a bad idea, but Id prefer a solution less heavy. I may do that for now! Id have dozens of sliders on one page. – John Moore Oct 17 '17 at 20:44
For me it would be a good idea, I've seen the same thing on another website and it's a slider that never fails to show the colors. Can you include HTML and CSS at Question? – Alvarez Oct 17 '17 at 20:47

Show how many items are hidden by CSS Overflow using jQuery or JS

0 Answers0