div flottant qui n'apparait qu'une seule fois
Bonjour à tous,
Dans le cadre de mon application planing, je tombe sur un nouveau problème.
J'affiche un calendrier prenant en compte le nombre de jour du mois, sur chaque jours j'ai un petit icone qui est sensé me permettre d'éffectuer des action (un menu qui apparait au clic sur l'icone), menu généré via une requête ajax
Mais voilà, mon div s'affiche correctement la première fois, lorsque je clic hors de la zone du div il disparait (oui c'est bien ce que je voulait), mais le problème est que si je clic sur l'icone d'un autre jour le div ne s'affiche plus, en revanche la requête ajax elle est bien exécuté et retourne bien un menu, mais qui ne s'affiche pas
Voici mon jQuery
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
|
$(".showMnPlan").click(function(e){
// Variable permettant de vérifier la position du pointer
// Ceci évitera de fermer le menu si on clic sur un lien du menu
var mouse_is_inside = false;
// Récupère les différent paramètre à envoyer pour le menu
var idCbl = $(this).attr('id');
// Structuration des paramètres à envoyer lors de la requête
var tmp = idCbl.split("_");
var prm = "idCom="+tmp[0]+"&y="+tmp[1]+"&m="+tmp[2]+"&d="+tmp[3]+"&etat="+tmp[4];
// Dans le cas ou le div('#mnPlan') n'existe pas encore
var div = document.createElement('div');
// Mise en forme (passera par une classe une fois fonctionnel )
div.setAttribute("style","position:absolute;margin-top:-15px;z-index:1000;border: solid 1px #000;height:50px;width:200px;background-color:#fff;");
// Définit l'id du DIV
div.setAttribute("id","mnPlan");
// Si le div existe on l'affiche
if($("#mnPlan").length){ $('#mnPlan').show(); }
// Sinon on crée le div et on l'ajoute au DOM (sur le parent car le picto est une image )
else{ this.parentNode.appendChild(div); }
// Requête ajax
$.ajax({
type : 'POST',
url : 'libs/ajax/menuReady.php',
data : prm,
success: function(msg){
// En cas de succès on insère le menu dans le DIV
$('#mnPlan').html(msg);
}
});
// Détection du clic en dehors de la zone du div
$(document).click(function(e){
// Si on est sur le div alors on définit le inside à true
$('#mnPlan').hover(function(){ mouse_is_inside=true; },
// Sinon à false
function(){ mouse_is_inside=false; });
// Si le pointer n'est pas sur le div et que l'on clic sur le coter
// On masque le div
$(document).click(function(e){ if(! mouse_is_inside) $('#mnPlan').hide(); });
});
}); |
Je m'y prend peut-être mal ou j'ai peut-être une mauvaise approche de la chose, je débute en jQuery donc j'en serait pas trop étonné lol
Donc l'objectif, afficher un div contenant un menu au clic sur une image, fermeture de celui-ci si on clic en dehors, mais surtout celà doit être fesable sur tout les jours du mois
Si vous comprennez rien à ce que je raconte, n'hésitez pas à poser vos question, je tâcherai d'y répondre au mieux
D'avance merci de votre participation et de votre indulgence
Cordialement
