Display:none & display:block
Bonsoir,
Je viens encore de progresser dans la cr�ation de mon site web et ai pondu le code suivant pour le t�l�chargement de mon CV en fr.
Voici le code HTML5
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Senior Credit Controller</title>
<link rel="stylesheet" href="Styles/IndexStyle.css" />
<script type="text/javascript" src="Scripts/CodeWebSite.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if !IE]> <-->
<style type="text/CSS">
nav li ul {
position: absolute;
}
</style>
<!--><![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
nav li ul {
position:absolute;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style type="text/CSS">
nav li ul {
position:absolute;
}
</style>
<![endif]-->
</head>
<body onload="CacherBlocCVfrChargement();"> |
Je vous fait gr�ce d'une partie du code pour vous remettre celle qui me semble appropri� pour ce post ....
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
| <div id="Exp2" class="Exp">
<div class="ExpHeader">
<h3 class="Company">BELGACOM</h3>
<span class="Date">01/02/2010 - 07/06/2010</span>
<br>
<span class="Position">Senior Reporting Analyst</span>
<br>
<span class="TypeContract">CDI</span>
<br>
</div>
<p>Position ayant pour but la collecte, le reporting et l'analyse
des donn�es de t�l�phonie fixe et mobile</p>
<ul class="Tasks">
<li>Collection, Reporting et Analyse
<ul>
<li>Apr�s avoir �t� collect�s via diff�rents sources informatiques,
les revenus �taient retranscris dans des rapports via lesquels j'effectuais
des analyses. Ces analyses avaient pour but de v�rifier la pertinence
des forecasts. En regard des r�sultats il me fallaits commenter les variations.</li>
</ul>
</li>
<li>Am�lioration et impl�mentations de nouveaux reportings
<li>Meetings
<ul>
<li>Ces r�unions avaient pour but de faire avance des projets,
discuter des tendances, fournir du conseil et prendre connaissance
des derni�res d�cisions prises dans l'un ou l'autre domaine: pricing plan
, forecasts, m�thodes d'analyse ou de reporting, etc</li>
</ul>
</li>
<li>Consolidation
<ul>
<li>Contr�le de la pertinence des chiffres en les comparant � d'autres
rapports fournis par d'autres d�partements.</li>
</ul>
</li>
</ul>
<input type="image" name="flecheg" id="fleche" src="Images/icon_flecheg.png"
onclick="AfficherBloc('Exp2')"/></input>
<input type="image" name="fleched" id="fleche" src="Images/icon_fleched.png"
onclick="AfficherBloc('Exp1')"/></input> |
Ici le code javascript dans un fichier � part:
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
| /**
* Code Javascript
*/
function CacherBlocIndexChargement(id){
document.getElementById("Afficher1").style.display = "none";
document.getElementById("Afficher2").style.display = "none";
document.getElementById("Afficher3").style.display = "none";
}
function CacherBlocCVfrChargement(id){
document.getElementById("Exp2").style.display = "none";
document.getElementById("Exp3").style.display = "none";
document.getElementById("Exp4").style.display = "none";
}
function AfficherBloc(id){
var BlocTexte = document.getElementById(id);
var Etat = BlocTexte.style;
if (Etat.display=="" || Etat.display=="none")
{
Etat.display = "block";
}
else
{
Etat.display = "none";
}
} |
Voila ma question est la suivante. Lorsque le CV est t�l�charg� on aurait id�alement une premi�re exp�rience qui s'afficherait. Et si l'on d�sire en savoir plus on clique alors sur une fl�che. Au clic sur la fl�che la premi�re exp�rience dispara�t via display:none et la seconde exp�rience appara�t via display:block.
Par d�faut Exp1 est � display:block pour que automatiquement au chargement de la page on ait ma premi�re exp�rience.
je dois avouer que j'ai test� mon code et tout va bien sauf que je ne sais pas comment "dire" lorsque tu affiches l'ExpY tu cache l'ExpX de sorte que chaque exp�rience apparaisse bien au centre de ma page et ne n�cessite aucun scroll.
J'esp�re que je suis clair. De toute fa�on si vous voulez voir le r�sultat mon site est � l'adresse suivante: http://myspace.voo.be/rarrabito/index.html
J'avais pens� � la solution suivante mais cela ne marche pas:
Code:
1
2
| <input type="image" name="fleched" id="fleche" src="Images/icon_fleched.png"
onclick="AfficherBloc('Exp2')" onclick="CacherBloc('Exp1')"/></input> |
Pour moi cela donne la traduction fran�aise suivante: sur clic de mon bouton tu appelles la fonction CacherBloc avec comme id Exp1 pour mettre ce bloc � dispaly:none et tu appelles la fonction AfficherBloc avec comme id Exp2 pour mettre ce bloc � display:block.
Ma logique est-elle quand-m�me bonne et si non un petit coup de pouce me ferait plaisir. Je suis en plein d�veloppement de mon site et j'aborde seulement le Javascript dans mon bouquin. Bien entendu j'ai consult� ce forum et d'autre mais l� je bloque. Et pour finir peut-on mettre comme je le propose l'appel � plusieurs fonctions dans un clic ?
D'avance merci pour votre aide.
Ricardo
