Display:none & display:block

**RicardoBxl** · 15/01/2013, 23h42

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 :

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

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

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
/**
 * 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 :

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

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

**RicardoBxl** · 16/01/2013, 16h30

Bon voilà j'ai tenté ce code mais ca ne marche toujours pas:

Javascript (fichier à part)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function CVAfficherCacherBloc(ExpX,ExpY){
 
	var BlocTexteACacher = document.getElement.ById(ExpX);
	var BlocTexteAAfficher = document.getElementById(ExpY);
 
	var EtatExpX = BlocTexteACAcher.style;
	var EtatExPY = BlocTexteAAfficher.style;
 
	EtatExpX.display = "none";
	EtatExpY.display = "block";
 
	}

HTML5 (appel de la fonction sur clic)

Code :

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

1
2
<input type="image" name="fleched" id="fleche" src="Images/icon_fleched.png" 
		onclick="CVAfficherCacherBloc('Exp1','Exp2')"/></input>

Quelqu'un peut-il me dire ce que je fais de mal ? Et eventuellement corriger ?

Pour rappel je désire afficher au fur et à mesure des clics mes expériences. Mais à chaque clic "flèche vers la droite" ou "flèche vers la gauche" l'expérience qui apparaît occupe la position de la précédente qui se sera vu cacher via display:none.

Le but étant que mon CV soit consultable sur un seul écran et qu'il ne faille pas scroller 15 pages pour le voir.

**RicardoBxl** · 16/01/2013, 17h41

Eh bien j'ai trouvé la solution.

Je ne vous dis pas j'ai sué. En fait d'une j'avais tout simplement omis les simples guillemets pour les paramètres que j'envoie à la fonction.

Voici le code définitif qui marche nickel:

1° Au bas de la première expérience il y a une flèche permettant d'afficher ma seconde expérience professionnelle via le code suivant:

Code :

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

1
2
	<input type="image" name="fleched" id="fleche" src="Images/icon_fleched.png" 
		onclick="CVAfficherCacherBloc('Exp1','Exp2')"/></input>

Etau bas de la seconde expérience professionnelle il y deux flèches évidemment. L'une pour revenir à l'expérience précédente et l'autre pour passer à la suivante donc la troisième.

Code :

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

1
2
3
4
5
6
<input type="image" name="flecheg" id="fleche" src="Images/icon_flecheg.png"
				onclick="CVAfficherCacherBloc('Exp2','Exp1')"/></input>
 
 
				<input type="image" name="fleched" id="fleche" src="Images/icon_fleched.png" 
		onclick="CVAfficherCacherBloc('Exp2','Exp3')"/></input>

Et code javascript de la fonction appelée:

Code :

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

1
2
3
4
5
6
7
function CVAfficherCacherBloc(id1,id2){
 
	document.getElementById(id1).style.display="none";
	document.getElementById(id2).style.display="block";
 
 
	}

Comme on peut le voir sur les 2 copies d'écrans ci-jointes ca mrche nickel. Les expériences se succèdent sur un écran et donc plus besoin de scroller pour voir le CV.

**Vil'Coyote** · 16/01/2013, 17h44

faute de copie ou pas :

Code :

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

var BlocTexteACacher = document.getElement.ById(ExpX);

à remplacer par

Code :

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

var BlocTexteACacher = document.getElementById(ExpX);

tant qu'on y est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  if( document.getElementById(ExpX).style.visibility=="hidden")
  {
     document.getElementById(ExpX).style.visibility="block";
     document.getElementById(ExpY).style.visibility="hidden";
     ........
  }
 
  if(document.getElementById(ExpY).style.visibility=="hidden")
  {
     document.getElementById(ExpX).style.visibility="hidden";
     document.getElementById(ExpY).style.visibility="block";
      ......................
  }

et aussi

Code :

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

onclick="javascript:CVAfficherCacherBloc('Exp1','Exp2');"

**RicardoBxl** · 16/01/2013, 17h56

C'est gentil d'avoir proposé ta solution et je la note.

Mais comme tu as pu le lire sans doute j'ai résolu par moi-même le problème.

Je voulais tellement résoudre çà au plus vite que j'ai potassé tout l'après-midi lol.

Bonne soirée à toi,

**NoSmoking** · 16/01/2013, 22h45

Bonsoir,

Envoyé par Vil'Coyote

Code :

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

document.getElementById(ExpY).style.visibility="block";

attention visibility n'accepte pas block comme valeur.

**RicardoBxl** · 16/01/2013, 22h49

Tient à propos de visibility:none , je ne l'ai pas employé car si j'ai bien compris cela cache le contenu du conteneur et laisse ce dernier prendre sa place dans le flux.

Au contraire de display:none qui non seulement cache le contenu mais sort le conteneur du flux.

Et c'est le résultat que j'ai sur mon site.

Merci en tout cas à tous les deux pour votre temps.

Bonne soirée,

Ricardo

Display:none & display:block

JavaScript

Discussions similaires

Partager

Partager