Discussion :

[Yepazix]

Bonjour,
Ma question ne porte pas à proprement parlé sur le HTML même si ma page est en HTML car je pense qu'il faut passer par autre chose que du HTML enfin bref je m'explique...
J'ai une page qui contient un (très) long texte.
Pour le lire (même si ce n'est pas le but qu'il soit lu) l'user doit faire défiler le texte avec l'ascenceur.
Ce que je voudrais c'est que le texte défile à une vitesse donnée et variable et qu'il puisse être inversé de sens.

Donc l'idée c'est :
La page s'affiche et le texte commence à défiler doucement.
L'user pousse sur - la vitesse de défilement ralenti.
L'user pousse sur + la vitesse augmente.
L'user pousse sur ESPACE le défilement s’arrête.
L'user pousse sur ENTER le défilement commence dans le sens de la lecture.
L'user pousse sur BACK le défilement commence dans le sens opposé à la lecture.

Bon voilà appartement c'est simple mais je me casse déjà la tête velu velu sur ce truc depuis un moment :-)

J'ai bien sur essayé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<marquee scrollamount="20" scrolldelay="100" 
onmouseover="this.stop();" 
onmouseout="this.start();" 
direction="up">

mais ce n'est pas très concluant.

En fait j'arrive a faire ce que je veux au niveau du scroll avec un simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<marquee direction="up" height="1000">
 
TOUT MON BAZARD
 
</marquee>

Mais mon problème est de modifier le sens ou la vitesse.

Je ne sais pas comment faire pour que des actions au clavier ou à la souris ai une répercutions sur les valeurs de

direction="up" ou direction="down" et sur scrollamount="x" ou x est la vitesse.

Quelqu'un sait si ce que je veux faire est possible et si oui comment ?

Merci.

[Muchos]

Pour le lire (même si ce n'est pas le but qu'il soit lu)

Bref…

• Pour le sens de lecture, il semble y avoir des pistes dans les sujets du forum;
• Pour la vitesse, il y a ce petit tuto.
• Pour les contrôles au clavier…

[Yepazix]

Bonjour Muchos,

Merci pour ces infos.
Je vais regarder un peu ça mais à priori de ce que j'ai déjà regardé c'est +/- la même chose que ce que je fais et mon problème est ailleurs.
Je me suis peut être mal expliqué

Le problème n'est pas à proprement parlé de faire défilé le texte, ni de lui donner un sens, ni de lui donner une vitesse.
Tout ça est très simplement faisable avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<marquee scrollamount="20" scrolldelay="100"
onmouseover="this.stop();"
onmouseout="this.start();"
direction="up">

Avec ce code quand je suis sur mon texte qui défile, il s'arrête et quand je suis en dehors il défile.

Donc j'ai déjà une grosse partie de ce que je veux faire : Texte qui défile ou texte qui ne défile pas.
Maintenant ce que je voudrais c'est aussi pouvoir changer la vitesse et le sens.
Pour ça il faut "simplement" que je puisse "écouter" si un évennement x ou y arrive et modifier en conséquence la valeur de direction et de scrollamount.

Une sorte de truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<marquee scrollamount=vitesse scrolldelay="100"
onmouseover="this.stop();"
onmouseout="this.start();"
onmouseclickdroit=direction="up"
onmouseclickgauche=direction="down"
onmouseroulette=vitesse
direction="up">

Bon évidement avec cette syntaxe ça ne peut pas marché !
Mes problèmes "concrets" sont les suivants :

1/ Je ne sais pas comment écrire et structurer les choses pour que le fait de cliquer ai une incidence sur le sens.
Bon je dis cliquer mais ça pourrait être aussi une touche du clavier.

2/ Je ne sais pas comment écrire et structurer les choses pour que la valeur de scrollamount soit variable en fonction de la valeur de la roulette de la souris.
Je ne sais même pas d'ailleurs comment lire ce que la roulette renvoit.
La encore maintenant je ne suis pas buté sur la roulette ça pourrait être - et + au clavier.

Pense tu que c'est une mauvaise approche et que c'est mieux de faire ça en J-Query ?
Ca me semblait tout simple au départ, la difficulté c'est la modif des valeurs en fait...

[ABCIWEB]

Pense tu que c'est une mauvaise approche et que c'est mieux de faire ça en J-Query ?
Ca me semblait tout simple au départ, la difficulté c'est la modif des valeurs en fait...

Pour faire tes fonctionnalités il faudra un minimum de javascript.

Et puis tant qu'à faire du javascript, autant s'en servir pour faire défiler le texte parce que la balise "marquee" sautille bien plus qu'elle ne défile. Si tu peux te contenter de ce rendu catastrophique d'un autre âge, bien sûr il n'y aura pas beaucoup de javascript à coder. Mais si tu veux épargner les yeux de tes visiteurs et éviter de les faire fuir, le code javascript sera un peu plus complexe. Pour ces raisons on utilise souvent jquery qui simplifie pas mal les choses, d'ailleurs tu devrais certainement pouvoir trouver des modules tous fait.

Sinon à titre d'initiation au javascript je m'étais intéressé à faire des défilements en pur javascript il y a quelques années. Plus d'info dans ma signature si cela t'intéresse. Le code est un peu lourd car à l'époque je ne connaissais pas prototype et j'étais passé par des tableaux pour pouvoir faire défiler plusieurs blocs dans une même page.

[Yepazix]

Merci ABCIWEB.
Je comprends ! Je me suis donc tourné vers Jquery comme tu le préconise et en effet le scroll est beaucoup plus fluide.
J'ai trouvé des scripts sur le net que j'essaye d'adapter à ce que j'ai besoin... pas évident je débute vraiment...

Mon souci c'est que ma page de départ c'est une page HTML faite avec WORD donc c'est le bodel.

J'ai un truc assez brouillon pour le moment mais qui très étonnement marche :-)

Mais j'ai quelques questions.

Code :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
<head>
<title>defile</title>
<META NAME="Description" CONTENT="codes sources">
<META http-equiv="Content-Language" content="fr">
<meta http-equiv=Content-Type content="text/html; charset=unicode">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 15">
<meta name=Originator content="Microsoft Word 15">
<link rel=File-List href="duo%20cactus%20final_fichiers/filelist.xml">
<link rel=themeData href="duo%20cactus%20final_fichiers/themedata.thmx">
<link rel=colorSchemeMapping href="duo%20cactus%20final_fichiers/colorschememapping.xml">
<script type="text/javascript" src="outils/div_v1.js"></script>
<body bgcolor=black lang=FR-BE style='tab-interval:35.4pt'>
</style>
<!--
#mar_ge{
width:93%; height: 700px; 
border: 0px;
}
-->
<!-- Balise de style, ou on peut aussi utiliser une feuil de style (fichier.css) -->
<style type="text/css">
<!--
#notre_div, #mar_ge{
border: 0px solid #CCCCCC;
width:93%; height: 800px; overflow:hidden; z-index: 1
}
#comm_and{
TEXT-ALIGN: center; width: 800px; height: 19px; z-index: 2
}
.img_outil{
width:18px; height: 19px; 
border: 0px;
cursor:pointer
}
-->
</style>
</head>
<body>
<!-- le corp du document (.html) -->
<table border="0" width="100%">
    <tr>
    <td colspan="3" style="border: 0px solid #CCCCCC;">
<!-- placent et édition de la couche mobile -->
<div id="notre_div" onMouseOver="B_TN(0)" onMouseOut="sur_vol()">
<!-- image de marge supérieure, les deux marges supérieure et inferieure sont absolument indispansables pour éviter le raffichage brusque -->
<img id="mar_ge" src="outils/pixel.gif">

<!-- Début des données, le contenue doit être inséré librement entre les deux marges, supérieure et inferieure -->
<script type="text/javascript" language="javascript">
<!--// on fait comme ça au lieu de bla bla bla
var i = 1;
var x = 5;
while (i!=x){
var a = '<center>'+i+' ';
document.write(a);
i++;
}
//-->
</script>
<p class=MsoNormal align=center style='text-align:center;line-height:150%'><b
style='mso-bidi-font-weight:normal'><u><span style='font-size:72.0pt;
line-height:150%;font-family:"Arial","sans-serif";color:#A9D18E;mso-themecolor:
accent6;mso-themetint:153;mso-style-textfill-fill-color:#A9D18E;mso-style-textfill-fill-themecolor:
accent6;mso-style-textfill-fill-alpha:100.0%;mso-style-textfill-fill-colortransforms:
"lumm=60000 lumo=40000";letter-spacing:1.3pt'>UN DUO DANS LE CACTUS<o:p></o:p></span></u></b></p>

<p class=MsoNormal style='line-height:150%'><span style='font-size:48.0pt;
line-height:150%;font-family:"Arial","sans-serif";color:#FF99CC;letter-spacing:
1.3pt'><o:p>&nbsp;</o:p></span></p>


<p class=MsoNormal style='line-height:150%'><span style='font-size:48.0pt;
line-height:150%;font-family:"Arial","sans-serif";color:#FF99CC;letter-spacing:
1.3pt'>MESDAMES ET

(...)

<p class=MsoNormal style='line-height:150%'><span style='font-size:48.0pt;
line-height:150%;font-family:"Arial","sans-serif";letter-spacing:1.3pt'><o:p>&nbsp;</o:p></span></p>


</div>
<br></a>
<!-- fin de la couche mobile -->

    </td>
    </tr>
    <tr>
        <td align="center" width="38"><span title="La Commande Récente" id="T_Mn"><img class="img_outil" src="outils/b.jpg"></span>
        </td>
        <td align="center" width="67"><font style="font-size: 9pt"> <span id="marqueur">
        !</span>&nbsp; / &nbsp;<span id="marqueur_TT">!</span></font></td>
        <td align="center" width="173">
        <!-- creation des boutons de cammande -->
        <img class="img_outil" onMouseOver="B_TN(1)" src="outils/h.jpg" id="B_T1">
        <img class="img_outil" onMouseDown="B_TN(2)" src="outils/s.jpg" id="B_T2">
        <img class="img_outil" onMouseOver="B_TN(3)" src="outils/b.jpg" id="B_T3">
        <img class="img_outil" onMouseDown="B_TN(4)" src="outils/brr.jpg" id="B_T4">
        <img class="img_outil" onMouseDown="B_TN(5)" src="outils/bnn.jpg" id="B_T5">
        <img class="img_outil" onMouseDown="B_TN(6)" src="outils/_h.jpg" id="B_T6">
        <img class="img_outil" onMouseDown="B_TN(7)" src="outils/_b.jpg" id="B_T7">
    
    </td>
    </tr>
</table>
<script type="text/javascript">
intilak() // on dimarre ici automatiquement, ou aussi manuellement par les boutons de commande 
</script>

</body>
</html>

J'ai modifié les lignes en rouge pour influencer la taille de l'affichage.
1er problème quand je met des % j'ai un message d erreur du script.
Je voudrais pourtant que l'affichage soit adapté à la taille de la fenêtre et je ne comprends pas pourquoi il refuse les %

J'ai chipoté dans les lignes en vert pour essayer de faire ce que je veux mais là encore sans succès.
Je voudrais plusieurs bouton qu'on survole, un pour faire défiler dans un sens, l'autre dans l'autre sens (ça j'ai trouvé).
Puis un que quand on click dessu ça accélère et un que quand un click dessus ça ralenti.
La par contre je sèche.

Bon désolé du code pourri je vais mettre de l'ordre promis...

[ABCIWEB]

Salut,

Si tu veux progresser il va falloir générer tes pages autrement qu'avec word. Enfin bon rien ne t'empêche de les modifier/corriger ensuite manuellement et d'intégrer ou non jquery.
Je te conseillerais plutôt d'utiliser un module jquery et de t'en tenir aux fonctionnalités proposées. Ou alors il va falloir bosser pas mal le javascript si tu veux coder toi-même (et c'est moins simple qu'on pourrait croire, on voit tellement de truc qui bougent sur le web qu'on imagine mal qu'il y a tant de boulot derrière juste pour faire ça).
Evites les comportements onmouseover, ce n'est pas compatible avec les smartphones et plus généralement avec tous les utilisateurs qui n'utilisent pas une souris. On utilise onmouseover comme un "plus" éventuel (de présentation) lorsque cela ne change rien aux fonctionnalités, et donc pas quand il s'agit d'un bouton de commande.

[Yepazix]

Merci ABCIWEB,

Je m'aperçois que je devrais expliquer ce que je fais car parfois on pense HTML = Internet et ici pas du tout.
Je ne génère évidement pas du tout mes pages web avec word ou même avec d'autres brols genre dreamweaverr et je me fou complètement des appareils portables.
Alors me dirais tu : mais qu'est ce que tu bricole ?

Au départ un texte sur Word.
Ce texte est le texte d'une pièce de théâtre.

Sur scène un TV qui sert de "pense-bête" pour les comédiens qui ne connaissent pas encore parfaitement le texte.
de l'autre côté du câble HDMI un ordi portable.

Et donc mon but faire défiler le texte word un peu comme sur un prompteur mais que ce soit compatible avec n'importe quel PC sans programme spécifique (et hors de prix).

Donc dans l'idéal :

Je convertit ma page en page web, word me fait une page HTML (immonde mais bon).
Je rajoute quelques lignes de J-Query (ou d'autre chose) et je met ça en ligne sur mon FTP.

Ensuite là ou ils jouent ils sortent la télé, branchent le portable du pote à la cousine de la tantine de la belle mère du frère d"un machiniste ils doublent cliques sur texte.html et ça marche sans rien paramétré !

Mon idée était même par la suite de créer une petite appli en Delphi (ça je me débrouille un peu mieux :-)) qui rajouterais les bonnes lignes au bon endroit dans le fichier HTML.

Voilou, je suppose que tu comprends mieux le pourquoi du comment :-)

[ABCIWEB]

Ok,

Comme je le dis plus haut, quelques lignes de javascript ne vont pas suffire et ce genre de développement n'est pas à la portée d'un débutant, surtout pressé. En rentrant "jquery prompter" dans google je trouve ce lien, peut-être une bonne piste ?

[Yepazix]

Bon ben c'est parti pour faire un truc en Delphi alors....
C'est tout de même beaucoup plus simple :-)

A peluches... et merci