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.

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

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

Display:none & display:block

JavaScript

Vue hybride

Discussions similaires

Partager

Partager