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:
I've tried adding the following line of code, but without any success...
If anyone has a solution to this, you would be saving me loads of time and probably for anyone else who faced it too :)
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 :)
Let me know guys if I'm too complicated with my explanation...
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
I wonder if there is a way to add an anchor link to this one?
$uh = Loader::helper('concrete/urls');
I wonder if there is a way to add an anchor link to this one?
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.
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.
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
Is it possible to have an anchor tag name directly instead of calling the attribute? Something like this?
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!!
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!!
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.
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.
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.
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:
In my understanding I only have to attach an anchor tag for a variable called link?
I hope this makes more sense now :)
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:
In my understanding I only have to attach an anchor tag for a variable called link?
I hope this makes more sense now :)
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
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
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.
I'm heading out for the evening.
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
Thank you for your patience
So when user clicks the page number 2, the website reloads and URL changes
from
to
My intention is to add an anchor link at the end of that additional URL so it looks like this:
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
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
A couple of things...
What are you hoping to accomplish with this URL?
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.
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.
"...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:
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 :)
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 :)
So yes, thanks to your advise about alternatives, I have used this script and it works:
There is however a slight delay before jumping to anchor. But on the second attempt it feels immediate..
$(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..
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?
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!
