Ouvrir div via un bouton -> Fermer div via 1 clic dans la page

Bonjour,

je ne viens vers vous que parce que mes tentatives ont échoué. Merci donc de bien vouloir m'éclairer et m'enseigner quelque chose que j'ignore.

De quoi s'agit-il ?

Une image-lien : on clique dessus : un photo apparaît en surrimpression de la page (div en z-index supérieur).

Jusque-là, rien que de très basique. Voici la fonction Javascript dont je me sers :

<script>
function afficher_cacher(id) {
if(document.getElementById(id).style.visibility=="hidden") {
document.getElementById(id).style.visibility="visible";
} else {
document.getElementById(id).style.visibility="hidden"; }
return true;}
</script>

L'appel de la fonction dans le lien cliquable :

<span onclick="javascript:afficher_cacher('zoom');"><img src="images/image-lien.jpg" /></span>
<div id="zoom"><img src="images/image-à-voir.jpg" /></div>

Jusque là ça fonctionne. D'ailleurs tout fonctionne : un clic sur l'image lien, la photo s'affiche ; un nouveau clic sur l'image-lien, et la photo disparaît.

Alors où est le problème ? Il est simple :

J'ai impérativement besoin que l'on puisse AUSSI fermer la div de la photo... EN CLIQUANT N'IMPORTE Où DANS LA PAGE... Mais comment puis-je faire évoluer mon code pour y parvenir ? Car le paradoxe d'une telle demande est d'exclure l'image-lien du reste de la page en prendre en compte pour fermer la div...

Je ne suis clairement pas compétent en javascript pour me répondre à moi-même... Merci beaucoup à toutes et tous ceux qui voudront bien m'aider.
Neum
Modifié par Neum (21 Oct 2011 - 14:46)

Salut Neum,

Tu peux jeter un oeil là-dessus : http://benalman.com/projects/jquery-outside-events-plugin/

Par contre ça t'oblige à utiliser Jquery.

Bonjour,

merci de t'être intéressé à mon problème. Cela étant, j'ai déjà du JQuery dans la page en question et je ne veux pas entrer dans une nouvelle "usine à gaz". J'ai juste besoin d'un javascript simple.

Le problème est donc toujours posé...

C'est pas vraiment une usine à gaz. Y'a juste un petit include de moins de 1ko et ce petit bout de code pour cacher l'élément que tu veux :

$("#ton_div").bind( "clickoutside", function(event){
$(this).hide();
});

Je l'ai déjà utilisé, ça marche très bien.

Sinon je suis pas sûr que tu puisses faire ça si simplement avec javascript. Fais une recherche google avec "jquery click outside". Y'a pas mal de trucs mais je suis pas sûr de leur fiabilité. Faut tester...
Modifié par hchtot (21 Oct 2011 - 18:16)

Rebonjour,

et vraiment, réellement, merci de "ne pas lâcher l'affaire".

Pour ce qui est de ce JQuery, je l'ai essayé... J'ai enregistré la page JQuery fournie, je l'ai lié dans l'entête, puis j'ai inséré le script de base que vous redonnez ici.

Et résultat : rien, ça ne fonctionne pas...

Peut-être ai-je manqué une subtilité, mais je ne vois vraiment pas quoi...
Modifié par Neum (21 Oct 2011 - 18:33)

Tu as bien remplacé "ton_div" par l'identifiant de ton div ("zoom" à priori) ?
Tu as bien inséré jquery et ensuite le script fourni et pas l'inverse ?
Tu as une erreur javascript ?

Sinon t'as pas une page en ligne ? Parce que là ça va être difficile de t'aider plus...

Bonjour hchtot,

Pour te répondre, et pour utiliser depuis un temps certain maintenant la librairie jquery, je n'ai pas fait d'erreur. Le fichier js est bien enregistré, son lien dans l'entête établi, la fonction implantée dans le Head (en ayant pris soin de changer la mention #nodal" par ma div "zoom") etc..

Mas non, ça ne fonctionne pas. Et non, il n'y a pas d'erreur affichée ou autre. La page s'affiche normalement, aucun bug, mais le script de clickOutside n'est pas opérationnel.

Maintenant, il y a une vraie différence entre mon besoin, ma page, et ce code JQuery :

Moi j'ai un bouton qui en étant cliqué affiche une div masquée par défaut. C'est un javascript basique comme je l'ai montré plus haut, qui affiche/masque une div. Ce premier javascript est donc essentiel.
La div "zoom" est donc la div de la photo cachée au départ. Elle ne s'affiche que parce que ce bouton a été cliqué, et elle ne disparaît que parce qu'on ré-appuie sur ce même bouton. C'est toujours le même javascript qui régit cet ensemble.

Il n'est donc pas question d'annuler ce principe ou de le remplacer. Il s'agit de lui additionner un autre script, qui autoriserait lui, de fermer la div en cliquant AUSSI n'importe ou dans la page.

Pour l'heure donc, la seule solution que j'ai trouvée, est de doubler le <span onClick de la fonction> : à la fois sur le bouton (pour qu'il affiche/masque la div) et à la fois sur la div elle-même (div "zoom"). Ainsi, j'arrive à refermer cette div "zoom" soit en cliquant sur le bouton, soit en cliquant sur elle-même. Etant assez grande, donc couvrant une partie de la page, elle me permet de contourner un peu le problème...

Pour autant, je suis toujours preneur d'une vraie solution. Quoiqu'il en soit, merci de ton aide.
Bien cordialement

P.S. : et non encore, pas de page en ligne : le site est en construction, en localhost...
Modifié par Neum (22 Oct 2011 - 14:03)

Je viens de retrouver le bout de code que j'avais mis en place à l'époque et qui marchait. Il faut mettre le code dans le document ready :

$(document).ready(function() {
	
    $("#zoom").bind( "clickoutside", function(event){
        $(this).hide();
    });
	
});

As-tu fait ça ?

Sinon, peut-être peux-tu poster l'intégral de ton code ici ?

Rebonjour,

et très sincèrement, merci de vouloir vraiment trouver une vraie réponse.

Pour autant, ça ne fonctionne pas. Peut-être parce que la page en question se destine aux iPhones et iPads, et donc doit être testée sur Safari Mac... Peut-être que le navigateur n'est pas compatible. Je n'en sais rien.

Pour ce qui est de montrer le code entier ici, ce serait vain : il est bien trop important et bien trop complexe, avec qui plus est, des portions qui n'ont rien à voir avec le sujet ici, etc...
Donc bon, bref, je ne vais pas entrer là-dedans.

Pour l'heure, je reste sur ma "solution-astuce" de fermer la div via le bouton et la div elle-même. La surface tactile ainsi définie devrait être suffisante sur les écrans tactiles, même si donc ça ne prend pas leur dimensions intégrales.

Je laisse topic ouvert, on ne sait jamais, pour de futures réponses. Avec désormais, aux vues des problèmes, une nette préférence pour le javascript...

Encore merci pour tout, sincèrement, et à une prochaine fois.
Bien cordialement,
Neum

Re,

Normalement ça fonctionne bien sur Safari. Tu dois pas être loin du but, mais c'est vrai que c'est pas évident de trouver ce qui cloche...

Si jamais je pense à autre chose, je reviendrai te voir ici.

En attendant, bon courage !

Bonsoir

merci infiniment de s'intéresser autant au topic.

Je continue assidument à chercher la solution Javascript et/ou JQuery à mon problème

Je viens de trouver des codes sur des forums américains que j'ai essayé de modifier en fonction de mon besoin. Celui que je vais donner ci-dessous marcherait presque, si ce n'est que la div EST AFFICHÉE d'emblée, alors qu'au contraire je la veux CACHÉE au départ. J'ai tout essayé, mais en vain... Comment faire ?

LE CSS :

#zoom {
margin: -6em 1em;
position: absolute;
white-space: nowrap;
background: white;
padding: 3px;
border: 1px solid #666666;
z-index: 500;
-moz-box-shadow: 10px 10px 15px #333333;
-webkit-box-shadow: 10px 10px 15px #333333;
box-shadow: 10px 10px 15px #333333;
}

LE JAVASCRIPT :

<script type = "text/javascript" > 
document . onclick = check ; 
function check ( e ){ 
var target = ( e && e . target ) || ( event && event . srcElement ); 
var obj = document . getElementById ( 'zoom' ); 
var obj2 = document . getElementById ( 'lien' ); 
if( target != obj && target != obj2 ){ obj . style . display = 'none' } 
else if( target == obj ){ obj . style . display = 'block' } 
}

LE CODE HTML DANS LE BODY :

<a href="" id="lien">
  <img src="images/imageLien.jpg" alt="boutonimage" border="0" /></a>
 <div id="zoom"><img src="images/zoom/imageEnGrand" alt="photo" border="0"/></div>

Ensuite, dernier point : le "a href" de l'image-lien oblige à une destination "vide" qui force à recharger la page pour afficher la div de la photo en grand. Y-a-t-il un moyen d'éviter ça dans ce code-ci ?
Merci pour toute l'aide qu'on voudra bien m'apporter concrètement et précisément sur ce travail.
Cordialement,
Neum
Modifié par Neum (23 Oct 2011 - 10:37)

Bonjour Neum,

Alors pour que le la div soit cachée d'emblée, il suffit de la mettre en display: none; dans le css.

Ensuite, pour qu'un clic sur le lien ne recharge pas la page, il faut faire ceci :

<a href="javascript:showZoom()" id="lien">ton lien</a>

Et bien sur la fonction showZoom() :

function showZoom() {
    document . getElementById ( 'zoom' ).style.display = "block";
}

J'ai testé, ça fonctionne. J'espère que ça te convient et que ton problème va enfin être résolu !
Modifié par hchtot (24 Oct 2011 - 09:44)

Bonjour hchtot,

et vraiment, merci beaucoup de tant de détermination et tant de générosité dans l'entraide... Vraiment merci.

Pour le reste, je n'arrive pas à voir comment, avec ton code, il est va être possible de fermer la div en cliquant n'importe où dans la page... Visiblement, ça n'est possible à nouveau qu'avec le bouton...
Et surtout, tu changes la fonction javascript... Or si j'en suis quasiment arrivé à la solution (en dehors du fait donc que je n'arrive pas a masquer la div au départ avec), c'est uniquement avec la dernière fonction javascript que j'ai donnée... (on click= check etc..)
Du reste, et avec cette version de la fonction, j'avais déjà essayé le display: none dans le CSS. Mais du coup, on ne peut plus afficher l'image...

Donc bon... j'ai peur qu'on tourne en rond là... A moins donc que décidément je n'ai rien compris à ton dernier message...

Pour l'heure, on m'a donné une astuce que j'ai utilisée pour le moment. Ca ne me convient pas à 100%, loin de là, mais c'est toujours mieux que rien en attendant de trouver LA solution : ouvrir un div 100% en positon absolute, sur lequel on active le javascript, et dans laquelle on met la div de l'image. Ca crée une sorte d'overlay invisible. Moyennant quoi on peut cliquer sur le bouton pour ouvrir l'image et cliquer dans la page pour la fermer.

Mais ça me pose des problèmes de positionnement de la div de l'image dans la page... Bref, l'astuce fonctionne mais bon, j'aimerais plutôt faire en sorte de passer par le javascript que j'ai donné ici en dernier...

Je pense que la solution réside dans ces 2 lignes :

if( target != obj && target != obj2 ){ obj . style . display = 'none' } 
else if( target == obj ){ obj . style . display = 'block' } 

Mais je n'arrive pas à la modifier pour parvenir à mes fins...

Quoiqu'il en soit, et très sincèrement, merci de ton aide et meme de ton "engagement". Merci.
Bien cordialement,
Neum

Ah non mais il faut que tu gardes ce que tu avais fait précédemment et que tu rajoutes la fonction showZoom() sur le href ! C'est simplement un ajout, il ne faut pas remplacer ce que tu avais fait qui fonctionne bien !

Bonsoir hchtot,

alors donc voilà, je n'avais rien compris à ton dernier post... ppffff

Bref, en effet, en combinant les 2 javascripts ça fonctionne!... ; enfin... A UN DÉTAIL PRÈS (!!!) :

On ne peut plus fermer la DIV des photos en cliquant aussi sur le bouton.... Or, hélas, j'ai impérativement besoin qu'on puisse la faire disparaître en utilisant LES DEUX possibilités : le bouton ET le body cliqué...

J'ai essayé de prendre modèle sur les habituels javascripts de type "afficher/cacher" et leurs conditions "if else" (au moins, ça ,en php, je connais!), mais chacune de mes tentatives s'est soldée par le fait que le bouton est inopérant et la div ne s'affiche même plus...
Je craque... je m'arrache les cheveux. C'est une véritable saloperie d'histoire de fous, je n'en peux plus. Impossible de compléter le code du bouton.

Avec le CSS en "display: none;", voilà ce que j'ai fait, et je ne vois pas l'erreur. En tous cas je ne comprends pas :

<script type="text/javascript"> 
function showZoom() { 
if(document.getElementById('zoom').style.display == "none") { 
document.getElementById('zoom').style.display = "block";
} else { 
document.getElementById('zoom').style.display = "none";
} 
</script>

Le bouton est carrément inactif et aucune div de photo ne peut s'afficher...

AU SECOURS....

Quoiqu'il en soit, encore mille mercis de ton aide et de ta générosité. Vraiment, j'insiste : merci. J'espère que tu pourras m'aider une ultime fois...
Bien sincèrement,
Neum

RÉ-ÉDITION DU POST :

J'ai trouvé une "astuce". Pour des raisons de design, j'affichais la DIV de la Photo appelée, à un endroit de la page précis, à côté du bouton.
L'astuce a consisté à mettre le CSS de la DIV avec la "MARGIN: 0 AUTO;" : du coup la DIV s'affiche PILE AU-DESSUS DU BOUTON. On doit donc cliquer sur la DIV ou dans le corps de la page pour la faire disparaître et du coup, "libérer" l'accès au bouton...
Cette astuce a au moins l'avantage sinon l'intérêt de "rester propre" au niveau du code...

Voilà. Je reste néanmoins preneur d'un javascript de bouton "afficher/Cacher" compatible avec le restant de ma page. Histoire, déjà, de me coucher moins ignorant que je ne me suis levé.

Encore Merci hchtot, pour tout, et j'espère,... au plaisir de te relire !
Modifié par Neum (24 Oct 2011 - 21:17)