Créer un genre de scroll texte

**Scroll** · 06/01/2008, 21h00

Comment créer un scroll texte simple ?

Merci.

**makmaoui** · 06/01/2008, 21h36

Salut,

c'est quoi que tu appelles un scroll texte ?

**Scroll** · 06/01/2008, 21h43

Salut.

Je voudrais créer texte qui se déroulerait lorsqu’on clique sur un lien.
J’en ai souvent vu mais je ne sais pas si le nom exact est celui-ci.
C’est pratique lorsqu’ on a beaucoup de texte sur une même page.

**martialuk** · 07/01/2008, 11h06

Tu veux parler plutot d'un bouton qui permet de masquer ou d'afficher le texte?

**Scroll** · 07/01/2008, 11h21

Je crois que ça doit être ça.

**makmaoui** · 07/01/2008, 13h51

Tu peux le faire en javascript, par défaut ta zone est cachée et au click tu la rends visible avec une fonction javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
function afficher(zone) {
 
   zone.style.display = "block";
 
}
</script>
 
<div style="display:none" onclick="afficher(this)">Mon texte</div>

**Scroll** · 08/01/2008, 16h46

Salut Makmaoui.

J'ai essayé mais ça ne fonctionne pas. Ou bien c'est moi qui m'y suis mal prend pris mal !!...

**makmaoui** · 08/01/2008, 16h59

Excuse moi j'avais fait le code vite fait sans vérifier et par défaut la zone était cachée donc tu pouvais pas cliquer dessus, essaye ceci :

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
<script type="text/javascript">
function afficher(zone) {
 
 if( document.getElementById(zone).style.display == 'block')
   document.getElementById(zone).style.display = 'none';
 else
 	document.getElementById(zone).style.display = 'block';
 
}
</script>
 
 <div onclick="afficher('maZone')" style="border:1px solid #000;">Cacher/Montrer</div>
 
<div style="display:block" id="maZone" style="border:1px solid #d00">
	Mon texte ligne 1<br />
	mon teste ligne2<br />
	mon teste ligne3
</div>

**martialuk** · 08/01/2008, 22h40

Ta technique fonctionne peut être mais uniquement si le code HTML est activé sur le wiki. Ce que je déconseille particulièrement.

**makmaoui** · 08/01/2008, 23h07

Mais ici il n'est pas question de wiki

:

Comment créer un scroll texte simple ?

Merci.

**martialuk** · 09/01/2008, 20h08

Mille excuses. J'ai cru qu'on était dans le forum wiki. Désolé.

**SpaceFrog** · 10/01/2008, 11h45

Peut être un truc de ce style alors ?

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
 
var y = 1;
var step = 5
var down = true;
var minstep=step;
var running=false;
var t
 
 
function smooth_on_off(p_id, hmax){
  running=true;
  obj=document.getElementById(p_id);
 
  if(y>hmax&&down){step=-step;
                down=false;
                running=false;
                clearInterval(t);
                return false;}
  if(y<minstep&&!down){step=-step;
                down=true;
                running=false;
                y=1;
                clearInterval(t);
                return false;}
 
  y = y+step;
 
  obj.style.height = y + 'px';
}
 
function deroule(p_id,hmax){
if (running) {return false;}
t=setInterval(function(){smooth_on_off(p_id,hmax)},1)
 
}
</script>
<style type='text/css'>
div.main{
  width: 700px;
 
  background: #CCEEDD;
  font-weight: bold;
}
 
div.title{
  width: 700px;
  height: 30px;
  background: navy;
  color:white;
  font-weight: bold;
  font-size:14px;
  line-height:30px;
  cursor: pointer;
  padding-left:10px;
}
 
div.content{
  width: 700px;
  height: 1px;
  background: #FFEEFF;
  display: block;
  overflow: hidden;
  font-weight: normal;
  position:absolute;
  z-index:2;
  padding:10px;
  text-align:justify;
}
body {font-family:verdana;}
</style>
</head>
 
<body onload="document.body.focus()">
 
<div class="main">
 
  <div class="title" onclick="deroule('flop', 300);" >
	Un petit texte
  </div>
 
  <div id="flop" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat. Maecenas cursus, enim at laoreet laoreet, lacus quam placerat quam, nec blandit urna arcu quis turpis. Nunc sit amet orci. Aliquam id mi. Maecenas massa leo, interdum faucibus, aliquam nec, lacinia et, diam. Phasellus mollis fermentum enim. Aenean ut enim et est vulputate bibendum. Integer tellus nisi, nonummy et, feugiat at, molestie non, leo. Praesent eu sem. Quisque tincidunt tellus quis libero. Maecenas justo. Nulla gravida, turpis eget facilisis tempor, ipsum metus sollicitudin urna, eget elementum eros diam ut dui. Sed luctus diam quis velit. Vestibulum fringilla lacus sed nisl. Pellentesque hendrerit placerat nisl. Cras vitae risus. Duis pulvinar, orci nec ultricies laoreet, magna est dictum nunc, quis pulvinar est leo quis ipsum. Ut mauris mauris, bibendum eu, consequat et, luctus non, massa. Phasellus felis. Quisque felis.
 
Suspendisse orci nisi, rutrum eu, vestibulum non, aliquet a, est. Vivamus elit. Vestibulum ultricies urna in odio. Duis laoreet. Proin porttitor purus et dolor. Suspendisse sed tellus quis nulla pulvinar vehicula. Praesent tincidunt nisi ut augue. Aliquam semper risus id risus. Pellentesque elementum feugiat nisl. In hac habitasse platea dictumst. Vivamus mattis. Donec sodales orci. Donec ut velit. Phasellus aliquet, felis non ultricies accumsan, lacus eros iaculis dui, ac fringilla sem dolor vitae nisi. Ut eu arcu. Proin tellus.
 
  </div>
 
</div>
 
 
 
</body>

Créer un genre de scroll texte

JavaScript

Discussions similaires

Partager

Partager