Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
4671 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  faire scroller du text hors d'un textField ?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

faire scroller du text hors d'un textField ?

n°1187966
veryfree
Posté le 30-08-2005 à 16:51:47  profilanswer
 

hello,
 
je trouve des centaines d'exemples pour faire scroller du texte en JS dans un textField et je me demandait si c'etait possible de le faire sur du HTML directement ?
 
si oui, avez vous un petit exemple sous la main ?
 
 
 
Merci

mood
Publicité
Posté le 30-08-2005 à 16:51:47  profilanswer
 

n°1188011
j_lecruel
☀ ☁ ☂
Posté le 30-08-2005 à 17:19:44  profilanswer
 

Tu veux dire sans passer par du JS ?
 
Ce n'est pas possible, à moins de passer par des balises propriétaires (...non valides).
 
De toute façon ce n'est vraiment pas forcément une bonne idée, cela constitue un parasite visuel pour le visiteur.


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
n°1188081
veryfree
Posté le 30-08-2005 à 18:11:28  profilanswer
 

non, en utilisant du javascript mais sans avoir a utiliser un textField.
 
c'est plus clair ?


Message édité par veryfree le 30-08-2005 à 18:11:41
n°1188084
plainsofpa​in
Pingouino's lover
Posté le 30-08-2005 à 18:12:58  profilanswer
 

Un div avec une taille définie, et la propriété css overflow:auto;


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1188896
veryfree
Posté le 31-08-2005 à 17:40:28  profilanswer
 

merci pour ton aide.
 
qu est ce qui cloche dans cet exemple:
 

<style type="text/css">
pre{ font-family : Courier, "Courier New", fixed-width,monospace ;
   font-size : 80% ;
   line-height : 140% ;
   clear : both ;
   overflow : auto ;
   padding : 5px ; }
</style>


 

n°1188976
gatsusat
Posté le 31-08-2005 à 18:44:51  profilanswer
 

qu'est ce qui te derange dans le code tu peux nous dire ?

n°1189000
j_lecruel
☀ ☁ ☂
Posté le 31-08-2005 à 19:01:06  profilanswer
 

C'est paut-être pas ça mais... n'aurais-tu pas zappé cela :
 

plainsofpain a écrit :

Un div avec une taille définie, et la propriété css overflow:auto;


 
 
Si tu ne définit pas la valeur des propriétés width et height, la taille de ton bloc va s'adapter au contenu, tu n'aura donc pas de scrollbar.
 


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
n°1189554
veryfree
Posté le 01-09-2005 à 15:23:11  profilanswer
 

j'ai essayé en precisant la largueur/hauteur et ca n'a rien changé :/
 
 
Gatsusat>> je sous entendait juste  que ca marchait pas  [:mmmfff]


Message édité par veryfree le 01-09-2005 à 15:25:27
n°1189561
plainsofpa​in
Pingouino's lover
Posté le 01-09-2005 à 15:31:32  profilanswer
 

veryfree a écrit :

j'ai essayé en precisant la largueur/hauteur et ca n'a rien changé :/


 
Oui mais l'élément pour lequel tu définis hauteur et largeur est bien de type bloc ?


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1189717
veryfree
Posté le 01-09-2005 à 17:25:11  profilanswer
 

bloc ?
 
tu veux dire <div> ?
 
j'ai ca actuellement:
 

<style type="text/css">
.scroll{font-family : Courier, "Courier New", fixed-width,monospace ;color : Fuchsia;background-color : Gray; overflow : auto; width:150px;}    
</style>
<div class="scroll">test</div>

mood
Publicité
Posté le 01-09-2005 à 17:25:11  profilanswer
 

n°1189738
j_lecruel
☀ ☁ ☂
Posté le 01-09-2005 à 17:40:30  profilanswer
 

Ah oui. Et la propriété height donc ?


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
n°1189755
veryfree
Posté le 01-09-2005 à 17:55:21  profilanswer
 

c'est la largueur et non la longueur qui compte ici. j'avait tout de mme essayé avec  
 

...  overflow : auto; width:150px ;height:136px}


 
pour etre sur mais ca n'a rien changé :/

n°1202368
veryfree
Posté le 19-09-2005 à 14:09:28  profilanswer
 

un simple <marquee direction=leaf><b>text</b></marquee>
 
fait l'affaire :o


Message édité par veryfree le 19-09-2005 à 14:09:37
n°1202490
gatsusat
Posté le 19-09-2005 à 15:05:26  profilanswer
 

http://gatsu.ftp.free.fr/html/scrolltest2.html
dans le genre là ?
Mais fait pas attention au code faut que j'upload la derniere versioon ou il n'y juste qu'à mettre un id sur l'élément et otut le reste des fait automatiquement (creation des DIV de separation, action....)
 
@veryfree : marquee ca existe plus bordel !!!!!!!!!!!!!!!!!!!!!!!!!

n°1202509
veryfree
Posté le 19-09-2005 à 15:33:48  profilanswer
 

ca marche sous ie/ff et opera [:adodonicoco]
 
jregarde ton lien ; )
 
 
edit: c'est pas mal du tout!
 
sauf que je le voudrait en scroll horizontale c'est jouable ?


Message édité par veryfree le 19-09-2005 à 15:36:21
n°1202518
gatsusat
Posté le 19-09-2005 à 15:43:52  profilanswer
 

tu attends que je suis rentré du taf et que je place la dessus, peut etre et je l'espère que le padding-left et le padding-right marcheront, sinon je vous le texte dans un sous élément que je style.
 
et autre chose : si ya pas JS, mon texte s'affiche quand même, je reste sémantiquement propre.
 
au passage ce que tu as sous les yeux c'est une ancienne version

n°1202523
veryfree
Posté le 19-09-2005 à 15:47:48  profilanswer
 

aucun soucis.
 
j'attend ton retour alors :jap:

n°1202964
gatsusat
Posté le 20-09-2005 à 09:50:22  profilanswer
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style>
  7. #blocktoscroll {
  8.  border:1px solid black;
  9.  width:200px;
  10.  height:100px;
  11.  overflow:hidden; /*Tu mets hidden si tu ne veux pas avoir de scrollbar*/
  12. }
  13. #blocktoscroll2 {
  14.  border:1px solid black;
  15.  width:200px;
  16.  height:30px;
  17.  overflow:hidden; /*Tu mets hidden si tu ne veux pas avoir de scrollbar*/
  18. }
  19. </style>
  20. <script>
  21. var scrolltimer;
  22. function initScroll(BlockId, speedScroll,scrollSens) {
  23.  //scrollSens : sens du scrolling, par défaut c'est vertical
  24.  scrollSens = scrollSens.toLowerCase();
  25.  scrollSens = (((scrollSens!="v" ) && (scrollSens!="h" )) || (scrollSens=="" )) ? "v" : scrollSens;
  27.  var MonObjet = document.getElementById(BlockId);
  28.  var HTML = MonObjet.innerHTML;
  29.  MonObjet.innerHTML = "";
  30.  var MonDiv = document.createElement("DIV" );
  31.  MonDiv.style.border = "none";
  32.  MonDiv.style.backgroundColor = "transparent";
  33.  //Selon le sens du scroll, on utilise les marges de droite ou de gauche
  34.  if (scrollSens=="v" ) {
  35.   MonDiv.style.marginTop = MonObjet.clientHeight + "px";
  36.   MonDiv.style.marginBottom = MonObjet.clientHeight + "px";
  37.   MonDiv.style.marginLeft = "0";
  38.   MonDiv.style.marginRight = "0";
  39.   MonDiv.style.width = MonObjet.clientWidth + "px";
  41.  }
  42.  else {
  43.   MonDiv.style.marginTop = "0";
  44.   MonDiv.style.marginBottom= "0";
  45.   MonDiv.style.marginLeft = MonObjet.clientWidth + "px";
  46.   MonDiv.style.marginRight = MonObjet.clientWidth + "px";
  47.   MonDiv.style.height = MonObjet.clientHeight + "px";
  48.   MonDiv.style.whiteSpace = "nowrap";
  49.  }
  50.  MonDiv.innerHTML = HTML;
  51.  MonObjet.appendChild(MonDiv);
  52.  MonObjet.onmouseover = function(){
  53.   clearTimeout(scrolltimer);
  54.   scrollBlock(BlockId,speedScroll*4,scrollSens);
  55.  }
  56.  MonObjet.onmouseout = function(){
  57.   clearTimeout(scrolltimer);
  58.   scrollBlock(BlockId,speedScroll,scrollSens);
  59.  }
  60.  scrollBlock(BlockId,speedScroll,scrollSens);
  61. }
  63. function scrollBlock(BlockId,speedScroll,scrollSens){
  64.  speedincrement = 1;
  65.  var monObjet = document.getElementById(BlockId)
  66.  if (speedScroll=='' | speedScroll==null | speedScroll <= 0) speedScroll = 40;
  68.  //ScrollTop = ScrollTop + speed;
  69.  if (scrollSens=="v" ) {
  70.   monObjet.scrollTop = monObjet.scrollTop + speedincrement;
  71.   if (monObjet.scrollTop >= monObjet.scrollHeight-monObjet.clientHeight) monObjet.scrollTop = 1;
  72.  }
  73.  else {
  74.   monObjet.scrollLeft = monObjet.scrollLeft + speedincrement;
  75.   if (monObjet.scrollLeft >= monObjet.scrollWidth-monObjet.clientWidth) monObjet.scrollLeft = 1;
  76.  }
  77.  scrolltimer = setTimeout("scrollBlock('"+ BlockId + "'," + speedScroll + ",'" + scrollSens + "')", speedScroll);
  78. }
  82. //C'est ici que tu initialise la fonction
  83. //initScroll('identifiantdemonobjet',vitesse); Vitesse est le temps en millisecond qu'il faut attendre pour avancer d'un pixel;
  84. window.onload = function(){
  85.  initScroll('blocktoscroll2',10,"h" );
  86. }
  87. </script>
  88. </head>
  90. <body>
  91. <div id="blocktoscroll">
  92. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean eu diam vitae nibh scelerisque porta. Nullam euismod orci sed nibh. Donec nonummy elit cursus neque. Sed commodo posuere dui. Nullam tempor nulla et dolor. Aliquam erat volutpat. Curabitur lacus. Praesent ac justo eu lacus aliquam consectetuer. Suspendisse non orci. Aenean sollicitudin, orci et rutrum ornare, augue ligula malesuada dolor, ac ornare metus orci id lectus. Nam in ante vitae
  93. </div>
  94. <div id="blocktoscroll2">
  95. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  96. </div>
  97. </div>
  98. </body>
  99. </html>


 
pour ce que tu as à faire, c'est tout ce qu'il faut, mais je l'améliorerai avec le temps

n°1203376
veryfree
Posté le 20-09-2005 à 14:30:41  profilanswer
 

merci, j aime beaucoup ce que tu as fait  :wahoo:

n°1203388
FlorentG
Posté le 20-09-2005 à 14:35:28  profilanswer
 

Est-ce qu'on peut arrêter le défilement avec ton script ? Car c'est complètement obligatoire pour être accessible et pas faire chier l'internaute :D

n°1203439
gatsusat
Posté le 20-09-2005 à 15:02:19  profilanswer
 

Je la refait pour mon cher florentG, c'est un script fait à l'arrache en 30s, quand tu passe la souris dessus il ralenti, mais à la rigueur je vais le rendre ultra paramétrable avec des actions genre :  
Si je clique une fois il s'arrete, si je reclique, il repart, et basta.
 
mais tu as bien fais de me le dire mon florentnounet

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  faire scroller du text hors d'un textField ?

 

Sujets relatifs
MySql Full Text SearchVerifier l'egalité de 2 champs "text"
SQl Server variable type text , ntextlire un fichier text ou autre avec javascript
Alignement d'un select et d'un text...afficher le contenu d'un input text sur le meme formulaire
rendre un input text impossible à modifier ?séparateur de caractère dans un fichier text en php
Faire varier la taille d'un div suivant le text ???[HTML] alignement des zone text
Plus de sujets relatifs à : faire scroller du text hors d'un textField ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.085 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)