Discussion :

[Papymouzo]

Bonjour,
Si je me débrouille en PHP, je suis nul en Javascript, bien que j'utilise des bouts de code trouvés sur Internet.
En fait je cherche une fonction qui me permettrait d'inverser deux div à deux endroits en un clic ... je m'explique:

<DIV1> <une image> <Un texte hyperlien pour inverser cette div avec la div2> <une image> </DIV1> // affichée par défaut au chargement de la page
<DIV2> <une autre image> <Un texte hyperlien pour inverser cette div avec la div1> <une autre image> </DIV2> // cachée par défaut au chargement de la page

à un autre endroit de la page
<DIV3> <un contenu iframe> </DIV3> // affichée par défaut au chargement de la page
<DIV4> <un autre contenu iframe > </DIV4> // cachée par défaut au chargement de la page

Les clics hyperliens dans les DIV1 et DIV2 doivent inverser DIV1 <-> DIV2 mais également DIV3 <-> DIV4
------------------------
<DIV5> <une image> <Un texte hyperlien pour inverser cette div avec la div6> <une image> </DIV5> // affichée par défaut au chargement de la page
<DIV6> <une autre image> <Un texte hyperlien pour inverser cette div avec la div5> <une autre image> </DIV6> // cachée par défaut au chargement de la page

<DIV7 <un contenu iframe> </DIV7> // affichée par défaut au chargement de la page
<DIV8> <un autre contenu iframe > </DIV8> // cachée par défaut au chargement de la page

Les clics hyperliens dans les DIV5 et DIV6 doivent inverser DIV5 <-> DIV6 mais également DIV7 <-> DIV8 !!! Pas d'interaction avec les DIV 1 à 4

Merci d'avance pour votre aide ...

[Beginner.]

Salut,

Teste ça : http://jsbin.com/qexekoqibe/1/edit?html,js,output

[Papymouzo]

Merci Beginner,

Génial, c'est exactement ce que je voulais faire ... et en plus tu me facilite le boulot en écrivant tout le script.

Mille mercis

[Papymouzo]

J'avais mis le topic en résolu car la réponse fournie par Beginner est absolument géniale et correspond exactement à ce que je voulais faire (Encore merci, Beginner) ...
Mais je le ré-ouvre car j'ai encore une question ... a tout hasard et sans urgence :
Peut-on passer l'état des div (block ou none) à une ou des variables globales (comme en PHP) ?
Ceci afin de conserver l'état de chaque div au rechargement de la page ou à l'accès à une page suivante (avec le même code script et html).
Je m'explique : Le script sert en fait à montrer (par défaut) ou cacher deux infos déroulantes dans la page (dans les iframe). Ces infos sont reprises sur chaque page du site.
L'idéal serait que le visiteur qui ne veut pas les voir (l'une ou l'autre ou les deux) ne doive pas recliquer sur le lien permutte() au changement de page et que son choix soit mémorisé pour toute sa visite.
Je n'ai pas de problème à passer des variables en PHP mais en JS, c'est une autre histoire
... mais c'est juste un petit plus pour le confort de la navigation et sans urgence bien sûr.

Merci
Philippe

[Papymouzo]

J'ai trouvé ... utilisation de cookies !
Encore merci Beginner

[Trebly]

Bonsoir,

Outre les techniques de masquage qui peuvent être obtenues aussi par CSS en utilisant l'attribut : target, plusieurs autres solutions peuvent être utilisées pour déplacer des éléments.

1- Une première solution consiste à permuter le contenu (innerHTML) de containers.
Définir à la conception des containers :

Code :

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

1
2
3
4
5
6
<div id="container-1"> <div id="mydiv-1"> ... </div> </div> 
<div id="container-2"> <div id="mydiv-2"> ... </div> </div> 
<div id="container-3"> <div id="mydiv-3"> ... </div> </div> 
<div id="container-4"> <div id="mydiv-4"> ... </div> </div> 
...
<div id="container-n> <div id="mydiv-n> ... </div> </div>

Pour changer l'ordre d'affichage nous écrirons dans un ordre adapté (simple tri et index de permutation), les permutations utiles et optimisées en utilisant dans la pratique des array définissant les permutations utiles.
A titre d'exemple nous permuterons 1 et 2 :

Code :

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

1
2
3
4
var Hcontent1 = document.getElementById("container-1").innerHTML;
var Hcontent2 = document.getElementById("container-2").innerHTML;
document.getElementById("container-1").innerHTML=Hcontent2;
document.getElementById("container-2").innerHTML=Hcontent1;

ou bien

Code :

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

1
2
3
var Hcontent_temp = document.getElementById("container-1").innerHTML;
document.getElementById("container-1").innerHTML=document.getElementById("container-2").innerHTML;
document.getElementById("container-2").innerHTML=Hcontent_temp;

des précautions s'imposent voir https://developer.mozilla.org/fr/doc...ent/innertHTML

2- On peut aussi utiliser les fonctions du DOM pour réassigner les éléments enfants (les div "mydiv-n") aux containers adaptés et générer ainsi une nouvelle organisation de la hiérarchie.
Plus complexe et délicat elle utilisera en fait directement les pointeurs vers les éléments et il sera toujours nécessaire d'utiliser au moins un container caché servant de réservoir tampon pour ne pas perdre des éléments en route.

3- Enfin le clonage peut être encore plus efficace, dans ce cas on cache tous les éléments d'origine et l'on manipule les clones que l'on ajoute comme enfants dans un container rendu visible à la demande.

Cordialement

Trebly