digitalpoint
Well-known member
So I see that when a navigation number is greater than 999, the font size is dropped down to 9px, but still retains the fixed width of each link. This makes still makes numbers over 9999 spill out of the bounding box.
I know *why* it needs a fixed width (because the scroller looks funky with arbitrary widths, and one of when one of the links are cut in half, it looks really bad).
But...
There's really no reason that we *have* to used a fixed width for .PageNav .scrollable... instead when the next 5 links are added to the DOM (but still hidden), you could get the rendered width of it before and after they were added to the DOM, and then take the difference and animate like so:
Then you could just have variable widths that scale to any number as well as consistent padding regardless of the number.
There aren't going to be a ton of places where the number is > 9999, but there certainly will be... The biggest example would be the member list, which would be > 25000 pages for mine as of today.
I know *why* it needs a fixed width (because the scroller looks funky with arbitrary widths, and one of when one of the links are cut in half, it looks really bad).
But...
There's really no reason that we *have* to used a fixed width for .PageNav .scrollable... instead when the next 5 links are added to the DOM (but still hidden), you could get the rendered width of it before and after they were added to the DOM, and then take the difference and animate like so:
Code:
startWidth = $('.PageNav .scrollable .items').width();
{code that adds the 5 links to the dom}
endWidth = $('.PageNav .scrollable .items').width();
$('.PageNav .scrollable').animate({width: endWidth - startWidth});
Then you could just have variable widths that scale to any number as well as consistent padding regardless of the number.
There aren't going to be a ton of places where the number is > 9999, but there certainly will be... The biggest example would be the member list, which would be > 25000 pages for mine as of today.