Sujet Précédent Sujet Suivant

Masquer partiellement texte long, Afficher texte long au clic

Fermé
furyfatal - Modifié le 10 juin 2019 à 20:54
jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 - 11 juin 2019 à 14:32
Bonjour,

Je n'arrive pas à afficher les textes trop longs que j'ai masqué partiellement par défaut. Cela ne marche que pour le dernier message. Voici mon code :

**Modifié par la modération pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lire la suite</title>
    <style>
        .next {
            padding:5px 8px;
            border:1px solid;
            border-radius:25px;
            background-color: #e2e2d2;
            cursor: pointer;

            display:none; /* Caché par défaut */

            position:absolute;
            bottom:0;
            z-index:99;
        }
        .post {
            max-width: 500px;
            overflow: hidden;

            position:relative;
            z-index:1;
        }
        hr {margin:30px auto}
    </style>
</head>
<body>
    <div class="post">
        <p>Message 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, tempora nesciunt enim tenetur exercitationem sed sint dolorum dolore incidunt nobis quis laboriosam nam molestiae repellat aut blanditiis nisi maxime harum vitae ducimus non explicabo vel quod. Corrupti illo doloribus ratione, quasi fuga provident unde repellendus saepe porro similique voluptates dolor quam voluptatem deserunt alias voluptate maiores reprehenderit, eaque voluptas repudiandae. Aut aliquam ad aliquid sed dolore pariatur voluptatibus qui dolorum asperiores quos deleniti doloremque voluptate at accusamus voluptatem recusandae deserunt assumenda in, distinctio modi dicta! Dolor, molestiae? Ratione ipsum numquam nobis debitis eveniet omnis, laborum eos asperiores illo dolores quas consectetur maxime distinctio doloribus dolore veniam incidunt reprehenderit corporis. Quisquam facilis, id cumque numquam explicabo, nulla velit provident dolorum excepturi alias assumenda iusto sint impedit. Dolor error ducimus cupiditate exercitationem quam voluptas molestias, dignissimos odio, esse vero est saepe. Beatae praesentium quod voluptates dicta labore exercitationem sequi quis qui voluptate. Dignissimos harum error, blanditiis voluptatum molestiae corporis omnis doloremque deserunt voluptates ad accusamus, rem enim reprehenderit nemo perferendis adipisci! Veniam, non voluptatum nulla commodi placeat adipisci debitis aut nisi facere. Quia similique provident qui dicta eveniet quos temporibus molestias nisi, commodi perspiciatis, aliquam inventore. Atque excepturi voluptatum accusantium sunt !!</p>
        <button class="next">Lire la suite</button>
    </div>
    
    <hr>

    <div class="post">
        <p>Message 2. Lorem ipsum dolor sit amet, consectetur adipisicing el !!</p>
        <button class="next">Lire la suite</button>
    </div>

    <hr>

    <div class="post">
        <p>Message 3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis labore consequatur aspernatur nesciunt cupiditate? Labore, ducimus. Alias explicabo quas est voluptatibus nisi. Voluptatibus ab facere incidunt tempora numquam quam in consectetur magnam necessitatibus placeat suscipit nulla sit unde deserunt, eos accusamus magni temporibus consequatur fuga dolorum, impedit corrupti enim? Culpa numquam incidunt cumque earum suscipit veniam? Aperiam dolore, eligendi nam mollitia alias quidem illum modi officia odit saepe assumenda a perspiciatis, fugiat earum iusto reiciendis hic ab doloribus beatae cum aliquid? Consectetur, magnam labore hic beatae repudiandae iure eius. Aspernatur, vel eaque vero beatae, magnam eos est amet dolorem voluptatibus minus tempore commodi quidem impedit explicabo eum! Mollitia iure perferendis, libero iusto nostrum quod similique, aliquid ipsa eum fugit in laboriosam, cumque neque corporis quam deserunt quo nam consequatur dolorum. Consequatur hic, sequi laborum animi ab aut quas rerum nam voluptates! Eveniet autem nihil ratione quidem ipsa dolore similique voluptatum quas ea explicabo saepe laudantium quisquam reiciendis iste cupiditate quibusdam sequi excepturi, ipsum numquam? Mollitia eius temporibus sequi non esse beatae quia sunt pariatur commodi labore, quo a perspiciatis itaque quod qui dolor iste quibusdam! Quidem pariatur nobis consequuntur omnis harum dolores quod quia assumenda laudantium voluptates voluptatem vitae provident earum praesentium doloremque quasi repudiandae nisi, dignissimos reprehenderit, molestias saepe incidunt eveniet velit. Sunt facilis reprehenderit delectus, fugiat pariatur quos esse officiis, quod repellat temporibus ut dolorum nesciunt suscipit dicta ratione et similique veniam. Consectetur maiores explicabo fugit a, ipsam quas. Error quo consectetur magni voluptate aut eveniet. Est optio officiis facere animi am !!</p>
        <button class="next">Lire la suite</button>
    </div>

    <hr>

    <div class="post">
        <p>Message 4. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis labore consequatur aspernatur nesciunt cupiditate? Labore, ducimus. Alias explicabo quas est voluptatibus nisi. Voluptatibus ab facere incidunt tempora numquam quam in consectetur magnam necessitatibus placeat suscipit nulla sit unde deserunt, eos accusamus magni temporibus consequatur fuga dolorum, impedit corrupti enim? Culpa numquam incidunt cumque earum suscipit veniam? Aperiam dolore, eligendi nam mollitia alias quidem illum modi officia odit saepe assumenda a perspiciatis, fugiat earum iusto reiciendis hic ab doloribus beatae cum aliquid? Consectetur, magnam labore hic beatae repudiandae iure eius. Aspernatur, vel eaque vero beatae, magnam eos est amet dolorem voluptatibus minus tempore commodi quidem impedit explicabo eum! Mollitia iure perferendis, libero iusto nostrum quod similique, aliquid ipsa eum fugit in laboriosam, cumque neque corporis quam deserunt quo nam consequatur dolorum. Consequatur hic, sequi laborum animi ab aut quas rerum nam voluptates! Eveniet autem nihil ratione quidem ipsa dolore similique voluptatum quas ea explicabo saepe laudantium quisquam reiciendis iste cupiditate quibusdam sequi excepturi, ipsum numquam? Mollitia eius temporibus sequi non esse beatae quia sunt pariatur commodi labore, quo a perspiciatis itaque quod qui dolor iste quibusdam! Quidem pariatur nobis consequuntur omnis harum dolores quod quia assumenda laudantium volupta !!</p>
        <button class="next">Lire la suite</button>
    </div>
    

    
    <script>
        var posts = document.querySelectorAll(".post");

        for (var i=0; i<posts.length; i++) {

            var h = document.querySelectorAll(".post")[i].clientHeight; // Connaitre hauteur : clientHeight ou offsetHeight

            if (h>200) {
                var post = document.querySelectorAll(".post")[i];
                var button = document.getElementsByClassName("next")[i];

                post.style.height = "200px"; // Si la hauteur > 200, on limite à 200px de hauteur
                button.style.display = "block"; // Bouton "Lire la suite" visible
                button.addEventListener("click", funct_show)
            }

            function funct_show(event) {
                post.style.height = "100%";
                this.style.display = "none"; // On enlève le bouton une fois le texte restant affiché
            }

        }

    </script>
</body>
</html>





Merci d'avance
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
11 juin 2019 à 09:09
Bonjour,

C''est normal que ça ne prenne que le dernier.....
ton élément post est issue de la boucle que tu as fait juste avant.....

Pour corriger ton souci 
function funct_show(event) {
     let post =  this.parentNode;
      post.style.height = "100%";
      this.style.display = "none"; // On enlève le bouton une fois le texte restant affiché
}

1
Réponse 2 / 2
furyfatal
11 juin 2019 à 11:20
Merci, ça marche !

Mais j'ai encore un problème : le bouton. J'aimerais le décaler plus bas et le mettre après les paragraphes, mais ça ne marche pas, car j'ai mis overflow:hidden pour cacher le dépassement.

J'ai pensé à mettre le bouton en dehors de la div. Mais dans ce cas, this.parentNode ne marche pas.
0
jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
11 juin 2019 à 14:32
A mon avis... avec un peu de CSS tu pourrais y parvenir...
Merci de mettre cette discussion en RESOLUE et d'en ouvrir une nouvelle propre à ce nouveau problème (dans le forum css )
0

Discussions similaires

3 bip long 2 bip courts
bgielel -
Bgiebgielel -

14 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
copie de texte
jean -
jean -

5 réponses