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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Recherche d'un code : Texte défilant verticalement de façon non sacadé

BrunodeC

Que la farce soit avec vous!

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

Publicité

Jubijub

Parce que je le VD bien

:pfff:

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

BrunodeC

Que la farce soit avec vous!

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

BrunodeC

Que la farce soit avec vous!

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.

dotfx

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

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

BrunodeC

Que la farce soit avec vous!

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!

Jubijub

Parce que je le VD bien

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

BrunodeC

Que la farce soit avec vous!

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!

BrunodeC

Que la farce soit avec vous!

Jubijub a écrit :

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

gatsusat

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
#blocktoscroll {
border:1px solid black;
width:200px;
height:150px;
font-weight:bold;
font-size:15pt;
color:red;
overflow: hidden; /*Tu mets hidden si tu ne veux pas avoir de scrollbar*/
}
</style>
<script>
var scrolltimer;
function initScroll(BlockId, speedScroll, pxIncrement, TimeOver, incrementOver) {
var MonObjet = document.getElementById(BlockId);
//On rajoute des éléments par défaut sur le block à scroller, ces div
//prennent la hauteur de la boite, comme ça on garde un effet qui eviter de faire apparaitre
//le texte trop vite
var topDiv = MonObjet.insertBefore(document.createElement("DIV" ),MonObjet.firstChild);
topDiv.style.height = MonObjet.clientHeight + "px";
var bottomDiv = MonObjet.appendChild(document.createElement("DIV" ));
bottomDiv.style.height = MonObjet.clientHeight + "px";
MonObjet.onmouseover = function(){
clearTimeout(scrolltimer);
scrollBlock(BlockId, TimeOver, incrementOver, TimeOver, incrementOver);
}
MonObjet.onmouseout = function(){
clearTimeout(scrolltimer);
scrollBlock(BlockId, speedScroll,pxIncrement, TimeOver, incrementOver);
}
scrollBlock(BlockId,speedScroll,pxIncrement);
}
function scrollBlock(BlockId,TimeScroll,pxIncrement){
var monObjet = document.getElementById(BlockId)
if (TimeScroll=='' | TimeScroll==null | TimeScroll <= 0) TimeScroll = 40;
if (pxIncrement=='' | pxIncrement==null | pxIncrement <= 0) pxIncrement = 1;
//ScrollTop = ScrollTop + speed;
monObjet.scrollTop = monObjet.scrollTop + pxIncrement;
if (monObjet.scrollTop >= monObjet.scrollHeight-monObjet.clientHeight) monObjet.scrollTop = 1;
scrolltimer = setTimeout("scrollBlock('"+ BlockId + "'," + TimeScroll + "," + pxIncrement +" )", TimeScroll);
}
/*C'est ici que tu initialise la fonction
initScroll('identifiantdemonobjet',TimeScroll, pxIncrement, TimeOver, incrementOver);
'identifiantdemonobjet' C'est l'identifiant de l'objet qui va faire défiler du texte
TimeScroll est le temps en millisecond qu'il faut attendre pour avancer de pxIncrement;
pxIncrement est le nombre de pixel que l'on avance à chaque fois
TimeOver corresopnd à TimeScroll mais lorsque la souris passe dessus
incrementOver correspond à pxIncrement mais lorsque la souris passe sur le bloc
*/
window.onload = function(){
initScroll('blocktoscroll',10, 3, 40, 0);
}
</script>
</head>
<body>
<div id="blocktoscroll">
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
</div>
</body>
</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

Publicité

Jubijub

Parce que je le VD bien

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

FlorentG

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

gatsusat

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

BrunodeC

Que la farce soit avec vous!

gatsusat a écrit :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
#blocktoscroll {
border:1px solid black;
width:200px;
height:150px;
font-weight:bold;
font-size:15pt;
color:red;
overflow: hidden; /*Tu mets hidden si tu ne veux pas avoir de scrollbar*/
}
</style>
<script>
var scrolltimer;
function initScroll(BlockId, speedScroll, pxIncrement, TimeOver, incrementOver) {
var MonObjet = document.getElementById(BlockId);
//On rajoute des éléments par défaut sur le block à scroller, ces div
//prennent la hauteur de la boite, comme ça on garde un effet qui eviter de faire apparaitre
//le texte trop vite
var topDiv = MonObjet.insertBefore(document.createElement("DIV" ),MonObjet.firstChild);
topDiv.style.height = MonObjet.clientHeight + "px";
var bottomDiv = MonObjet.appendChild(document.createElement("DIV" ));
bottomDiv.style.height = MonObjet.clientHeight + "px";
MonObjet.onmouseover = function(){
clearTimeout(scrolltimer);
scrollBlock(BlockId, TimeOver, incrementOver, TimeOver, incrementOver);
}
MonObjet.onmouseout = function(){
clearTimeout(scrolltimer);
scrollBlock(BlockId, speedScroll,pxIncrement, TimeOver, incrementOver);
}
scrollBlock(BlockId,speedScroll,pxIncrement);
}
function scrollBlock(BlockId,TimeScroll,pxIncrement){
var monObjet = document.getElementById(BlockId)
if (TimeScroll=='' | TimeScroll==null | TimeScroll <= 0) TimeScroll = 40;
if (pxIncrement=='' | pxIncrement==null | pxIncrement <= 0) pxIncrement = 1;
//ScrollTop = ScrollTop + speed;
monObjet.scrollTop = monObjet.scrollTop + pxIncrement;
if (monObjet.scrollTop >= monObjet.scrollHeight-monObjet.clientHeight) monObjet.scrollTop = 1;
scrolltimer = setTimeout("scrollBlock('"+ BlockId + "'," + TimeScroll + "," + pxIncrement +" )", TimeScroll);
}
/*C'est ici que tu initialise la fonction
initScroll('identifiantdemonobjet',TimeScroll, pxIncrement, TimeOver, incrementOver);
'identifiantdemonobjet' C'est l'identifiant de l'objet qui va faire défiler du texte
TimeScroll est le temps en millisecond qu'il faut attendre pour avancer de pxIncrement;
pxIncrement est le nombre de pixel que l'on avance à chaque fois
TimeOver corresopnd à TimeScroll mais lorsque la souris passe dessus
incrementOver correspond à pxIncrement mais lorsque la souris passe sur le bloc
*/
window.onload = function(){
initScroll('blocktoscroll',10, 3, 40, 0);
}
</script>
</head>
<body>
<div id="blocktoscroll">
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
</div>
</body>
</html>

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

gatsusat

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

BrunodeC

Que la farce soit avec vous!

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

gatsusat

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

BrunodeC

Que la farce soit avec vous!

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

gatsusat

FlorentG

C'est quoi une "balise PHP" ?

BrunodeC

Que la farce soit avec vous!

Je parlais avec un code PHP quelconque!

Jubijub

Parce que je le VD bien

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

Badze

Aime les frites

pour un texte défilant veticalement

Code :

<marquee behavior="scroll" direction="up" height="100" scrolldelay="100" scrollamount="2">
ton texte
</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

gatsusat

Badze a écrit :

pour un texte défilant veticalement

Code :

<marquee behavior="scroll" direction="up" height="100" scrolldelay="100" scrollamount="2">
ton texte
</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

Badze

Aime les frites

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.

gatsusat

Badze a écrit :

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.

Badze

Aime les frites

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.

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Texte explicatif pour image de background.	[ACCESS]recherche par caractère générique (par ex.*)ne fonctionne pas
Texte info bulle et requêtes	Recherche programmeurs
[perl] récupéré le code source de plusieurs pages	QDLC : Comptez vos lignes de code
[php] recherche seulement 2 occurences avec ereg	Modification d'un fichier texte
Liens dans un texte flash	[C++] Programmer un "moteur de recherche" ?
Plus de sujets relatifs à : Recherche d'un code : Texte défilant verticalement de façon non sacadé

Page générée en 0.081 secondes