faire scroller du text hors d'un textField ?

faire scroller du text hors d'un textField ? - HTML/CSS - Programmation

Marsh Posté le 30-08-2005 à 16:51:47    

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

Reply

Marsh Posté le 30-08-2005 à 16:51:47   

Reply

Marsh Posté le 30-08-2005 à 17:19:44    

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
Reply

Marsh Posté le 30-08-2005 à 18:11:28    

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
Reply

Marsh Posté le 30-08-2005 à 18:12:58    

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
Reply

Marsh Posté le 31-08-2005 à 17:40:28    

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>


 

Reply

Marsh Posté le 31-08-2005 à 18:44:51    

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

Reply

Marsh Posté le 31-08-2005 à 19:01:06    

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
Reply

Marsh Posté le 01-09-2005 à 15:23:11    

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
Reply

Marsh Posté le 01-09-2005 à 15:31:32    

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
Reply

Marsh Posté le 01-09-2005 à 17:25:11    

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>

Reply

Marsh Posté le 01-09-2005 à 17:25:11   

Reply

Marsh Posté le 01-09-2005 à 17:40:30    

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


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 01-09-2005 à 17:55:21    

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é :/

Reply

Marsh Posté le 19-09-2005 à 14:09:28    

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


Message édité par veryfree le 19-09-2005 à 14:09:37
Reply

Marsh Posté le 19-09-2005 à 15:05:26    

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 !!!!!!!!!!!!!!!!!!!!!!!!!

Reply

Marsh Posté le 19-09-2005 à 15:33:48    

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
Reply

Marsh Posté le 19-09-2005 à 15:43:52    

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

Reply

Marsh Posté le 19-09-2005 à 15:47:48    

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

Reply

Marsh Posté le 20-09-2005 à 09:50:22    

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

Reply

Marsh Posté le 20-09-2005 à 14:30:41    

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

Reply

Marsh Posté le 20-09-2005 à 14:35:28    

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

Reply

Marsh Posté le 20-09-2005 à 15:02:19    

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

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed