Afficher la suite (agrandir un div)
Résolu/Fermé
LeKiffeur
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
-
6 mars 2017 à 23:10
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017 - 8 mars 2017 à 20:40
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017 - 8 mars 2017 à 20:40
A voir également:
- Afficher la suite (agrandir un div)
- Comment agrandir une image - Guide
- Raccourci agrandir fenetre - Guide
- Afficher appdata - Guide
- Afficher mot de passe wifi android - Guide
- Comment agrandir l'affichage de l'écran - Guide
5 réponses
jordane45
Messages postés
38347
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 décembre 2024
4 719
7 mars 2017 à 00:02
7 mars 2017 à 00:02
Bonjour,
A l'arrache :
A l'arrache :
<!DOCTYPE html> <html> <head> <title> TEST </title> <style> .madiv { background-color: #fba576 ; position:relative; color: rgb(0,165,226); border: 3px rgb(0,165,226) solid; border-radius: 10px; width: 200px; height:40px; max-height:40px; overflow: hidden; } </style> </head> <body> <div class="madiv" id="m_div1"> <span style="float:right; position:absolute;bottom:0;right:3px" onclick="agrandiroureduire()">[...]</span> <pre style="float:left; width:100px"> ceici est du texte sur plusieurs lignes ligne 2 ligne 3 ligne 4 ligne 5 ligne 7 ligne 8 ligne 9 </pre> </div> <script type="text/javascript"> function agrandiroureduire(){ var ladiv = document.getElementById('m_div1'); if(ladiv.style.maxHeight == "none"){ ladiv.style.maxHeight = "40px"; ladiv.style.height = "40px"; }else{ ladiv.style.maxHeight = "none"; ladiv.style.height = "auto"; } } </script> </body> </html>
LeKiffeur
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
7 mars 2017 à 00:04
7 mars 2017 à 00:04
Rapide ! Merci je teste cela demain... Dire que j'ai passé des heures pour fabriquer un script et qui n'est pas au point...
LeKiffeur
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
7 mars 2017 à 20:40
7 mars 2017 à 20:40
Je viens de tester ton script.
C'est déjà du style de tout ce que j'ai pu trouvé. Ce qu'il me manque c'est de n'avoir la possibilité d'étendre la div uniquement quand il y a besoin, s'il n'y a qu'une ligne pas besoin.
Egalement que le texte sur lequel on clique disparaisse après avoir cliqué dessus.
Voici ce que j'ai fais pour l'instant mais je ne suis pas encore arrivé à ce que je souhaite.
C'est déjà du style de tout ce que j'ai pu trouvé. Ce qu'il me manque c'est de n'avoir la possibilité d'étendre la div uniquement quand il y a besoin, s'il n'y a qu'une ligne pas besoin.
Egalement que le texte sur lequel on clique disparaisse après avoir cliqué dessus.
Voici ce que j'ai fais pour l'instant mais je ne suis pas encore arrivé à ce que je souhaite.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> #exemple { margin: 20px 0; padding: 10px; width: 400px; border: 1px solid #000; height: 70px; overflow: hidden; } </style> </head> <body> <div id="exemple"> Contenu<br> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> </div> <span class="bouton" id="bouton_exemple" onclick="javascript:afficher_cacher('exemple');">lire la suite</span> <script language="javascript" type="text/javascript"> function afficher_cacher(id) { var hauteur=document.getElementById("exemple").offsetHeight; if(hauteur>="70") { document.getElementById(id).style.height='auto'; document.getElementById('bouton_'+id).innerHTML=''; } return true; } </script> </body> </html>
LeKiffeur
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
7 mars 2017 à 22:20
7 mars 2017 à 22:20
A force de chercher (encore 2h ce soir), j'ai trouvé, je mets ça au propre demain et je le poste pour avoir vos avis.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
LeKiffeur
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
8 mars 2017 à 20:40
8 mars 2017 à 20:40
Après un peu de nettoyage voici la fonction, ce n'est peut-être pas très propre car je m'y connais peu, mais ça fonctionne. Si la hauteur de la div dépasse 70px ça affiche un "lire la suite" et une fois cliquer ce "lire la suite" disparait. Si la div fait moins de 70px, le "lire la suite" ne s'affiche pas et la div est donc définie à 70px de haut.
Si ça peut-être utile à quelqu'un, voici :
Si ça peut-être utile à quelqu'un, voici :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> #contenant { margin: 20px 0; padding: 10px; width: 400px; height: 70px; overflow: hidden; border: 1px solid #000; } </style> </head> <body> <div id="contenant"> <div id="exemple"> Contenu<br> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> </div> </div> <span class="bouton" id="bouton_exemple" onclick="javascript:reduire('exemple');">ici le texte</span> <script language="javascript" type="text/javascript"> function afficher_cacher(id) { var hauteur=document.getElementById("exemple").offsetHeight; if(hauteur>="70") { document.getElementById('bouton_'+id).innerHTML='lire la suite'; } else { document.getElementById('bouton_'+id).innerHTML=''; } return true; } function reduire(id) { document.getElementById("contenant").style.height='auto'; document.getElementById('bouton_'+id).innerHTML=''; } afficher_cacher('exemple'); </script> </body> </html>