[Resolved] Hide section on pagination

[Author]

Posts

[Pete]

Hi there,

A few weeks ago we asked for a little help regarding hiding something on scroll, this worked great and is here:

https://toolset.com/forums/topic/conditional-block-set-to-pagination/

You can see this working here: hidden link
The moment you click the pagination button at the bottom, the info text at the very bottom is hidden.

However, we have changed the structure of this template and got rid of a few elements.
No matter what I do I can't get it to work on this test template:

hidden link

This the JS:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

var x = jQuery(".js-wpv-view-layout").data('pagination');
var selector = '.inner-column-1 .hide-mob-map';
if(x.page > 1){
jQuery( selector ).hide()
}else{
jQuery( selector ).show();
}
});

Any ideas what I have to do please?
var selector = '.inner-column-1 .hide-mob-map';

I have tried all kinds of variations and keep on breaking things.

Many thanks, Pete

[Shane]

Hi Pete,

Thank you for getting in touch.

Try using the single class selector like below.

jQuery(".hide-mob-map").show()

I've tested this on your site and it works.

Please let me know if this helps.
Thanks,
Shane

[Pete]

Hey Shane,

Many thanks, I did try this but not as you have it and it broke stuff.

Can you supply all the JS code as I'm unsure what to do with this and where to place it in what I have.

Thank you.

[Shane]

Hi Pete,

You can try doing it like this.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

var x = jQuery(".js-wpv-view-layout").data('pagination');
var selector = '.inner-column-1 .hide-mob-map';
if(x.page > 1){
jQuery('.inner-column-1').hide();
jQuery('.hide-mob-map').hide();
}else{
jQuery('.inner-column-1').show();
jQuery('.hide-mob-map').show();
}
});

Please let me know if this helps.
Thanks,
Shane

[Pete]

Hey Shane,

Hope you are well. OK tried that and on clicking pagination the whole screen go's white.

We have a staging site set up at the moment so you can see this here:
hidden link

Note, as a staging site it is 'really' slow so you need to wait a sec after you've clicked pagination 🙂

Thank you. Pete

[Shane]

Hi Pete,

I'm not understanding the full context of your code.

Why is the section being hidden in the first place? Are you applying Javascript to the section for the pagination for it to be hidden ?

I need a little background information also can you re-add your original code back instead of the one that I modified.

Also is the code below the only Javascript being applied for the pagination callback function ?

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

var x = jQuery(".js-wpv-view-layout").data('pagination');
var selector = '.inner-column-1 .hide-mob-map';
if(x.page > 1){
jQuery( selector ).hide()
}else{
jQuery( selector ).show();
}
});

Thanks,
Shane

[Pete]

Hey Shane,

This worked great as sorted in this ticket: https://toolset.com/forums/topic/conditional-block-set-to-pagination/

The whole point is the text is just faf, text for the sake of it just in case some wishes to explore the area.
Upon pagination we felt it was info not needed the the end of every page, so Minesh supplied code that after the pagination was clicked, this text no longer is there.

Works fine on this page: hidden link

We've changed the block structure about a bit and now the code Minesh supplied wont work.

[Shane]

Hi Pete,

Ok well not sure its not working as intended with the new structure however this should be able to get you started.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery(".hide-mob-map").show()
});

The code above should trigger the text section to show after the pagination is completed. Just add this in addition to your existing code.

Thanks,
Shane

[Pete]

Hi Shane,

I fear you are not seeing what was already working on the live site.

Does the code above result in:
The text is there, and then hidden when someone used pagination?

The test should be there on page load, hidden 'after' pagination is triggered.

Just like this page: hidden link

[Shane]

Hi Pete,

Ok I understand now. Then the fix would be to just use this

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
var x = jQuery(".js-wpv-view-layout").data('pagination');

if(x.page > 1){
jQuery(".hide-mob-map").hide();
}else{
jQuery(".hide-mob-map").show();
}

});

Thanks I understand fully now. Please try the above. If that doesn't work would you mind allowing me to have admin access so that I can check in further detail for you.

Thanks,
Shane

[Pete]

Hi Shane,

Losing the will to live with this! The page still go's blank when you hit scroll?

I can give you access however you'll need to make this message privet before doing so!

Just about to make the ticket 'not resolved' and give up on this, took no time to sort initially!

This the page: hidden link

This the code:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

var x = jQuery(".js-wpv-view-layout").data('pagination');
 
if(x.page > 1){
jQuery(".hide-mob-map").hide();
}else{
jQuery(".hide-mob-map").show();
}
});

Just want to get this done, it's taking days!

[Shane]

Hi Pete,

Please provide me with admin access to the site so that I can do a proper debug on the issue here.

Perhaps this will help to speed things up a bit.

Thanks,
Shane

[Shane]

Hi Pete,

To resolve this I had to add a unique CSS class to the section then update the JS to apply to that new css class.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
jQuery('html, body').animate({ scrollTop: (jQuery(".js-wpv-view-layout").offset().top) - 220 }, 'slow');

var x = jQuery(".js-wpv-view-layout").data('pagination');
 
if(x.page > 1){
jQuery(".hide-mob-map.text").hide();
}else{
jQuery(".hide-mob-map.text").show();
}
});

This is now the new code. Notice i've added a "text" css class in to the section that you want to be hidden after the pagination.

Thanks,
Shane

[Pete]

My issue is resolved now. Thank you!