[Support request] Text charging post

Home Forums Support [Support request] Text charging post

Home Forums Support Text charging post

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2180859
    carlos

    Buenas tardes,

    He cambiado las entradas del blog para que se carguen con la opcion scroll infinito de generatepress.
    Me gustaria que mientras se cargan las entradas aparezca el texto “charging post”.

    Como en el blog que adjunto en la imagen.

    https://www.dropbox.com/s/zvyigwdtfcossih/Screenshot_1.png?dl=0

    https://www.webpositer.com/blog/

    Este seria mi blog

    https://www.dropbox.com/s/45iy1i65fe0uxiu/Screenshot_2.png?dl=0

    ¿Es posible añadir el texto “charging post” mientras se cargan las entradas?

    Un saludo

    https://safegest.com/blog/

    #2180873
    David
    Staff
    Customer Support

    Hi there,

    GP uses Metafizzy Infinite Scroll – which has the following options:

    https://infinite-scroll.com/options.html

    And GP has the generate_blog_infinite_scroll_init filter hook that you can use to filter in other arguments.
    Looking at the above metafizzy options there is a status option:

    https://infinite-scroll.com/options#status

    Which will display the HTML elements with the specified class.

    So you should be able to do this:

    add_filter( 'generate_blog_infinite_scroll_init', function( $args ) {
        $args['status'] = '.page-load-status';
    
        return $args;
    } );

    Then you just need to use a Hook Element to add in the HTML with the messages you want displayed:

    <div class="page-load-status">
      <p class="infinite-scroll-request">Loading...</p>
      <p class="infinite-scroll-last">End of content</p>
      <p class="infinite-scroll-error">No more pages to load</p>
    </div>
    #2180903
    carlos

    Muchas gracias David!!!

    Lo conseguimos tal y como dijiste!!!! gracias…

    https://safegest.com/blog/

    Como soy una persona muy perfeccionista me gustaria saber si podria colocar las marcas de movimiento que se muestran en su pagina.

    https://www.dropbox.com/s/zvyigwdtfcossih/Screenshot_1.png?dl=0

    https://www.webpositer.com/blog/

    Un saludo…

    #2180918
    David
    Staff
    Customer Support

    OK so that example site has this HTML in their status container:

    <div class="fusion-loading-spinner">
        <div class="fusion-spinner-1"></div>
        <div class="fusion-spinner-2"></div>
        <div class="fusion-spinner-3"></div>
    </div>

    And i skimmed over end edited the CSS it uses for the layout and animation:

    .fusion-loading-spinner {
        display: inline-block;
    }
    
    .fusion-loading-spinner .fusion-spinner-1,
    .fusion-loading-spinner .fusion-spinner-2,
    .fusion-loading-spinner .fusion-spinner-3 {
        width: 12px;
        height: 12px;
        background-color: #e2e0e0;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: fusion-bounce-delay 1.4s infinite ease-in-out;
        animation: fusion-bounce-delay 1.4s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    .fusion-loading-spinner .fusion-spinner-1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }
    
    .fusion-loading-spinner .fusion-spinner-2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
    
    .fusion-loading-spinner .fusion-loading-msg {
        display: inline-block;
        margin-left: 7px;
    }
    
    @-webkit-keyframes fusion-bounce-delay {
    
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
        }
    
        40% {
            -webkit-transform: scale(1);
        }
    }
    
    @keyframes fusion-bounce-delay {
    
        0%,
        80%,
        100% {
            transform: scale(0);
            -webkit-transform: scale(0);
        }
    
        40% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
    }
    #2180980
    carlos

    Muchas gracias David, he creado otro Hook para esta funcion.

    Y funciona perfectamente, el error es que al llegar al final del contenido continua haciendo el loading… al llegar al final del contenido deberia desaparecer…

    https://www.dropbox.com/s/mwhbrw5we4m6hrn/zzz.png?dl=0

    https://safegest.com/blog/

    ¿se podria hacer con css?

    #2180998
    David
    Staff
    Customer Support

    Ok if you go back to the status HTML:

    <div class="page-load-status">
      <p class="infinite-scroll-request">Loading...</p>
      <p class="infinite-scroll-last">End of content</p>
      <p class="infinite-scroll-error">No more pages to load</p>
    </div>

    Then you need to include the 3 dots HTML within the request element ie.:

    <p class="infinite-scroll-request">Loading...</p>

    You could do something like this:

    <div class="page-load-status">
        <div class="infinite-scroll-request">
            <div class="fusion-loading-spinner">
                <div class="fusion-spinner-1"></div>
                <div class="fusion-spinner-2"></div>
                <div class="fusion-spinner-3"></div>
            </div>
            <p class="infinite-scroll-request-text">Loading...</p>
        </div>
        <p class="infinite-scroll-last">End of content</p>
        <p class="infinite-scroll-error">No more pages to load</p>
      </div>

    That way the fusion-loading-spinner will only appear when the infinite-scroll-request is.

    #2181198
    carlos

    Perfecto David!!!!

    Funciona… muchas gracias!!!!!

    #2181207
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

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