Javascript: Disparition DIV sauf un élement
Résolu
joro2117
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
-
joro2117 Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
joro2117 Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je cherche sur différent forum, et essaie depuis un moment de faire disparait un DIV (jusque là tout va bien) sauf un élément de ce DIV.
Je m'explique, j'ai un DIV qui contient plusieurs images, quand je clique sur une image je voudrais que les autres images disparaisse sauf celle que j'ai cliqué dessus, elle devrait rester et s'agrandir.
Mon problème apparait quand je veux faire disparaître les autres images.
Pour faire disparaitre les autres images, je fais un "Effect.Fade('content');" (effet de la librairie script.aculo.us), content étant l'ID de mon DIV, l'images sélectionnée s'agrandit un cours instant et disparait avec les autres images 1 seconde après.
Si vous voyez une façon de procéder pour résoudre mon problème, je vous remercie d'avance.
Bonne journée
Joro
Je cherche sur différent forum, et essaie depuis un moment de faire disparait un DIV (jusque là tout va bien) sauf un élément de ce DIV.
Je m'explique, j'ai un DIV qui contient plusieurs images, quand je clique sur une image je voudrais que les autres images disparaisse sauf celle que j'ai cliqué dessus, elle devrait rester et s'agrandir.
Mon problème apparait quand je veux faire disparaître les autres images.
Pour faire disparaitre les autres images, je fais un "Effect.Fade('content');" (effet de la librairie script.aculo.us), content étant l'ID de mon DIV, l'images sélectionnée s'agrandit un cours instant et disparait avec les autres images 1 seconde après.
Si vous voyez une façon de procéder pour résoudre mon problème, je vous remercie d'avance.
Bonne journée
Joro
A voir également:
- Javascript: Disparition DIV sauf un élement
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Erreur #125 javascript - Forum Mozilla Firefox
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
21 réponses
Salut !
Si je comprends bien, tu as un div contenant toutes tes images ?
Si tu caches ton div, c'est normal que toutes les images contenues disparaissent également.
Ce que tu dois faire, c'est faire disparaître chaque image une à une.
Par exemple, en utilisant la librairie JQuery, avec le code :
tu vas cacher toutes les images ayant comme classe "images".
Après, il faut gérer le fait de ne pas cacher l'image sur laquelle tu as cliqué, en faisant un test dans ton each par exemple.
Si t'as d'autres questions, n'hésites pas !
Si je comprends bien, tu as un div contenant toutes tes images ?
Si tu caches ton div, c'est normal que toutes les images contenues disparaissent également.
Ce que tu dois faire, c'est faire disparaître chaque image une à une.
Par exemple, en utilisant la librairie JQuery, avec le code :
$('img.images').each(function(index, image)
{
$(image).hide();
});
tu vas cacher toutes les images ayant comme classe "images".
Après, il faut gérer le fait de ne pas cacher l'image sur laquelle tu as cliqué, en faisant un test dans ton each par exemple.
Si t'as d'autres questions, n'hésites pas !
Salut !
Voilà un script qui fonctionne :
Il faut que tu mette un id sur ton image (unique pour chaque image, mais après, peut importe l'id, tu peux générer un nombre aléatoire si tu veux) qui va servir à comparer l'image cliquée et les autres images.
Et il faut également une classe pour pouvoir récupérer l'ensemble des images (avec le selecteur $$('.images')) pour ensuite les cacher.
Dans ce code, on utilise prototype qui normalement doit être livré avec scriptaculous (dans le dossier lib).
Voilà, je pense que tu devrais pouvoir t'en sortir avec ça !
Si t'as d'autres questions, n'hésites pas !
Voilà un script qui fonctionne :
<html>
<head>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function imageClick(image)
{
$$(".images").each(function(obj, index)
{
if (obj.id != image.id)
{
$(obj).fade();
}
});
}
</script>
</head>
<body>
<img src="img/1.jpg" id="image_1" class="images" onclick="imageClick(this)"/>
<img src="img/2.jpg" id="image_2" class="images" onclick="imageClick(this)"/>
<img src="img/3.jpg" id="image_3" class="images" onclick="imageClick(this)"/>
<img src="img/4.jpg" id="image_4" class="images" onclick="imageClick(this)"/>
</body>
</html>
Il faut que tu mette un id sur ton image (unique pour chaque image, mais après, peut importe l'id, tu peux générer un nombre aléatoire si tu veux) qui va servir à comparer l'image cliquée et les autres images.
Et il faut également une classe pour pouvoir récupérer l'ensemble des images (avec le selecteur $$('.images')) pour ensuite les cacher.
Dans ce code, on utilise prototype qui normalement doit être livré avec scriptaculous (dans le dossier lib).
Voilà, je pense que tu devrais pouvoir t'en sortir avec ça !
Si t'as d'autres questions, n'hésites pas !
Salut,
Merci de ta réponse.
Aurais-tu une manière de le faire avec Script.aculo.us ? et le test dans mon each ressemblerais à "si cette image à été cliquer ne pas la cacher ?" comment puis-je traduire ceci en Javascript.
Bonne journée
Merci de ta réponse.
Aurais-tu une manière de le faire avec Script.aculo.us ? et le test dans mon each ressemblerais à "si cette image à été cliquer ne pas la cacher ?" comment puis-je traduire ceci en Javascript.
Bonne journée
Vraiment un très grand merci, tu as été génial.
J'ai encore une dernière question à te poser. Mes images s'affichent correctement, c'est OK et ceci grâce à toi.
Ma question:
si je veux rajouter un style, un effet, ou autres éléments sur mon image qui reste après le clique.
( Par exemple dans mon cas, une image "d'un bouton back" à côter de l'image qui rafraichirait la page afin de rétablir toutes les images.
Comment devrais-je m'y prendre ?
J'ai encore une dernière question à te poser. Mes images s'affichent correctement, c'est OK et ceci grâce à toi.
Ma question:
si je veux rajouter un style, un effet, ou autres éléments sur mon image qui reste après le clique.
( Par exemple dans mon cas, une image "d'un bouton back" à côter de l'image qui rafraichirait la page afin de rétablir toutes les images.
Comment devrais-je m'y prendre ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
De rien, c'était avec plaisir :-D
Pour ton bouton, tu peux mettre un bouton n'importe où sur ta page avec un style="display:none" pour qu'il ne soit pas affiché sur la page avant de cliquer sur ton image.
Ensuite, dans ta fonction imageClick, tu récupère ton bouton, avec son id par exemple, et tu l'affiche.
Si tu veux qu'il reload ta page, tu peux l'utiliser comme ça :
<input type="button" id="..." onclick="location.reload()"/>
Bonne fin de développement !
Pour ton bouton, tu peux mettre un bouton n'importe où sur ta page avec un style="display:none" pour qu'il ne soit pas affiché sur la page avant de cliquer sur ton image.
Ensuite, dans ta fonction imageClick, tu récupère ton bouton, avec son id par exemple, et tu l'affiche.
Si tu veux qu'il reload ta page, tu peux l'utiliser comme ça :
<input type="button" id="..." onclick="location.reload()"/>
Bonne fin de développement !
Ok, c'est tout bon.
Merci Wyllyjon, tu m'as beaucoup aidé si une fois je peux faire quelques choses pour toi...
A une prochaine
Bonne journée
Merci Wyllyjon, tu m'as beaucoup aidé si une fois je peux faire quelques choses pour toi...
A une prochaine
Bonne journée
re,
Si 'tes encore là,
Tu sais comment faire pour interdire le clique multiple sur un lien ? enfaite autoriser que le clique simple, même le double clique ne dois pas être pris en compte.
Après j'arrête de t'embêter, promis (xD) !
Bon app
Si 'tes encore là,
Tu sais comment faire pour interdire le clique multiple sur un lien ? enfaite autoriser que le clique simple, même le double clique ne dois pas être pris en compte.
Après j'arrête de t'embêter, promis (xD) !
Bon app
Tu as un attribut onDblClick que tu peux mettre sur ton lien. Si tu veux que rien ne se passe, je pense que tu peux faire :
<a href="toto" onDblClick="return false;">Click</a>
Le premier click du double click sera cependant pris en compte comme un click sur le lien normal...
<a href="toto" onDblClick="return false;">Click</a>
Le premier click du double click sera cependant pris en compte comme un click sur le lien normal...
Je l'ai vu, cette méthode sur d'autre forum, mais elle ne fonctionne pas.
tu peux m'expliquer la boucle que tu m'as donner toute à l'heure je voudrais l'utiliser pour autre chose mais je ne sais pas comment l'utiliser.
$$(".images").each(function(obj, index)
tu peux m'expliquer la boucle que tu m'as donner toute à l'heure je voudrais l'utiliser pour autre chose mais je ne sais pas comment l'utiliser.
$$(".images").each(function(obj, index)
Ah ? En la testant chez moi, elle marche. Qd je fais un double click sur le lien, c'est bien appelé (FF3.6), et ça a l'air compatible IE aussi.
Dis-moi comment tu veux utiliser ce double click, peut-être que je pourrai t'aider.
Et le each, c'est simple :
$$(".images") : c'est le sélecteur, qui va récupérer tous les éléments sur lesquels tu vas boucler ; c'est un sélecteur CSS, donc '.' pour une classe, "#" pour un ID, etc. Tu peux mettre ('.images div') qui va récupérer tous les div sous les éléments ayant une classe image, par exemple.
Et après, pour chaque élément, le each va appeler la fonction que tu lui passe en paramètre, avec deux paramètres :
- l'élément
- son index dans l'ensemble des résultats de la sélection.
Au final, ça donne :
$$(".images").each(function(obj, index){
// Tu fais les traitements que tu veux sur l'élément obj.
});
La doc prototype : http://prototypejs.org/api/enumerable/each
Dis-moi comment tu veux utiliser ce double click, peut-être que je pourrai t'aider.
Et le each, c'est simple :
$$(".images") : c'est le sélecteur, qui va récupérer tous les éléments sur lesquels tu vas boucler ; c'est un sélecteur CSS, donc '.' pour une classe, "#" pour un ID, etc. Tu peux mettre ('.images div') qui va récupérer tous les div sous les éléments ayant une classe image, par exemple.
Et après, pour chaque élément, le each va appeler la fonction que tu lui passe en paramètre, avec deux paramètres :
- l'élément
- son index dans l'ensemble des résultats de la sélection.
Au final, ça donne :
$$(".images").each(function(obj, index){
// Tu fais les traitements que tu veux sur l'élément obj.
});
La doc prototype : http://prototypejs.org/api/enumerable/each
Merci (encore).
Enfaite je veux autoriser un seul clique, parce que sur une image j'ai mit un onclick="mafonction()", et ensuite la fonction s'exécute, le seul problème c'est que si on clique plusieurs fois sur l'image, la fonction s'exécute plusieurs fois et je voudrais qu'elle s'exécute une seule fois.
Enfaite je veux autoriser un seul clique, parce que sur une image j'ai mit un onclick="mafonction()", et ensuite la fonction s'exécute, le seul problème c'est que si on clique plusieurs fois sur l'image, la fonction s'exécute plusieurs fois et je voudrais qu'elle s'exécute une seule fois.
Si la fonction onDblClick ne marche pas chez toi (bizarre), tu peux aussi utiliser un système de variable que tu mets à true ou false pour savoir si tu es déjà rentré ou pas dans la fonction.
Si tu es déjà entré dans la fonction, tu fais un return; sans rien faire.
Si tu es déjà entré dans la fonction, tu fais un return; sans rien faire.
l'idée des variables est sympathiques, mais je testerais comment (cliquer ou non)?
if(cliquer ou non){
mafonction();
}else{
return;
}
if(cliquer ou non){
mafonction();
}else{
return;
}
Non, juste la première fois que tu passes dans ta fonction, tu change la valeur de ta variable, et la seconde fois, voyant que ta variable à changé, tu sors de ta fonction sans rien faire
var dejaEntre=false;
function test()
{
if (!dejaEntre)
{
dejaEntre = true;
// Traitement
}
}
Expert technologies web et java.
merci, c'est Ok,
Tu sais comment je peux faire pour afficher quelques chose qui est cacher. Je m'explique xD.
J'ai un premier lien qui cache toute un DIV, sauf une image.
Effect.Fade(monDiv);
Et un deuxième lien qui affiche ce que j'ai cacher au paravant toute en cachant l'image garder au par avant.
Pour ce faire, je fais
Effect.Fade(monImageGarder) // pour qu'elle disparait
et je voudrais faire réapparaitre mon div.
alors je crée cette fonction, que j'utilise de cette manière
ShowEffect('monDiv'); //Pour réafficher mon div.
function ShowEffect(element) {
new Effect.Appear(element, {
duration : 2,
from : 0,
to : 1.0
});
}
Mon problème c'est que la fonction ne fais pas apparaitre le DIV, et cette fonction devrais fonctionner car je les utiliser de cette façon dans un autre projet.
var retour= document.createElement('img');
retour.setAttribute('src', 'img/retour.png');
ShowEffect(spanBack.appendChild(back));
et là mon image apparait belle et bien grâce à la fonction ShowEffect, mais pas dans l'autre situation.
Aurais tu une solution ?
Tu sais comment je peux faire pour afficher quelques chose qui est cacher. Je m'explique xD.
J'ai un premier lien qui cache toute un DIV, sauf une image.
Effect.Fade(monDiv);
Et un deuxième lien qui affiche ce que j'ai cacher au paravant toute en cachant l'image garder au par avant.
Pour ce faire, je fais
Effect.Fade(monImageGarder) // pour qu'elle disparait
et je voudrais faire réapparaitre mon div.
alors je crée cette fonction, que j'utilise de cette manière
ShowEffect('monDiv'); //Pour réafficher mon div.
function ShowEffect(element) {
new Effect.Appear(element, {
duration : 2,
from : 0,
to : 1.0
});
}
Mon problème c'est que la fonction ne fais pas apparaitre le DIV, et cette fonction devrais fonctionner car je les utiliser de cette façon dans un autre projet.
var retour= document.createElement('img');
retour.setAttribute('src', 'img/retour.png');
ShowEffect(spanBack.appendChild(back));
et là mon image apparait belle et bien grâce à la fonction ShowEffect, mais pas dans l'autre situation.
Aurais tu une solution ?
