Anchor links for pagination numbers (page list)

Permalink
Hi to all,

I couldn't come up with a well descriptive problem explanation so I'll try to go straight to the point. I have a page list with pagination and I want to take users to an anchor div on the other page after clicking any page number.

Here is my code:

<div id="pagination">
         <?php  
         $summary = $pl->getSummary();
         if ($summary->pages > 1):
            $paginator = $pl->getPagination();
         ?>
            <span class="pagination-left"><?php   echo $paginator->getPrevious('« Newer Posts'); ?></span>
            <span class="pagination-right"><?php   echo $paginator->getNext('Older Posts »'); ?></span>
            <?php   echo $paginator->getPages(); ?>
         <?php   endif; ?>
      </div>


I've tried adding the following line of code, but without any success...

<?php   echo $paginator->getPages(); 
$paginator = $paginator . "#anchor-tag";
?>


If anyone has a solution to this, you would be saving me loads of time and probably for anyone else who faced it too :)

View Replies: View Best Answer
Mellow replied on at Permalink Reply
Let me know guys if I'm too complicated with my explanation...
Mellow replied on at Permalink Reply
A quick update. I figured out that I was working with a wrong variable. The line responsible for outputting URLs (based on my understanding) is

$uh = Loader::helper('concrete/urls');


I wonder if there is a way to add an anchor link to this one?
mhawke replied on at Permalink Reply 1 Attachment
mhawke
Grab a coffee and try this...

1) Download the attached view.php.txt file and rename it to view.php
2) Create the following path on your site: "[root]/blocks/page_list/templates/anchor_attribute"
3) Upload the view.php file to the new 'anchor_attribute' folder
4) Visit Dashboard->Pages and Themes->Attributes and create a new 'text' attribute with a handle of 'anchor' and a name of 'Anchor' (case-sensitive)
5) On your Page List block where you want to add the anchors, choose 'Custom Template' and choose the 'Anchor Attribute' template.
6) Refresh the page and click-through to one of your pages from your Page List and choose 'Edit->Properties->Custom Attributes' and add the 'Anchor Attribute' to that page and enter the name of your anchor.
7) On that same page, edit the content to add that anchor somewhere either with the Content Block or an HTML block.

Go back to your Page List and click through to that page again and you should land on the page and move to that anchor.

Clear as mud?

To accomplish this, I took the core view.php file from concrete/blocks/page_list.view.php and I added a single line at line 21 that grabs the 'anchor' attribute and if it exists, I add it to the URL on line 55.
Mellow replied on at Permalink Reply
So I have a coffee with me now :) but I want to clarify a couple of things before following the process.

In the line 21, you have added

$anchor = $page->getAttribute('anchor');

Is it possible to have an anchor tag name directly instead of calling the attribute? Something like this?

$anchor = 'anchor-name';

And then leave the other line of the code you added.

On the matter, I want the page to jump to anchor tag for all page list pages except the first one. Would this method still work?

This project has a complex page list use, so ideally I want to be able to insert the anchor element directly into the template. Presuming it would still work of course..

And thank you for a rapid response!!
mhawke replied on at Permalink Reply 1 Attachment
mhawke
Ok, try this attached view.php.txt

On this version, if there is an 'Anchor Attribute' attribute set on the target page then that value gets added otherwise it adds the value that's 'hard-coded' into the view.php file at line 22.

Also, it only adds the anchor if it's not the first page in the list.
mhawke replied on at Permalink Reply
mhawke
So I hope I didn't mis-read what you are trying to accomplish. You say that you want users to go to an anchor on a page when they click on one of the numbers in the pagination section? That isn't how the pagination works. Clicking a number generates a new list of pages. It doesn't lead you to a specific page with content.
Mellow replied on at Permalink Reply
This project has a strange architecture, so I will try to explain it better:

I have a master page that contains a page list. When this page is opened it displays from top as every standard webpage. I don't have any problem with it.

However, what I want to do is to add an anchor tag every time when user clicks any of the pagination numbers.

I hope I'm not pushing my luck with your help, but I want to avoid attributes badly :) If there's a way to replace the line of the attribute with the hard coded anchor, this would be a life saver.

What I was experimenting with is the following line of code:

<a href="<?php echo $link . '#anchor-tag'; ?>"><?php echo $title; ?></a>


In my understanding I only have to attach an anchor tag for a variable called link?

I hope this makes more sense now :)
mhawke replied on at Permalink Reply
mhawke
No I'm sorry but it still doesn't make sense to me. Clicking on the numbers in the pagination function does not open any pages so I don't know how it's supposed to add an anchor to a page it doesn't render. All it does is re-generate the page list with the next/previous group of links to pages.

Did you have a look at the view.php file I attached to my last post? You can hard-code an anchor or use an attribute. The attribute is not needed
mhawke replied on at Permalink Reply
mhawke
You say you want to "add an anchor tag every time when user clicks any of the pagination numbers". Add and anchor tag to what? When you click the pagination numbers, there is no longer any links to add an anchor to because the pagination links replace all the existing page links with new links. The way I have done it with my view.php, your hard-coded anchor is always added to the links in the page list. It doesn't add them only after clicking the pagination numbers. Will this not work?

I'm heading out for the evening.
Mellow replied on at Permalink Reply
I appreciate this is confusing. I am going to look through this again and will reply later on on the points you made.

Thank you for your patience
Mellow replied on at Permalink Reply 1 Attachment
So when user clicks the page number 2, the website reloads and URL changes
from
websitedotcom/case-studies/

to
websitedotcom/case-studies/?ccm_paging_p_b330=2

My intention is to add an anchor link at the end of that additional URL so it looks like this:
websitedotcom/case-studies/?ccm_paging_p_b330=2#my-anchor

To answer your questions, I tested your solution, but with removed code relating to attributes. It didn't work for me, but I am certain I made a mistake in modifying the code. A modified version of my code is attached with this message (file 'blog_index.php')

I hope this is a better explanation. And I am truly grateful for your help
mhawke replied on at Permalink Best Answer Reply
mhawke
A couple of things...

What are you hoping to accomplish with this URL?

websitedotcom/case-studies/?ccm_paging_p_b330=2#my-anchor


The URL that the pagination button spits out when you click one of the numbers simply tells the Page List block which page of links to render. If you add your anchor tag to the end of that URL, the page that contains the Page List (the page you are already on) will navigate down to the anchor if the current page contains the anchor somewhere. Is that what you want? Try out it. Add an anchor somewhere further down the page that contains the Page List. Manually add the #anchor-tag text to the end of the URL and hit 'enter' and see what happens. The page should reload and navigate to the anchor.

Also, the blog_index.php file is a Page Type file and serves a very different purpose than the view.php file from the Page List block so I have no doubt that my solution didn't work in the context of the blog_index.php file.

What user experience are you trying to create? Perhaps there is another way to achieve this experience.
Mellow replied on at Permalink Reply
"...if you add your anchor tag to the end of that URL, the page that contains the Page List (the page you are already on) will navigate down to the anchor if the current page contains the anchor somewhere. Is that what you want?"

Precisely. I have an anchor tag already created, and I successfully used the same idea in several pages. When I imitate it by adding anchor tag manually and hit enter, it works the way I want.

This feature has been requested by my client, and as I mentioned, I used it in other parts of the website with the following script:
element_to_scroll_to = document.getElementById('anchor-tag')
element_to_scroll_to.scrollIntoView()

Based on that, I could write a function to check website url, and then launch that script when needed. (alternative)

But ideally, I want to modify blog index file without adding the attribute.

The adjustments I made based on your code seems to be logical. At least to my understanding :)
Mellow replied on at Permalink Reply
So yes, thanks to your advise about alternatives, I have used this script and it works:
$(document).ready(function () {
    if(window.location.href.indexOf("ccm_paging") > -1) {
      element_to_scroll_to = document.getElementById('anchor-tag');
element_to_scroll_to.scrollIntoView();
    }
});

There is however a slight delay before jumping to anchor. But on the second attempt it feels immediate..
mhawke replied on at Permalink Reply
mhawke
Glad you have something working. My first thought was to use jQuery to add the anchor text to the href's but I was unclear what you were trying to accomplish. Using a server side solution would delay things even more because the page has to reload and then scroll. Is it possible that the original delay was because the page hadn't loaded completely and the second time you clicked it, the page was cached in the browser?
Mellow replied on at Permalink Reply
It can be the case. I tested it on iPhone, iPad and other browsers too and didn't notice any delay so it is all solved now. Thanks to you!