We're merging with GenerateBlocks! Learn more here.

[Resolved] Hide container when post list is empty

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Hide container when post list is empty

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #5097
    Janek
    Participant

    Hi 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.

    #5127
    Tom
    Keymaster

    You 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.

    #5131
    Janek
    Participant

    It 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.

    #5141
    Tom
    Keymaster

    Can you link me to a page with an empty list?

    #5154
    Janek
    Participant

    Hey 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.

    #5163
    Tom
    Keymaster

    Hey Janek, I’m afraid I can’t find the login info. Can you re-send?

    Thanks!

    #5171
    Janek
    Participant

    Hey Tom, I’ve forwarded the original email I sent. Let me know if you don’t receive it.

    #5191
    Tom
    Keymaster

    Give this a shot:

    jQuery( document ).ready( function( $ ) {
        if ( $( '#wpsp-no-results' ).length ) {
            $( '#wpsp-no-results' ).closest( '.generate-sections-container' ).hide();
        }
    } );
    #5198
    Janek
    Participant

    Hey Tom, thanks for helping with this.

    With your code, I get ‘Uncaught SyntaxError: Unexpected token .’ for the .length within my browser. Any ideas?

    #5222
    Tom
    Keymaster

    My bad, can you try now?

    #5223
    Janek
    Participant

    Still 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. 🙂

    #5242
    Tom
    Keymaster

    Aha, glad you got it working! 🙂

    #5521
    Janek
    Participant

    Hey 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. 😛

    #5543
    Tom
    Keymaster

    I 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();
            }
        } );
    } );
    #5548
    Janek
    Participant

    Awesome, 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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.