Skip Navigation

[Resolved] Hide section on pagination

This support ticket is created 2 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 13 replies, has 2 voices.

Last updated by Pete 2 years, 8 months ago.

Assisted by: Shane.

Author
Posts
#2116639

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

#2116653

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2116659

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.

#2116773

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2118117

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

#2118961

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2118983

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.

#2119087

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2119139

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

#2119231

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2119847

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!

#2119981

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2120117

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

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

#2120259

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.