11548 sujets

JavaScript, DOM et API Web HTML5

{RESOLU}Probleme pour Fermer DIV toggle

Bonjour,

j'ai un petit souci, Smiley biggol

J'utilise la fonction Toggle de jquery, pour ouvrir une "DIV" qui suis un "li" .
Avec cette fonction j'utilise aussi Cycle pour avoir un SlideShow dans la DIV ouverte.

Pour un besoin esthétique, ma "DIV" s'ouvre par dessus mes autres "li",
cela évite les "trous" laisser par la "div" ouverte, mais cela m’empêche de pouvoir
refermer la "div" en appuyant sur le "li" correspondant.... Smiley eek

Comment je pourrais faire pour ajouter un bouton "fermer" sur la "div" ouverte.
Le SlideShow fonction par clik sur la "div" aussi, ce qui pourrait poser un souci avec
le bouton "fermer" ??? Smiley wingol

le JS : 

$(document).ready(function() {
        
        $("li").click(function(){
            $(this).toggleClass("active");
            $(this).next("div").stop('true','true').slideToggle("slow");
        });
    });
    
    $('#contenu').cycle({ 
    fx:     'fade', 
    speed:  300, 
    next:   '#contenu', 
    timeout: 0 
    });


merci pour vos lumière
Modifié par Mani (08 Mar 2012 - 14:09)
Si il n'est pas possible d'ajouter un bouton "fermer"
Comment faire pour forcer tous les "li" à aller sous la div ouverte ??

a écrit :
La plupart des "li" vont bien sous la "div" ouverte mais pas la "li" qui as ouvert la "div" qui reste cacher par la "div" ... donc inaccessible ...
.

Plutôt claire, non Smiley biggol
Modifié par Mani (07 Mar 2012 - 14:51)
C'est pas un problème de z-index plutôt?
Genre le li qui est caché par la div, tu peux pas lui donner un z-index 100 et à la div un z-index 50?
Et pour forcer les li a rester sous la div ouverte, il faudrait les positionner en absolue peut-etre.
Modifié par aelor (07 Mar 2012 - 22:58)
Mes "li" sont placés comme des miniatures pour une galerie.

Donc les "li" occupe tout l’écran, et la "div" ouvert occupe toute la largeur
et ce place en haut de page en repoussant tous les "li" à la suite.

Donc en faite j'aimerais que tous les "li" soient repoussés par la div,
pour pouvoir la refermer avec le "li" correspondant.... mais la div repousse que
les "li" suivant..

Si tous les "li" restent sous la div il faudrait rajouter un bouton fermer sur la div.... et je pense
pas que se soit possible ... c'est pour ça que j'ai modifié, pour que la div repousse les "li"...

> ça sera plus simple : www. iyoku. fr/site/js/

merci pour ta réponse
Modifié par Mani (07 Mar 2012 - 23:55)
Je pense que c'est possible de mettre un bouton pour fermer l'image.
Exemple:
tu mets une petite croix dans #contenu.
Tu mets #contenu en position relative et la croix en absolute dans un coin de l'image.

Et un bout de code dans ce genre la (non testé)

$('.croix').click( function(){
    $(this).parent('#contenu').slideUp(300);
});


Et voilà le tour est joué. (Enfin je pense Smiley murf )
Merci pour ton code.

J'ai essayé mais j'ai du mal à le faire marcher....

J'ai ajouté un span avec la class ".croix" mais avec la fonction "cycle" il est interpréter
comme un autre élément à afficher en diapo....

> Ex: img1, Img2 et la croix ....
Problème résolu ....

c'est du bidouillage mais ça fonctionne.

Merci aleor pour t'être pencher sur le sujet ; )
Modifié par Mani (08 Mar 2012 - 14:09)
Sujet clos
Aller à