problème avec la balise marquee

**lipao17** · 30/12/2005, 15h50

Bonjour à tous,

voilà j'ai découvert très récemment la balise "marquee" et je trouve ça très bien. Seulement j'aimerai bien faire quelque chose avec mais je n'arrive pas.

j'ai un texte géneré dynamiquement et je voudrais le faire défiler (cf code en exemple).
J'ai donc utilisé la balise marquee et j'ai mis mon texte dedans. Jusque là ok ça défile.
Je voudrais maintenant que le texte défile uniquement lorsque je suis sur les fleches gauche ou droite.
j'ai fait une fonction javascript, et jusque là ok ça marche.

là j'ai 2 problèmes :

- je voudrais que mon texte soit affiché dès le départ (car là il est masqué et il s'affiche qu'à partir du moment où je lance le défilement)

j'ai essayé avec ce code :

Code :

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

1
2
3
4
5
marquee div{
	background-color:blue;
	margin-left:-490px;
	display:inline;
}

et ça marche que sous ie !! quelqu'un sait pkoi ?

- je voudrais que mon texte s'arrete de défiler juste à la fin du texte, est-ce possible ?

voici mon code (y a juste à copier-coller dans un fichier pour tester)

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<style>
		table {
			width:600px;
			height:20px;
			text-align:center;
		}
		table td{
			border:1px solid black
		}
 
		marquee{
			width:500px;
		}
		marquee div{
			background-color:blue;
			display:inline;
		}
		#cellMiddle{
			width:500px;
		}
 
	</style>
	<script language="JavaScript1.2" type="text/javascript">
		var marquise = null;
		function stopScroll()
		{
			marquise.stop();
			marquise.scrollAmount=0;
		}
		function startScroll()
		{
			marquise.start();
			marquise.scrollAmount=5;				
		}
		function leftScroll()
		{
			marquise.direction="left";
		}
		function rightScroll()
		{
			marquise.direction='right';
		}
 
	</script>
	</head>	
 
	<body>
 
		<table cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td  valign="middle">
					<a href="#" 
					   onmouseover="rightScroll();startScroll();" 
					   onmouseout="stopScroll()" >
						<< 
					</a>
				</td>
				<td id="cellMiddle" valign="middle">
					<span class="gen">
						<marquee style="" id="marquise" scrollamount="3" direction="left" height="20">
							<nobr>
							<div>
								<font color="red" size="10">test1&nbsp;|</font>
								<font color="red" size="10">test2&nbsp;|</font>
								<font color="red" size="10">test3&nbsp;|</font>
								<font color="red" size="10">test4&nbsp;|</font>
								<font color="red" size="10">test5</font>										
							</div>
							</nobr>
						</marquee>
					</span>
				</td>
				<td valign="middle" >
					<a href="#" 
					   onmouseover="leftScroll();startScroll();" 
					   onmouseout="stopScroll()" >
						>>
					</a>
				</td>
			</tr>
		</table>
 
 
		<script language="JavaScript1.2" type="text/javascript">
			marquise = document.getElementById('marquise');
			stopScroll();
		</script>
	</body>
</html>

Merci à ceux qui pourront ou essayeront de m'aider.

**artotal** · 30/12/2005, 18h26

IE on s'en sert parceque c'est obligé, là cette balise propriétaire n'est pas très efficece !
conseil, fais sa en .js

**lipao17** · 02/01/2006, 08h54

tu as un exemple de balise marquee fait en js, ou est-ce que tu sais où je peux trouver ça ?

merci

et bonne année !!

**artotal** · 02/01/2006, 14h01

non désolé, mais au besoin fait une recherche
http://www.google.com/custom?q=texte...developpez.net
ou repost avec plus de précision ?

**artotal** · 02/01/2006, 14h08

Je crois qu'ici tu as la solution !
http://www.developpez.net/forums/vie...er=asc&start=0
quoi que le post est long, très longs, le mieux c'est de reformuler un post ?

**lipao17** · 02/01/2006, 15h39

je te remercie artotal, je fais cherché de ce coté là !!

**lipao17** · 04/01/2006, 14h40

re-moi !

voici la soluce pour ceux qui tomberont sur ce topic :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
 
	#element {
		left:100px;
		top:100px;
		color:#ff0000;
		font-size:25px;
		position:relative;
		width:200px;
	}
</style>
 
<script type="text/javascript">
	// Défilement 4 directions multiple
	function Defilant(id, pos_init, pos_min, pos_max, delta, direction) {
	   this.id          = id;
	   this.element     = document.getElementById(id);
	   this.pos_init    = pos_init;
	   this.pos_min     = pos_min;
	   this.pos_max     = pos_max;
	   this.pos_current = pos_init;
	   this.delta       = delta;
	   this.direction   = direction;
	}
 
	Defilant.prototype.defile = function() {
	   if (!this.element) {
	      this.element = document.getElementById(this.id);
	   }
	   if (this.element) {
	      if(this.direction == 'vertical'){
	         if(this.pos_current < (this.pos_min - this.element.offsetHeight) ){
	            this.pos_current = this.pos_init;
	         } else if (this.pos_current > this.pos_max ) {
	            this.pos_current = this.pos_init - this.element.offsetHeight;
	         } else {
	            this.pos_current += this.delta;
	         }
	         this.element.style.top = this.pos_current+"px";
	      } else if(this.direction == 'horizontal') {
	         if(this.pos_current < (this.pos_min - this.element.offsetWidth) ){
	            this.pos_current = this.pos_init;
	         } else if (this.pos_current > this.pos_max ) {
	            this.pos_current = this.pos_init - this.element.offsetWidth;
	         } else {
	            this.pos_current += this.delta;
	         }
	         this.element.style.left = this.pos_current+"px";
	      }
	   }
	}
</script>
</head>
 
<body>
<div style='position: relative;overflow: hidden;width: 130px;height: 20px;'>
        <span	id='defileH1' 
		style='position: absolute;width: 90px;background-color:red;' 
		onMouseover="defileH_1.delta=0"
 		onMouseout='defileH_1.delta=deltaH1'
	>
		mon texte
	</span>
</div>
 
<script type="text/javascript">
	var deltaH1 = -1;
	var defileH_1 = new Defilant('defileH1', 130, 0, 130, deltaH1,'horizontal');
	setInterval("defileH_1.defile()",30);
</script>
</body>
</html>

merci à M. N et à dasdeb...

bonne année à tous !

lipao17

problème avec la balise marquee

JavaScript

Discussions similaires

Partager

Partager