On 27/02/2020 8:08 pm, Andrew Poulos wrote:
I want to make a responsive pagination widget.
Designing one seems easy enough but I'm stuck on making it responsive.
So far, the HTML is
<div id="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
...
</div>
and the CSS is
#pagination {
width: 40%;
}
a {
display: block;
...
}
How do I get only those "pages" that can fit in the available space
appear (with <a href="a">...</a> if there are hidden pages)? Especially
as the width of #pagination varies.
Is this something I need to use JavaScript for?
I got what I needed by:
- displaying the container DIV as a grid
- dropped the need for ellipsis to indicate "hidden" pages (something to
add in the future)
- changing the list of anchors to an ordered list
- putting the list items horizontally
- adding two elements to the front and two to the end (as controls:
next, go to end...)
- putting the list as a grid item that spans two rows.
- the grid item has overflow-x as auto.
- making the container DIV the height of one grid row and setting
overflow to hidden.
- Used JavaScript to add functionality to the controls. (I haven't
bothered disabling controls when the first or last list item are
currently selected but it shouldn't be much to add - if the client wants
it.)
It's responsive.
I've a bit more to do to make it accessible. There's 20+ lines of
JavaScript and six CSS declaration blocks. It "betters" some of the multi-thousand line libraries I looked at.
Andrew Poulos
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)