Jump to content
Sign in to follow this  
XRS

html_decode + substring + JS

Recommended Posts

XRS

Boa tarde,

 

Estou com alguns problemas na criação de um uma situação tipo blog onde é mostrado um excerto do texto, aparece um botão de "Show More/Less" que ao carregar apresenta/esconde o restante texto. O texto está a ser guardado como html. Se utilizar a informação como texto simples, funciona perfeitamente, mas as tags HTML aparecem como texto simples. No entanto se efetuar um html_decode ou html_entity_decode o sistema de "Mostrar/Esconder" o texto deixa simplesmente de funcionar. Será que me podem ajudar neste sentido?

O código do JS e PHP sem alterações com o HTML_decode:

    $item->description =  strip_tags($item->description);
    if( strlen( $item->description ) > 70 ) {
        $item->description = substr($item->description, 0, 50 ) .
        '<span class="more-link">... <a href="#"><i class="fa fa-caret-down"></i> ' . t( 'theme_more', 'More' ) . '</a></span>' .
        '<span class="hidden-part">' . substr( $item->description, 50 )  . '</span>' .
        '<span class="less-link"><a href="#"><i class="fa fa-caret-up"></i> ' . t( 'theme_less', 'Less' ) . '</a></span>';
    }
$( '.description .more-link a, .description .less-link a' ).on( 'click', function(e) {
    e.preventDefault();
    var desc = $(this).parents( '.description' );
    var part = desc.find( '.hidden-part' ),
    more = desc.find( '.more-link' ),
    less = desc.find( '.less-link' );
    if( part.is( ':visible' ) ) {
        part.hide();
        more.show();
        less.hide();
    } else {
        part.show();
        more.hide();
        less.show();
    }
});

 

Utilizando o sistema como plain text, funciona perfeitamente:

P8ZcjTn.png

Ao carregar em More:

MwIwjnS.png

 

No entanto se efetuar um html_decode ao texto:

    $item->description =  html_decode($item->description);
    if( strlen( $item->description ) > 70 ) {
        $item->description = substr($item->description, 0, 50 ) .
        '<span class="more-link">... <a href="#"><i class="fa fa-caret-down"></i> ' . t( 'theme_more', 'More' ) . '</a></span>' .
        '<span class="hidden-part">' . substr( $item->description, 50 )  . '</span>' .
        '<span class="less-link"><a href="#"><i class="fa fa-caret-up"></i> ' . t( 'theme_less', 'Less' ) . '</a></span>';
    }

 

Fico com tudo desfigurado:

eb8HZMi.png

 

Depois de carregar no More:

gEAEnPF.png

Não estou a conseguir ultrapassar esta dificuldade. Alguma ideia ou sugestão de forma a conseguir ultrapassar isto?

Muito obrigado :)

Share this post


Link to post
Share on other sites
HappyHippyHippo

isso é porque estás a quebrar HTML quando fazes substr

já reparaste que nos sites que vês online, eles nunca quebram o texto ? o que acontece é esconder/apresentar uma zona de conteúdo


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XRS

Realmente não me tinha passado isso pela cabeça, mas faz todo o sentido...

Eu via algum texto do <p> e pensava que não parava em nenhum código HTML, portanto não podia dar o break às tags.

A verdade é que ele abre o <p> mas depois não aparece o texto todo e não fecha o respetivo <p>. Faz todo o sentido. Obrigado pela informação :) Vou criar uma função para ler o primeiro paragrafo e fazer o substr aí.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.