Discussion :

[arkham55]

Bonjour à tous et toutes,

Vous allez bien?
J'ai un petit problème que je n'arrive pas à comprendre, la situation est simple :
Sur ma page html j'ai trois éléments:
-Une partie publique où on a une présentation.
-Un div 'page' qui servira de masque noir transparent.
-Un div 'Boxes' contenant un dialogue, un message simplement.

Le problème se situe au niveau du clique sur le bouton qui affiche le masque et les Boxes. Il ne rentre même pas dans la fonction. Pourtant la syntaxe est correcte et la dernière version de JQuery est importée avant mon script. D'ailleurs :

Code :

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

1
2
3
4
5
$(document).ready(function() {
	$("#page").hide();
	$("#boxes").hide();
	alert("sont caches");
});

fonctionne très bien. Mais l'alert en début de la fonction au click ne s'affiche même pas... Une idée?
Je joins le fichier html de mon test.

Merci d'avance.

[Fenn_]

J'ai jeté un oeil, ta syntaxe n'est pas correcte.
Le principe du

Code :

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

1
2
3
$(document).ready(function(){
    //ton code ici
});

c'est qu'il englobe tout le js qui sera exécuté quand le dom sera prêt, y compris les bindings d'évènements.

ton js devrait être celui-ci:

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
$(document).ready(function() {
				$("#page").hide();
				$("#boxes").hide();
				alert("sont caches");
 
 
				$("#shadowbox").click(function() {
					alert('Attention affichage shadow!');
					//Récupération des dimensions de la page
					var xHeight = $(document).height();
					var xWidth = $(window).width();
					//Dimensionnement du masque recouvrant la page
					$('#page').css({'width':xWidth,'height':xHeight});
					//Apparition du masque
					$('#page').fadeIn();
					//Attribution à celui-ci d'une transparence de
					//façon à laisser la page légèrement visible 	
					$('#page').fadeTo("fast",0.6);	
 
					var xH = $(window).height();
					var xW = $(window).width();
					//Centrage de la shadow box
					$("#dialog").css('top', xH/2-$("#dialog").height()/2);
					$("#dialog").css('left', xW/2-$("#dialog").width()/2);
					//Apparition de la shadow box
					$("#dialog").fadeIn(); 
 
				});
				//Fermeture de la shadow box via le bouton qu'elle contient
				$('.close').click(function () {
					$('#page').hide();
					$('.window').hide();
				});
			});

autre chose, tu caches la div #boxes, qui contient #page et #dialog. Donc même si tu les fait apparaître, elles seront toujours contenues dans une div non affichée.
Je ne suis pas certain que tes z-index et tes centrages soient bons. Tu modifies les propriétés top et left de #dialog avec ton calcul, alors que c'est son conteneur, #boxes qui est positionné en absolute.

et là il y a une erreur html:

Code :

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

<img src="" <br>

devrait être

Code :

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

<img src="" /> <br />

Voilà tous les soucis potentiels que je vois au premier coup d'oeil.

[arkham55]

Merci pour tes réponses, je vais y remédier de suite et te dirai ce qu'il en était! Merci beaucoup!