Comment réaliser une infonews transparente cela en JS ?

Version imprimable

17/01/2008, 19h35
amarcil

Comment réaliser une infonews transparente cela en JS ?

Salut a tous !

Alors voila, j'ai vu sur le site france info un truc que je souhaiterais réaliser pour mon site:

http://www.france-info.com/

la barre en bas du site qui défile les infos....

Seulement le soucis c'est que je ne voie pas du tout comment faire celà... j'ai juste vu que ça marche avec du JS mais je suis un peu bloqué...

Quelqu'un a une idée sur la manière de faire ce type de chose?

MErci a vous de votre aide !
18/01/2008, 10h35
le_chomeur

Alors les grande ligne :)
- utiliser une div ( ou autre ) en position fixed
- utiliser l'opacity sur une couleur de fond de ta div ( pour gèrer la transparence )
- créer un tableau contenant tout tes titres de news à afficher
- créer une méthode permettant de changer de titre à un interval donné

Si tu as un souçis fais signe , je te montrerais un bout du script

voila le script :)
je vous laisse l'améliorer

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.divInfo{
	position:fixed;
	bottom:0px;
	width:100%;
	height:35px;
	line-height:35px;
	color:#ffffff;
}
.divBackground{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:35px;
	background-color:#000000;
	opacity: 0.6;
	filter:alpha(opacity=60);	
	z-index:50;
	font-size:24px;
}
.divText{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:35px;
	z-index:200;
	font-size:24px;
}
#toto{
	margin-top:150px;
}
</style>
 
<script type="text/javascript">
	var news = new Array();
	news[0] = ["Politique","pas bien la politique"];
	news[1] = ["sport","On a perdu la coupe du monde"];
	news[2] = ["sport","laure manuchao remporte la coupe de maracass"];
 
	var NbDeNews = news.length -1 // Permet de vérifier ou on en est pour l'affichage des news et boucler
 
	function changementTitreNews(numNews){
		document.getElementById("titre").innerHTML = "Section : " + news[numNews][0] +" titre : "+news[numNews][1]+" et i = "+numNews+"<br />";
		if(NbDeNews == numNews){
			numNews = 0 ;
		}
		else{
			numNews++;
		}
		setTimeout(function() {changementTitreNews(numNews);}, 2000);
	}
 
</script>
</head>
 
<body>
et le texte derrière pour voir la transparence
<div class="divInfo">
	<div class="divBackground"></div>
	<div class="divText" id="titre">et plein de texte sympa ici</div>	
</div>
<div id="toto"></div>
<script type="text/javascript">
changementTitreNews(0);
</script>
</body>
</html>

18/01/2008, 15h46
amarcil

c'est tres sympa ton aide, je vais de ce pas tester ça et je reviendrai ici après ;)
18/01/2008, 17h26
amarcil

et si je veux rajouter une croix ou un symbole quelconque pour faire disparaitre cette news c'est possible ou non?
18/01/2008, 18h37
le_chomeur

oui , tu rajoutes un lien avec une croix un X une image ou autre ...
avec une fonction pour masquer cette div :

document.getElementById('toto').style.diplay = "none" :)
18/01/2008, 18h42
SpaceFrog

faudrait peut être juste ajouter un moz-opacity dans le css pour la compatibilité avec firefox & gecko based ...
18/01/2008, 18h48
le_chomeur

le opacity n'est pas pris en compte par ceux ci ??
18/01/2008, 18h53
SpaceFrog
je ne pense pas que
Code:

1 2 opacity: 0.6; filter:alpha(opacity=60);
couvre IE et FFX ?

et ton fixed aussi dasn le position est limitatif, toujours dasn l'optique du crossbrowser s'entend ...
18/01/2008, 20h24
Candygirl

Oui, firefox gère la propriété opacity (css3). Par contre je serais inccapable de dire depuis quelle version. Si quelqu'un a l'info?
22/01/2008, 18h45
Blood-of-shadow

Bonsoir à tous !

Bon alors j'ai essayer le script, légèrement adapter le style, tout marche sus firefox mais IE, ben ça foire un max. J'aurais besoins d'un code qui marche pour les deux si possible ainsi que des explication sur où placer document.getElementById('toto').style.diplay = "none"

Merci d'avance

salut , voila :
même comportement sous firefox et ie7

j'ai ajouter le X pour fermer :)

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.divInfo{
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:35px;
	line-height:35px;
	color:#ffffff;
}
.divBackground{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:35px;
	background-color:#000000;
	opacity: 0.6;
	filter:alpha(opacity=60);	
	z-index:50;
	font-size:24px;
}
.divText{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:35px;
	z-index:200;
	font-size:24px;
}
.close{
	position:absolute;
	right:0px;
}
#toto{
	margin-top:150px;
}
</style>
 
<script type="text/javascript">
	var news = new Array();
	news[0] = ["Politique","pas bien la politique"];
	news[1] = ["sport","On a perdu la coupe du monde"];
	news[2] = ["sport","laure manuchao remporte la coupe de maracass"];
 
	var NbDeNews = news.length -1 // Permet de vérifier ou on en est pour l'affichage des news et boucler
 
	function changementTitreNews(numNews){
		x = "<span class=\"close\" onclick=\"closeMe('info')\">X</span>";
		document.getElementById("titre").innerHTML = "Section : " + news[numNews][0] +" titre : "+news[numNews][1]+" et i = "+numNews+ x + "<br />";
		if(NbDeNews == numNews){
			numNews = 0 ;
		}
		else{
			numNews++;
		}
		setTimeout(function() {changementTitreNews(numNews);}, 2000);
	}
 
	function closeMe(toClose){
		document.getElementById(toClose).style.display = "none";
	}
 
</script>
</head>
 
<body>
et le texte derrière pour voir la transparence
<div class="divInfo" id="info">
	<div class="divBackground"></div>
	<div class="divText" id="titre">et plein de texte sympa ici</div>
</div>
<div id="toto"></div>
<script type="text/javascript">
changementTitreNews(0);
</script>
</body>
</html>

23/01/2008, 11h50
Blood-of-shadow

Wahou, réponse rapide :D Merci beaucoup !

Ca marche super bien, par contre, sur IE, la barre peu descendre à l'infini. Je m'explique, sous IE la barre créer un scroll alors qu'avant il n'y était pas, et avec ce scroll, je peu descendre à l'infini, la barre reste collée en ba biensure (comme il faut). Si tu pouvais m'expliquer le phénomène et un moyen de règler ça stp.

Merci

voila il y avait qqs modification à faire au niveau du css :)

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.divInfo{
	position:absolute;
	left:0px;
	height:30px;
	bottom:0px;
	width:100%;
	color:#ffffff;
}
.divBackground{
	position:absolute;
	left:0px;
	width:100%;
	background-color:#000000;
	opacity: 0.6;
	filter:alpha(opacity=60);	
	z-index:50;
	font-size:24px;
}
.divText{
	position:absolute;
	left:0px;
	width:100%;
	z-index:200;
	font-size:24px;
}
.close{
	position:absolute;
	right:20px;
}
 
</style>
 
<script type="text/javascript">
	var news = new Array();
	news[0] = ["Politique","pas bien la politique"];
	news[1] = ["sport","On a perdu la coupe du monde"];
	news[2] = ["sport","laure manuchao remporte la coupe de maracass"];
 
	var NbDeNews = news.length -1 // Permet de vérifier ou on en est pour l'affichage des news et boucler
 
	function changementTitreNews(numNews){
		x = "<span class=\"close\" onclick=\"closeMe('info')\">X</span>";
		document.getElementById("titre").innerHTML = "Section : " + news[numNews][0] +" titre : "+news[numNews][1]+" et i = "+numNews+ x + "<br />";
		if(NbDeNews == numNews){
			numNews = 0 ;
		}
		else{
			numNews++;
		}
		setTimeout(function() {changementTitreNews(numNews);}, 2000);
	}
 
	function closeMe(toClose){
		document.getElementById(toClose).style.display = "none";
	}
 
</script>
</head>
 
<body>
 
et le texte derrière pour voir la transparence <br />
<div class="divInfo">
	<div class="divBackground">&nbsp;</div>
	<div class="divText" id="titre">et plein de texte sympa ici</div>
</div>
<script type="text/javascript">
changementTitreNews(0);
</script>
</body>
</html>

23/01/2008, 22h27
Blood-of-shadow

J'essaye ça demain, merci beaucoup de ton aide
24/01/2008, 08h30
Blood-of-shadow

La barre marche bien sur les deux mais ne reste pas en bas de page :?
24/01/2008, 08h52
le_chomeur

Salut :)
Bon soyons clair , nous sommes ici pour aider non pour créer / réaliser les scripts complet :) il y a des sociètés pour cela ^^
Je te laisse donc chercher la dernière étape, qui consiste à fixer la position de la div ...
mot clef à utiliser :
- position
- fixed
- css

voila ;) attention il y a une petite différence sous ie et firefox, mais en cherchant sur le forum approprié tu devrais trouver très rapidement ;)

bon courage ^^