[Resolved] The pagination block should not fade or slide with the main section

[Author]

Posts

[AlimB3245]

Tell us what you are trying to do? I've set up a VIEW where images are shown and they are given the pagination setting of Slide Left and it's working fine.. and then I have added pagination.. but normally when there's a slider the banners or images should slide but the pagination section (dots, number etc) remain static and don't slide or fade along with the image.. but in Toolset I find it strange that it does.. maybe I am doing something wrong.. so please help me make the pagination part fixed and not slide/fade with the images.

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site? hidden link

[Waqar]

Hi Alim,

Thank you for contacting us and I'd be happy to assist.

Your observation is correct and the pagination slides/fades with the results when the view is set to update the results through AJAX.

We have an internal ticket to improve this in future releases, but I'm afraid, I don't have a time estimate to share at this time.

For now, as a workaround, you can use the following steps for each view on that page:

1. Please note the ID of your view that you're working with, from WP Admin -> Toolset -> Views.

For this explanation, suppose that we're working with the View "Current Issue Articles" with ID 17291.

2. Just below your view's block, you can include a "Custom HTML" block with an empty div container with a class name in a format "shadow-pagination-{view ID}".

Example:

<div class="shadow-pagination-17291"></div>

3. In your view's "Custom CSS" field, you can include some custom CSS code to hide the actual pagination links:

.js-wpv-view-layout-17291 .wpv-pagination-nav-links {
display: none;
}

4. And in the same view's "Custom JS" field, you can include some custom script that copies the pagination's content from the actual container to the shadow container added in step 2:

// function to copy pagination's content from one div to another
function updatePagination17291() {
	jQuery('.shadow-pagination-17291').html('');
	jQuery(".js-wpv-view-layout-17291 .wpv-pagination-nav-links").appendTo(".shadow-pagination-17291");
}

// execute the updatePagination function on page load and pagination update through AJAX
jQuery( document ).on( 'js_event_wpv_pagination_completed ready', function( event, data ) {
	updatePagination17291();
});

I hope this helps and you can repeat the same steps for other views, making sure to change the View's ID.

regards,
Waqar

[AlimB3245]

Hi Waqar

Thanks for the update...:-)..

I did try to use your code to make the pagination icon to disappear (display:none;) and replace.. but I couldn't..

I've used it on the Current Issue Articles here... hidden link

I've attached screenshots too.. please do check and let me know what I am doing wrong..

Regards,
Alim

[Waqar]

Hi Alim,

Thanks for writing back.

Since the views are now being used on a different page than they were originally created on, the following changes were needed:

1. The HTML for the shadow pagination needs to be under view's block inserted on the actual page.
( screenshot: hidden link )

2. The custom CSS code needed to be changed to:

div[class*="js-wpv-view-layout-17482"] .wpv-pagination-nav-links {
display: none;
}

3. The custom JS code needed to be changed to:

// function to copy pagination's content from one div to another
function updatePagination17482() {
	var pagiContent = jQuery('div[class*="js-wpv-view-layout-17482"] .wpv-pagination-nav-links').html();
	jQuery('.shadow-pagination-17482').html(pagiContent);
}
 
// execute the updatePagination function on page load and pagination update through AJAX
jQuery( document ).on( 'js_event_wpv_pagination_completed ready', function( event, data ) {
	updatePagination17482();
});

regards,
Waqar

[AlimB3245]

My issue is resolved now. Thank you!

It works fine now.. please do keep me posted, if possible, whenever the feature is fixed so that I don't have to use the workaround..;-)..

Thanks again.. have a nice day..:-)..

Regards,
Alim