Pagination question

Gazley · September 22, 2012

Hi there,

The last item on the first page of paginated results shows the "Next" label showing the <li> class value as specified for 'nextItemLabel'.

This is good except that my styling is unable to target the last <li> in the <ul>. In other words, I would like to have two classes applied in this case; 1) the value of 'nextItemLabel' and 2) some value to indicate this is the final list item.

This example is where the 'limit=2' and there are three entries. When I click on "Next", the UL is now on the final item in the UL but this shows the value of the 'currentItemClass', in my case 'active'. I want to be able to target the item not only as the 'active' item but also as the 'final' item. IOW, the final item has a class of 'currentItemClass' on the page1 and 'currentItemClass' on page2.

Just to be clear, I am aware of the 'lastItemClass' but this only applies when there is a 'last' button showing and on this occasion, it isn't rendered.

The reason I want to understand which is the final item is so that I can style it without having to rely on the CSS lastchild() method that has somewhat patchy support in older browsers.

Any ideas or suggestions welcome!

Cheers.

Soma · September 22, 2012

http://selectivizr.com/ works wonders if you care about IE6-8.

Gazley · September 22, 2012

Thanks Soma. So would I be correct about PW not being able to apply some kind of final item class?

SiNNuT · September 23, 2012

A whole lot of text but sometimes some examples work better to see what you want. Haven't worked with the pager much so i looked at the pager at http://processwire.com/blogtest/page6, thinking this probably is the default output of the pager:

<ul class='MarkupPagerNav'>
<li class='MarkupPagerNavPrevious'><a href='/blogtest/page5'><span>Prev</span></a></li>
<li class=''><a href='/blogtest/'><span>1</span></a></li>
<li class=''><a href='/blogtest/page2'><span>2</span></a></li>
<li class=''><a href='/blogtest/page3'><span>3</span></a></li>
<li class=''><a href='/blogtest/page4'><span>4</span></a></li>
<li class=''><a href='/blogtest/page5'><span>5</span></a></li>
<li class='MarkupPagerNavOn'><a href='/blogtest/page6'><span>6</span></a></li>
</ul>

I think i see what you mean. It would be nice to have this:

<ul class='MarkupPagerNav'>
<li class='MarkupPagerNavPrevious'><a href='/blogtest/page5'><span>Prev</span></a></li>
<li class='MarkupPagerNavFirst'><a href='/blogtest/'><span>1</span></a></li>
<li class=''><a href='/blogtest/page2'><span>2</span></a></li>
<li class=''><a href='/blogtest/page3'><span>3</span></a></li>
<li class=''><a href='/blogtest/page4'><span>4</span></a></li>
<li class=''><a href='/blogtest/page5'><span>5</span></a></li>
<li class='MarkupPagerNavOn MarkupPagerNavLast'><a href='/blogtest/page6'><span>6</span></a></li>
</ul>

The First and Last types seem to be in the code but just no way to get them in the output. Maybe we are overlooking the obvious but if not consider this a feature request.

Gazley · September 23, 2012

@SiNNuT - I modified MarkupPagerNav.module last night to have the following additional options:

'initialItemClass' => 'MarkupPagerNavInitial',

'finalItemClass' => 'MarkupPagerNavFinal',

In my output code, I now get the following CSS:

<nav>

<li class="next final"><a href="/ProcessWire/gallery/ladies/page2">Older »</a></li>

</ul>

</nav>

This gives me what I need to have a known class value for ordinal first/last <li> irrespective of what their "native" PW class values are.

I will send my changes over to Ryan to see if he wants to include them in the module.

Martijn Geerts · September 23, 2012

First-child selector has got good support, IE7 and up, last-child I think IE9. The link provided by Soma helps with a lot of circumstances. I love Selectivizr. And I think not spitting out class="" in PHP makes the code much cleaner.

SiNNuT · September 23, 2012

First-child selector has got good support, IE7 and up, last-child I think IE9. The link provided by Soma helps with a lot of circumstances. I love Selectivizr. And I think not spitting out class="" in PHP makes the code much cleaner.

Maybe you're right and we should let CSS do what it's good at. Come to think of it i like letting old IE versions slowly die. I didn't know selectivizr and that should suffice for old IE support.

Still, if it's not hard or expensive to let the pager module have first and last classes (maybe optional) it can't hurt to put it in.

Gazley · September 23, 2012

>And I think not spitting out class=""

That has happened in "dev" code where the class name has been specified in the config array without a value. Obviously, that wouldn't happen on a live site and indeed, the site in question is not live (yet).

>I love Selectivizr.

Actually, the CSS I needed was "first-of-type" and according to the Selectivizr documents, they don't provide support for it with jQuery.

Either way, I don't think it's a bad thing to be able to target the ordinal first/last <li> from the paginator. Whether its used or not is down to the individual.

Gazley · September 23, 2012

@Matijn

>And I think not spitting out class="" in PHP makes the code much cleaner.

It would seem that this is standard behaviour in the PW pagination module. See the following URL and view the source for its paginator:

http://processwire.com/skyscrapers/cities/new-york-city/

Gazley · September 23, 2012

@Matijn - FYI, I have made a change in the MarkupPagerNav module that removes empty class definitions and forwarded this onto Ryan for his consideration.

Martijn Geerts · September 23, 2012

@Gazley, I don't think it's a bad idea, but if can be done with CCS then i think that is preferable as it is presentational.

Gazley · September 23, 2012

@Matijn - sorry, I don't understand your last point. You didn't like having empty class attribute(s), which turned out to be a feature of the original code so, I have modified the PW code and it no longer renders empty class attributes in paginated code. What are you referring to that "can be done with CSS"?

Whether you apply a class value to ordinal first/last <li> or use some kind of CSS pseudo class, it's all CSS. I'm personally not interested in supporting IE7, but there might be others that are. In this case, in IE7, 'first-child' support is unreliable/buggy and 'first-of-type'/'last-of-type' is none existent, even with Selectivizr.

So, being able to apply a class to ordinal first/last <li> tags is a convenient alternative that is 100% CSS.

Cheers.

diogo · September 23, 2012

As anyone used ie7.js http://code.google.com/p/ie7-js/? it supports :first-of-type and :last-of-type

Martijn Geerts · September 23, 2012

@Gazley it's just personal preference that if something can be done using CSS without additional classes I'll take that approach.

Gazley · September 23, 2012

@Matijn - Ah, I see what you mean and I agree with you!

ryan · September 23, 2012

Gazley, try the attached. I got your message with the attachment and looks good, but since I already had unimplemented classes in there meant for this purpose (just hadn't gotten around to it), figured I should use them instead. So I used some of what you sent me and also added a couple of new ones to differentiate page numbers from next/prev buttons. All these should now work:

// previously present, but not implemented. Now implemented.
'firstItemClass' => 'MarkupPagerNavFirst',

// newly added: applied to the first LI with a number in it
'firstNumberItemClass' => 'MarkupPagerNavFirstNum',

// previously present, but not implemented. Now implemented.
'lastItemClass' => 'MarkupPagerNavLast',

// newly added: applied to the last LI with a number in it
'lastNumberItemClass' => 'MarkupPagerNavLastNum',

Let me know if this covers what you were needing? This is now posted in the dev branch. But you can also just replace your MarkupPagerNav.module with the attached if you prefer.

MarkupPagerNav.module

Gazley · September 23, 2012

Hey Ryan,

Works for me!

Sorry to have inadvertently pushed you into doing something that you probably would have wanted to do at a more convenient time!

Thanks for the speedy turnaround

Cheers!

Gazley · October 14, 2012

Hey Ryan

Looks like the changes you posted in MarkupPageNav.module (Msg #16) don't appear to be in the build. Maybe you could check as I got the latest build and the new CSS class names aren't showing up in my markup.

Cheers!

ryan · October 15, 2012

These should be in the dev branch. I've got a lot going on in that branch, and thinking we'll merge it all for 2.3.

Gazley · October 15, 2012

OK, thanks a lot.

Sign In

Pagination question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members