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
