Home › Forums › Pro Support › Hide container when post list is empty
Tagged: empty, hide container, post list
- This topic has 15 replies, 2 voices, and was last updated 5 years, 1 month ago by
Tom.
-
AuthorPosts
-
July 3, 2018 at 4:20 am #5097
Janek
ParticipantHi Tom/Leo,
I’ve got another question from my bottomless bag of questions… Just wondering if theres a way to hide show posts lists containing div when they are empty. Like a script that checks to see if theres content and if not hide parent div? Not sure if you could achieve this in PHP or Javascript.
Basically I’d like it so the client doesn’t have to touch the classes attribute in Generate Press sections just to hide a section when the show posts in that section is empty for a day or two.
July 4, 2018 at 6:28 pm #5127Tom
KeymasterYou could use javascript, but it would be pretty hacky and cause a visible flash/jump. I don’t think there’s another way to do it unfortunately.
July 4, 2018 at 8:29 pm #5131Janek
ParticipantIt probably wouldn’t be so bad since the sections that feature a list are further down the home page and not immediately visible. If we set it up to hide the specific sections by default and only appear when there is content it might just appear like the page is just loading elements.
I’m no expert but I was thinking of maybe some kind of script that checks for a post entry in a specific list ID and if posts found in the list it would add a class to the list ID. The class could then have an attribute like ‘display:block’ that overrides the initial “display:none” attribute. Just a thought.
I’m happy to give this a crack myself but if you are able to assist I’d appreciate it.
July 5, 2018 at 9:40 pm #5141Tom
KeymasterCan you link me to a page with an empty list?
July 6, 2018 at 7:30 pm #5154Janek
ParticipantHey Tom,
The URL is http://janek-dev.flywheelsites.com/
If you scroll down to the very bottom theres a section with no posts. I can give you admin access if you need.The password to view the site is the same as before, you should have an email from me containing those details from a few weeks back, if not I can resend.
Thanks for taking a look.
July 7, 2018 at 8:55 pm #5163Tom
KeymasterHey Janek, I’m afraid I can’t find the login info. Can you re-send?
Thanks!
July 8, 2018 at 6:03 pm #5171Janek
ParticipantHey Tom, I’ve forwarded the original email I sent. Let me know if you don’t receive it.
July 10, 2018 at 10:03 am #5191Tom
KeymasterGive this a shot:
jQuery( document ).ready( function( $ ) { if ( $( '#wpsp-no-results' ).length ) { $( '#wpsp-no-results' ).closest( '.generate-sections-container' ).hide(); } } );
July 10, 2018 at 11:21 pm #5198Janek
ParticipantHey Tom, thanks for helping with this.
With your code, I get ‘Uncaught SyntaxError: Unexpected token .’ for the .length within my browser. Any ideas?
July 11, 2018 at 8:47 pm #5222Tom
KeymasterMy bad, can you try now?
July 12, 2018 at 2:30 am #5223Janek
ParticipantStill wasn’t working so I had a blind man’s tinker and somehow managed to find the problem.
In the end the only remaining problem was you had an ID instead of a class designated for the container. What I ended up using was:
jQuery( document ).ready( function( $ ) { if ( $( '.wpsp-no-results' ).length ) { $( '.wpsp-no-results' ).closest( '.generate-sections-container' ).hide(); } } );
And it works perfectly! Such a good result for such a small amount of code.
Thanks so much for helping with this. Now I also know how to use the .closest tag. 🙂
July 12, 2018 at 7:30 pm #5242Tom
KeymasterAha, glad you got it working! 🙂
August 1, 2018 at 1:38 am #5521Janek
ParticipantHey Tom,
Sorry to drag this one back out, but I’m having an issue with this. I have a second WP Show Posts list that should hide when empty but it doesnt. This is due to the fact that it doesnt apply a .wpsp-no-results class when empty.
I’m completely at a loss why it wouldnt apply that class to itself like the other one on the page, I’ve tried to recreate it with a new list as well, and same thing happens.
To view the section with the list in it you can access my staging site:
http://staging.janek-dev.flywheelsites.com/Username to view the site is collaborator… and surely you know what the password is by now. 😉
I’ve been doing tests here to no avail. If you access the page source and search for .wpsp-no-results you can see that it only appears once and thats in the #upcoming-airshows div section which has hidden automatically with the code you supplied earlier. The other one that should hide is the #next-episode div, but its not it just sits there and wont add the no results class to itself even though its empty.
I still need to reply to your other posts on here, and I apologise for not getting to them sooner. The site proper launched last night and leading up to it I’ve been doing last minute bug fixes. Obviously I didnt catch them all. 😛
August 2, 2018 at 5:04 pm #5543Tom
KeymasterI wonder if you could do this:
jQuery( document ).ready( function( $ ) { $( '.wp-show-posts' ).each( function() { var _this = $( this ); if ( 'Sorry, no posts were found.' === _this.find( 'p:first-child' ).text() ) { _this.closest( '.generate-sections-container' ).hide(); } } ); } );
August 2, 2018 at 5:12 pm #5548Janek
ParticipantAwesome, that seems to work perfectly. Thanks.
Although do you know why the other Show Posts container wasnt having the no-results class applied to it?
Seems quite odd.
-
AuthorPosts
- You must be logged in to reply to this topic.