Filter All Across Multiple Pages

Help
,
1

Hi!

I’m setting up an OC page à la Tumblr-style in neocities with a filter feature. The current system I am using works as intended with the exception that the filter itself sorts item per page rather than grouping all items in one page within the grid template display regardless of the number of pagination. I don’t mind the flaw, but it would be cool if that is achievable even with just CSS. I don’t have a lot of experience with Javascript sadly.

I am using this as a source code for filtering the items and slideshow code for the dot-style pagination.

I uploaded the sample layout here and here is the CSS file.

I’m open to all suggestions :grinning_face_with_smiling_eyes:

1 Like
2

It’s late and my brain is fried, but I think you’d need at least a little JS to store the current CSS filter setting on the visitor’s device so that it can be checked whenever they move to a new page on your site.

This looks like a fairly basic example:

BTW, welcome to the Cafe!

3

Hello! I suggested posting to this forum after SoloGhost asked me for help and I couldn’t figure it out, but today I came up with a possible approach:

To avoid the filter toggles conflicting with the “pages” (slides), you can make the latter reliant on changing width property instead of changing the display property. I think I’d need more examples and testing to be sure this approach is working with the filters as intended, but it does at least avoid the more obvious point of conflict.

In my testing, I added these radio inputs in the HTML:

				<input type="radio" name="slider" id="page-one" checked>
				<input type="radio" name="slider" id="page-two">
				<input type="radio" name="slider" id="page-three">

And then I added the classes “page” and one / two / three to the slide divs, in order to affect them with the following CSS:

body:has(#page-one:checked) .page:not(.one),
body:has(#page-two:checked) .page:not(.two),
body:has(#page-three:checked) .page:not(.three)
{width: 0}

Does that get closer to what you were looking for?

4

Thank you! I’m sorry but I’m confused… The “pages” aren’t actual page. All sorted divs are technically on the same HTML not on separate HTML pages. I may be misunderstanding something. I honestly don’t mind shelving the idea if it’s above my present skill level. I really don’t mind the flaw…

5

I tried this method out and I’m 100% sure I’m doing all of this wrong.

Summary

I changed the button sliders to this:

<input class="button" type="radio" name="slider" id="page-one" onclick="currentSlide(1)" checked>
<input class="button" type="radio" name="slider" id="page-two"  onclick="currentSlide(2)">
<input class="button" type="radio" name="slider" id="page-two"  onclick="currentSlide(3)">

Added the page class as you said by doing this:

<div class="cardSet fade">
					<div class="page one">
				<!-- INDEX BOX 01 -->
				<div class="index-box">
					
					<article class="card choice-of-games" data-status="complete">Character Index</article>
					<article class="card hosted-games" data-status="in-progress">Character Index</article>
					<article class="card indie-ifs" data-status="in-progress">Character Index</article>

					<article class="card choice-of-games" data-status="complete">Character Index</article>
					<article class="card hearts-choice" data-status="complete">Character Index</article>
					<article class="card choice-of-games" data-status="complete">Character Index</article>
					<article class="card choice-of-games" data-status="complete">Character Index</article>
						
				</div>
					</div>
</div>

And tried attaching .page to the filter system:

body:has(#page-one:checked) .page:not(.one) .card,
body:has(#page-two:checked) .page:not(.two).card ,
body:has(#page-three:checked) .page:not(.three) .card,
body:has(#in-progress:checked) .page .card[data-status~="in-progress"],
body:has(#hiatus:checked) .page .card[data-status~="hiatus"],
body:has(#complete:checked) .page .card[data-status~="complete"]
{width: 0; }
6

I wish I could help :( I wrote the CSS filtering guide you used, but I’m not very experienced with JS.

The only insight I can offer is that it looks like your articles are hard coded into groups of eight in the html (in your index boxes), so that when you filter everything with the CSS it hides things but does not change which index box they are in, so they remain in the boxes (“pages”) they were in to begin with.

Unfortuntely I’m not sure how you would change the JS so that each page is based on number of articles displayed rather than being hard coded. But perhaps someone else reading this may have an idea :eyes:

1 Like
7

Oh, it looks like you added the Javascript back in and switched the filters to width instead of display. I’ll email you the full files of what I tested with.