Recherche d'un code : Texte défilant verticalement de façon non sacadé

Recherche d'un code : Texte défilant verticalement de façon non sacadé - HTML/CSS - Programmation

Marsh Posté le 18-08-2005 à 13:21:39    

S@lut @ tous, alors, ç@ V@s?
 
Bon, pour faire bref, ce que je cherche, c'est à faire un texte défilant à la verticale et de façon non sacadée.  Un peu comme sur cette page : http://www.dugalaxie.qc.ca/index2.php .  J'aimerais aussi savoir comment en régler l'alignement, l'emplacement dans la page et sa grosseure.  C'est pour un site web sur lequel je travaille!
 
Je tiens à préciser que je ne parle pas d'un texte défilant de gauche à droite mais de haut en bas.  J'ai cherché ei je n'en ai pas vu sur le forum!  Je ne crois pas pouvoir poster ce message dans un autre sujet non plus car je ne connais pas assez le Javascript et je risque de me faire tomber dessus comme d'habitude.
 
Est-ce que quelqu'un pourait m'aider s'il vous plait?  ^-^!
 
Merci @ l'@v@nce!  ;-D


Message édité par BrunodeC le 18-08-2005 à 13:44:05
Reply

Marsh Posté le 18-08-2005 à 13:21:39   

Reply

Marsh Posté le 18-08-2005 à 13:29:12    

:pfff:


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 18-08-2005 à 13:37:38    

Merci, ça veut tout dire!  -_-!

Reply

Marsh Posté le 18-08-2005 à 13:43:45    

Je tiens à préciser que je ne parle pas d'un texte défilant de gauche à droite mais de haut en bas.  J'ai cherché ei je n'en ai pas vu sur le forum!  Je ne crois pas pouvoir poster ce message dans un autre sujet non plus car je ne connais pas assez le Javascript et je risque de me faire tomber dessus comme d'habitude.

Reply

Marsh Posté le 18-08-2005 à 13:45:19    

Sur la même page citée, en regardant le code source...
ou encore
http://www.dynamicdrive.com/


---------------
www.renderfarm.online
Reply

Marsh Posté le 18-08-2005 à 13:46:38    

J'ai regardé le code source mais il doit être divisé en plusieurs partie car il ne marche pas sur ma page.  Quoi qu'il en soit, merci pour le lien, je vais y jeter un coup d'oeuil tout de suite!  ;-D  Merci!

Reply

Marsh Posté le 18-08-2005 à 13:51:13    

1) ca n'a pas d'intéret
2) c imposer au lecteur une façon de naviguer
3) ca nuit probablement à l'accessibilité avec d'autres type de terminaux
4) pour avoir un truc cross browser ca doit etre assez marrant
 
bref...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 18-08-2005 à 13:53:02    

Désolé, je ne le trouve pas, je vais revérifier tout alleurs mais par ici il est "tard" donc je vais me coucher!  Merci quand même.  Si quelqu'un le connais déjà, ça m'éviterait beaucoup de tracas s'il me l'indiquait.  Quoi qu'il en soit, merci  tous!

Reply

Marsh Posté le 18-08-2005 à 13:53:57    

Jubijub a écrit :

1) ca n'a pas d'intéret
2) c imposer au lecteur une façon de naviguer
3) ca nuit probablement à l'accessibilité avec d'autres type de terminaux
4) pour avoir un truc cross browser ca doit etre assez marrant
 
bref...


 
 
Ce n'est pas pour une partie à lire mais pour un élément graphique du site!  Lol!

Reply

Marsh Posté le 18-08-2005 à 14:18:06    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.     #blocktoscroll {
  7.         border:1px solid black;
  8.         width:200px;
  9.         height:150px;
  10.         font-weight:bold;
  11.         font-size:15pt;
  12.         color:red;
  13.         overflow: hidden; /*Tu mets hidden si tu ne veux pas avoir de scrollbar*/
  14.     }
  15.     </style>
  16.     <script>
  17.     var scrolltimer;
  18.     function initScroll(BlockId, speedScroll, pxIncrement, TimeOver, incrementOver) {
  19.         var MonObjet = document.getElementById(BlockId);
  20.         //On rajoute des éléments par défaut sur le block à scroller, ces div  
  21.         //prennent la hauteur de la boite, comme ça on garde un effet qui eviter de faire apparaitre  
  22.         //le texte trop vite  
  23.         var topDiv = MonObjet.insertBefore(document.createElement("DIV" ),MonObjet.firstChild);
  24.         topDiv.style.height = MonObjet.clientHeight + "px";
  25.         var bottomDiv = MonObjet.appendChild(document.createElement("DIV" ));
  26.         bottomDiv.style.height = MonObjet.clientHeight + "px";
  27.         MonObjet.onmouseover = function(){
  28.             clearTimeout(scrolltimer);
  29.             scrollBlock(BlockId, TimeOver, incrementOver, TimeOver, incrementOver);
  30.         }
  31.         MonObjet.onmouseout = function(){
  32.             clearTimeout(scrolltimer);
  33.             scrollBlock(BlockId, speedScroll,pxIncrement, TimeOver, incrementOver);
  34.         }
  35.         scrollBlock(BlockId,speedScroll,pxIncrement);
  36.     }
  37.    
  38.     function scrollBlock(BlockId,TimeScroll,pxIncrement){
  39.         var monObjet = document.getElementById(BlockId)
  40.         if (TimeScroll=='' | TimeScroll==null | TimeScroll <= 0) TimeScroll = 40;
  41.         if (pxIncrement=='' | pxIncrement==null | pxIncrement <= 0) pxIncrement = 1;
  42.         //ScrollTop = ScrollTop + speed;  
  43.         monObjet.scrollTop = monObjet.scrollTop + pxIncrement;
  44.         if (monObjet.scrollTop >= monObjet.scrollHeight-monObjet.clientHeight) monObjet.scrollTop = 1;
  45.         scrolltimer = setTimeout("scrollBlock('"+ BlockId + "'," + TimeScroll + "," + pxIncrement +" )", TimeScroll);
  46.     }
  48.    
  49.     /*C'est ici que tu initialise la fonction  
  50.     initScroll('identifiantdemonobjet',TimeScroll, pxIncrement, TimeOver, incrementOver);  
  51.   'identifiantdemonobjet' C'est l'identifiant de l'objet qui va faire défiler du texte  
  52.     TimeScroll est le temps en millisecond qu'il faut attendre pour avancer de pxIncrement;  
  53.     pxIncrement est le nombre de pixel que l'on avance à chaque fois
  54.   TimeOver corresopnd à TimeScroll mais lorsque la souris passe dessus
  55.   incrementOver correspond à pxIncrement mais lorsque la souris passe sur le bloc
  56.  */
  57.     window.onload = function(){
  58.         initScroll('blocktoscroll',10, 3, 40, 0);
  59.     }
  60.     </script>
  61. </head>
  63. <body>
  64. <div id="blocktoscroll">
  65. 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 
  66. </div>
  67. </body>
  68. </html>


 
bon on peut améliorer ça je pense, mais un pour c'est juste pour dire à JujiJub que : C'est Accessible, et W3C compliant avec du JS par le DOM
 
au passage du désactive le JS tu verras ce que ca donne :)
 
ya moyen d'améliorer en modifiant le overflow:hidden par overflow:auto dans la CSS et dans le JS modifier la propriétés de l'overflow afin de justement rendre cela encore plus accessible.
 
et au passage tu règle tout ce que tu veux pour ton texte via les propriétés CSS De la boite.
 
Mais si tu n'en est pas capable ben tu demandes des explications.


Message édité par gatsusat le 18-08-2005 à 14:20:18
Reply

Marsh Posté le 18-08-2005 à 14:18:06   

Reply

Marsh Posté le 18-08-2005 à 20:41:51    

tu m'expliquera en quoi c accessible à une personne a mobilité réduite ou autre, qui peut pas se servir d'une souris...


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 18-08-2005 à 20:43:02    

Il faut proposer un truc pour stopper le défilement...

Reply

Marsh Posté le 18-08-2005 à 20:51:39    

oué mais bon on pousse le bouchon loin kan meme jujijub.
JE veux bien rajouter le bouton,  
 
donc en gros : un element en position absolute sur l'objet pour faire STOP defilement.
 
et puis c'est juste un défilement de texte pour des petites infos, si le client veux ça, ben on lui donne, mais bon moi franchement je trouve ca nul, c'était juste pour le fun que j'ai fais ca.
 
Les Grigris sur les pages Web ca sert à rien, une page web c'est juste pour l'information et rien d'autre

Reply

Marsh Posté le 18-08-2005 à 23:17:50    

gatsusat a écrit :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.     #blocktoscroll {
  7.         border:1px solid black;
  8.         width:200px;
  9.         height:150px;
  10.         font-weight:bold;
  11.         font-size:15pt;
  12.         color:red;
  13.         overflow: hidden; /*Tu mets hidden si tu ne veux pas avoir de scrollbar*/
  14.     }
  15.     </style>
  16.     <script>
  17.     var scrolltimer;
  18.     function initScroll(BlockId, speedScroll, pxIncrement, TimeOver, incrementOver) {
  19.         var MonObjet = document.getElementById(BlockId);
  20.         //On rajoute des éléments par défaut sur le block à scroller, ces div  
  21.         //prennent la hauteur de la boite, comme ça on garde un effet qui eviter de faire apparaitre  
  22.         //le texte trop vite  
  23.         var topDiv = MonObjet.insertBefore(document.createElement("DIV" ),MonObjet.firstChild);
  24.         topDiv.style.height = MonObjet.clientHeight + "px";
  25.         var bottomDiv = MonObjet.appendChild(document.createElement("DIV" ));
  26.         bottomDiv.style.height = MonObjet.clientHeight + "px";
  27.         MonObjet.onmouseover = function(){
  28.             clearTimeout(scrolltimer);
  29.             scrollBlock(BlockId, TimeOver, incrementOver, TimeOver, incrementOver);
  30.         }
  31.         MonObjet.onmouseout = function(){
  32.             clearTimeout(scrolltimer);
  33.             scrollBlock(BlockId, speedScroll,pxIncrement, TimeOver, incrementOver);
  34.         }
  35.         scrollBlock(BlockId,speedScroll,pxIncrement);
  36.     }
  37.    
  38.     function scrollBlock(BlockId,TimeScroll,pxIncrement){
  39.         var monObjet = document.getElementById(BlockId)
  40.         if (TimeScroll=='' | TimeScroll==null | TimeScroll <= 0) TimeScroll = 40;
  41.         if (pxIncrement=='' | pxIncrement==null | pxIncrement <= 0) pxIncrement = 1;
  42.         //ScrollTop = ScrollTop + speed;  
  43.         monObjet.scrollTop = monObjet.scrollTop + pxIncrement;
  44.         if (monObjet.scrollTop >= monObjet.scrollHeight-monObjet.clientHeight) monObjet.scrollTop = 1;
  45.         scrolltimer = setTimeout("scrollBlock('"+ BlockId + "'," + TimeScroll + "," + pxIncrement +" )", TimeScroll);
  46.     }
  48.    
  49.     /*C'est ici que tu initialise la fonction  
  50.     initScroll('identifiantdemonobjet',TimeScroll, pxIncrement, TimeOver, incrementOver);  
  51.   'identifiantdemonobjet' C'est l'identifiant de l'objet qui va faire défiler du texte  
  52.     TimeScroll est le temps en millisecond qu'il faut attendre pour avancer de pxIncrement;  
  53.     pxIncrement est le nombre de pixel que l'on avance à chaque fois
  54.   TimeOver corresopnd à TimeScroll mais lorsque la souris passe dessus
  55.   incrementOver correspond à pxIncrement mais lorsque la souris passe sur le bloc
  56.  */
  57.     window.onload = function(){
  58.         initScroll('blocktoscroll',10, 3, 40, 0);
  59.     }
  60.     </script>
  61. </head>
  63. <body>
  64. <div id="blocktoscroll">
  65. 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 
  66. </div>
  67. </body>
  68. </html>


 
bon on peut améliorer ça je pense, mais un pour c'est juste pour dire à JujiJub que : C'est Accessible, et W3C compliant avec du JS par le DOM
 
au passage du désactive le JS tu verras ce que ca donne :)
 
ya moyen d'améliorer en modifiant le overflow:hidden par overflow:auto dans la CSS et dans le JS modifier la propriétés de l'overflow afin de justement rendre cela encore plus accessible.
 
et au passage tu règle tout ce que tu veux pour ton texte via les propriétés CSS De la boite.
 
Mais si tu n'en est pas capable ben tu demandes des explications.


 
 
D'accord, tu peux m'expliquer ça en français de non initié à ce genre de language?  Lol!
 
Sans blagues, je n'ai qu'à copier ce code dans ma page et ça marchera?  En changant le texte latin par mon texte et en choisissant mes variables, c'est bien ça?
 
Une autre question, cette partie : var MonObjet = document.getElementById(BlockId);  Documet et MonObjet sont remplacés par quoi si je les remplaces?


Message édité par BrunodeC le 18-08-2005 à 23:24:16
Reply

Marsh Posté le 18-08-2005 à 23:25:54    

ben heu ouais, mais exporter le code JS dans un fichier JS à part et initialiser le tout correctement
 
mais bon si tu piges keudal jpeux pas t'aider.
1- Car j'ai la flème d'ajouter des commentaires supplémentaires dans mon code
2- Il y a assez de personnes qualifiées pour t'aider à comprendre ce bordel
3- C'est un script bidon à 2 balles codé en 20 minutes et modifié parci parlà
4- Ben heu si j'ai l'envie je t'aide

Reply

Marsh Posté le 19-08-2005 à 00:12:30    

Non, j'ai compris, la seule chose que je ne pige pas, c'est qu'est-ce que le code et le fichier JS?

Reply

Marsh Posté le 19-08-2005 à 00:46:08    

ben le code c'est tout ce qu'il y a entre les balises script
 
ensuite le fichier JS ben c'est un fichier avec des lignes de javascript que tu joins à ta page

Reply

Marsh Posté le 19-08-2005 à 03:08:42    

Et je le joint par un lien ou une balise PHP ou autre?  C'est la dernière question, promis!  Lol!

Reply

Marsh Posté le 19-08-2005 à 09:05:31    

<script type="text/javascript" src="monfichier.js"></script>

Reply

Marsh Posté le 19-08-2005 à 10:40:29    

C'est quoi une "balise PHP" ?

Reply

Marsh Posté le 19-08-2005 à 23:58:58    

Je parlais avec un code PHP quelconque!

Reply

Marsh Posté le 20-08-2005 à 11:53:09    

tu devrais peut etre apprendre les bases de HTML avant de faire :  
1) du HTML dynamique
2) un site web dynamique


---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 21-08-2005 à 14:52:13    

pour un texte défilant veticalement
 

Code :
  1. <marquee behavior="scroll" direction="up" height="100" scrolldelay="100" scrollamount="2">
  2. ton texte
  3. </marquee>


 
Pourquoi se prendre la tete avec du JS  :heink:
Peut etre que je dit une connerie mais c'est un moyen facile


Message édité par Badze le 21-08-2005 à 14:53:44
Reply

Marsh Posté le 21-08-2005 à 15:09:09    

Badze a écrit :

pour un texte défilant veticalement
 

Code :
  1. <marquee behavior="scroll" direction="up" height="100" scrolldelay="100" scrollamount="2">
  2. ton texte
  3. </marquee>


 
Pourquoi se prendre la tete avec du JS  :heink:
Peut etre que je dit une connerie mais c'est un moyen facile


 
 
Ben tu l'as dit : tu as dit une grosse Connerie.
 
Marquee est une balise dépréciée du W3C, elle ne devrait même plus apparaitre sur les sites Web, ni être supportée par les navigateur.
 
En gros cete balise ne sert à rien, et n'a aucune utilité à part faire chier le visiteur

Reply

Marsh Posté le 21-08-2005 à 15:54:09    

C'est bien ce que je me disais, je n'était pas sur que c'était hors norme,
Enfin bon, meme si cela est déconseillé, je préfère utilisé cette connerie qu'utilisé un script JS de malade.
Il faut dire que je n'aime pas JS, j'évite au maximum de l'utilisé,
 
Enfin cela reste un point de vue.

Reply

Marsh Posté le 21-08-2005 à 16:05:44    

Badze a écrit :

C'est bien ce que je me disais, je n'était pas sur que c'était hors norme,
Enfin bon, meme si cela est déconseillé, je préfère utilisé cette connerie qu'utilisé un script JS de malade.
Il faut dire que je n'aime pas JS, j'évite au maximum de l'utilisé,
 
Enfin cela reste un point de vue.


 
JS je le répète encore une fois, il peut être utilisé pour améliorer l'expérience utilisateur, en gros tu dois rajouter du JS sur ton site de manière intrusive (aucun code JS dans ta page, juste un appel vers un fichier JS) et ton site dois s'afficher entièrement sans JS.

Reply

Marsh Posté le 21-08-2005 à 16:11:58    

oui, ça je l'avais bien compris.
Mais dans ce cas de figure ou l'on veux afficher du texte verticalement en déroulant, je préfére utilisé cette méthode meme si c'est hors norme.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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