Jump to content

Pagination question

Gazley

By Gazley,
in General Support

 Share

Recommended Posts

Gazley Hero Member

Gazley

Posted
Posted

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.

Link to comment
Share on other sites
SiNNuT Hero Member

SiNNuT

Posted
Posted

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.

Link to comment
Share on other sites
Gazley Hero Member

Gazley

Posted
  • Author
Posted

@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>

<ul class="paginate">

<li class="active first"><a href="/ProcessWire/gallery/ladies/">1</a></li>

<li class=""><a href="/ProcessWire/gallery/ladies/page2">2</a></li>

<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.

Link to comment
Share on other sites
SiNNuT Hero Member

SiNNuT

Posted
Posted

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.

Link to comment
Share on other sites
Gazley Hero Member

Gazley

Posted
  • Author
Posted

>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.

Link to comment
Share on other sites
Gazley Hero Member

Gazley

Posted
  • Author
Posted

@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.

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted

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

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
Gazley Hero Member

Gazley

Posted
  • Author
Posted

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! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...