Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Modifier la zone de scrollbar dans le texte


Sujet :

JavaScript

  1. #1
    Membre du Club
    Modifier la zone de scrollbar dans le texte
    Bonjour à tous,

    j'ai crée dans mon html une section dans laquelle il y a une carte leaflet et un article.
    cet article peut prendre suivant le clic de l'utilisateur un contenu plus ou moins long.

    le problème étant que je peux ne pas savoir quelle est sa longueur parce qu'il y a dans mon site sous cet article un footer avec des informations importantes pour l'utilisateur.
    Donc j'aimerai que l'on voit tout cet article indépendamment du bouton sur lequel on a cliqué et le footer.

    ce que je voudrai en d'autres termes c'est déplacer l’ascenseur dans mon article de façon que le header et le footer soient toujours visibles que que soit le bouton sélectionné.

    J'aimerai avoir une solution peu importe laquelle d'abord en JS, puis en CSS.

    Code 'html' :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    			
    <nav class="headernav">
    			     <div class="ent"><span class="maj">n</span>otre <span class="maj">e</span>ntreprise</div>
    				<div class="pro"><span class="maj">n</span>os <span class="maj">p</span>roduits</div>
    				<div class="cli"><span class="maj">n</span>otre <span class="maj">c</span>lient&egrave;le</div>
    				<div class="mar"><span class="maj">n</span>os <span class="maj">m</span>arch&eacute;s</div>
    				<div class="tem"><span class="maj">t</span>&eacute;moignages</div>
    			</nav>
       	<section>
              	<div id="main">
                       <div id="cadre_carte">
                         <div id="carte"></div> 
                      </div>
                   </div>
                   <article></article>
       	</section>
    
      <script type="text/javascript" src="js/20180107sitev0.js"></script>


    Avez-vous une idée de code ?
    Pouvez-vous m'aider ?

    Merci beaucoup

  2. #2
    Modérateur

    Bonjour,
    J'aimerai avoir une solution peu importe laquelle d'abord en JS, puis en CSS.
    pourquoi d'abord en JavaScript alors qu'il te suffit d'adopter une structure sur base de « flexBox » ou de « grid » !?!

  3. #3
    Rédacteur/Modérateur

    Bonjour,

    1-
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <span class="maj">n</span>otre <span class="maj">e</span>ntreprise


    Tu as perdu la touche "MAJ" de ton clavier ?

    Sinon, en CSS, il existe aussi ::first-letter, ou encore text-transform.
    Ça éviterait de "casser" les mots (ce qui peut nuire au SEO).

    2- Quant à "déplacer l’ascenseur dans l'article", il suffit d'appliquer un max-height et un overflow:auto.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre du Club
    Merci de votre aide.

    J'ai résolu le pb de l'ascenceur avec CSS3 ou je crois flex-box enfin c'est pareil.

    J'avais déjà vu les ::first-letter mais je ne l'ai pas utilisée car ces nouveaux trucs qui marchent pourtant bien sur firefox ne fonctionnent pas toujours avec tous les navigateurs.