Comment réaliser une infonews transparente cela en JS ?

**amarcil** · 17/01/2008, 19h35

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 !

**le_chomeur** · 18/01/2008, 10h35

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

**le_chomeur** · 18/01/2008, 11h33

voila le script

je vous laisse l'améliorer

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
 
<!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>

**amarcil** · 18/01/2008, 15h46

c'est tres sympa ton aide, je vais de ce pas tester ça et je reviendrai ici après

**amarcil** · 18/01/2008, 17h26

et si je veux rajouter une croix ou un symbole quelconque pour faire disparaitre cette news c'est possible ou non?

**le_chomeur** · 18/01/2008, 18h37

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"

**SpaceFrog** · 18/01/2008, 18h42

faudrait peut être juste ajouter un moz-opacity dans le css pour la compatibilité avec firefox & gecko based ...

**le_chomeur** · 18/01/2008, 18h48

le opacity n'est pas pris en compte par ceux ci ??

**SpaceFrog** · 18/01/2008, 18h53

je ne pense pas que

Code :

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

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 ...

**Candygirl** · 18/01/2008, 20h24

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?

**Blood-of-shadow** · 22/01/2008, 18h45

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

**le_chomeur** · 23/01/2008, 10h28

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

j'ai ajouter le X pour fermer

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
 
<!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>

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

Wahou, réponse rapide

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

**le_chomeur** · 23/01/2008, 14h03

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

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
 
<!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>

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

J'essaye ça demain, merci beaucoup de ton aide

**Blood-of-shadow** · 24/01/2008, 08h30

La barre marche bien sur les deux mais ne reste pas en bas de page

**le_chomeur** · 24/01/2008, 08h52

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 ^^

Comment réaliser une infonews transparente cela en JS ?

JavaScript

Discussions similaires

Partager

Partager