hide / show avec ID [Résolu]

lda75 · 12/07/2011, 12h41

Bonjour, j'essaie de faire un système qui affiche plusieurs box, qui au clic s'agrandissent pour afficher une autre box plus grande avec un autre contenu. Jusque-là tout va bien.
Mais là où je bloque c'est pour fermer la box ouverte quand j'en ouvre une autre. Je ne sais pas si ce code est correct, s'il y a quelques bugs, ou s'il est à remanier complètement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function display(action, id) {
 
    if (action == 'show') {
		$("#big" + id).css({ width:"10px"}).css( { height:"10px"}).css({opacity:0.7});
		$("#big" + id).animate( { height:"560px"}, 500 ).animate( { width:"605px"}, 1000 ).animate({opacity:1}, 300);
	 	$("#box" + id).css('display', 'none');
        $("#big" + id).css('display', 'block');
		$("#big" + id).css('display', 'block');
		$("body").children().not("#big" + id).css('display', 'none');
 
	}
    if (action == 'hide') {
		$("#big" + id).animate( { height:"1px"}, 200 ).animate( { width:"1px"}, 200 ).animate({opacity:0}, 200);
        $("#box" + id).css('display', 'block');
        $("#big" + id).css('display', 'none');
    }
 
}

Je pense que c'est cette ligne qui me pose problème

Code :

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

$("body").children().not("#big" + id).css('display', 'none');

Peut-être que quelqu'un aurait aussi un début de piste pour le second problème qui se pose, à savoir que la page est assez longue au chargement, car dans chaque box une fois cliquée, se trouve un diaporama et du coup j'ai l'impression qu'ils se chargent tous à l'ouverture de la page. Mais peut-être que là ca devient de l'ajax et que je ne suis pas au bon endroit pour poster (ou peut-être que je n'ai rien compris et qu'on le peut le faire en JS

)

j'ai tenté des trucs comme remove() etc. mais rien de concluant…

Merci !

danielhagnoul · 12/07/2011, 22h04

Bonsoir

Sans le contexte (HTML, CSS, jQuery) ou un lien vers votre page de test, c'est impossible.

lda75 · 13/07/2011, 10h38

pardon, je pensais que le javascript suffisait

voici le code concerné (sous spip) :

Code :

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

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<!-- récupération variable dans l'url -->
<?php $art = ($_GET['art']); ?>
 
<!-- ouverture de la box passée par URL -->
<script type="text/javascript">
	$(document).ready( function () {
		$('#box<?php echo $art; ?>').css('display', 'none');
		$('#big<?php echo $art; ?>').css('display', 'block');
	})
</script>
 
</head>
 
<body class="page_rubrique">
 
<!--fonction show/hide -->
<script type="text/javascript">
	function display(action, id) {
 
		if (action == 'show') {
			$("#big" + id).css({ width:"10px"}).css( { height:"10px"}).css({opacity:0.7});
			$("#big" + id).animate( { height:"560px"}, 500 ).animate( { width:"605px"}, 1000 ).animate({opacity:1}, 300);
			$("#box" + id).css('display', 'none');
			$("#big" + id).css('display', 'block');
			$("#big" + id).css('display', 'block');
 
		}
		if (action == 'hide') {
			$("#big" + id).animate( { height:"1px"}, 200 ).animate( { width:"1px"}, 200 ).animate({opacity:0}, 200);
			$("#box" + id).css('display', 'block');
			$("#big" + id).css('display', 'none');
		}
 
	}
</script>
 
<div id="page">
 
    <div id="conteneur">
 
        <div id="contenu">
 
            <div id="mainDiv">
                <div class="box blackBox typeKit">
                <p>#TITRE</p>
                </div>
 
                <B_articles>
 
                    <div class="menu articles">
                    <ul>
 
                        <BOUCLE_articles(ARTICLES) {id_rubrique} {par date}{inverse}>
                            <li>
                                <!-- small box -->
                                    <a id="link#ID_ARTICLE" href="javascript:display('show', #ID_ARTICLE)">
                                        <div id="box#ID_ARTICLE" class="box">
                                            [(#LOGO_ARTICLE|image_reduire{200,125})]
                                            <p class="vignette typeKit">#TITRE</p>
                                        </div>
                                    </a>
                                <!-- END --> 
 
                                <!-- big box -->
                                    <div id="big#ID_ARTICLE" class="bigBoxRub" style="display:none">
                                        <a id="close#ID_ARTICLE" href="javascript:display('hide', #ID_ARTICLE)">
                                        	<img id="close" class="close" src="squelettes/img/closeBTN.png" />
                                        </a>
 
                                        <div id="IMGcycle">[(#MODELE{sjcycle}{id_sjcycle=#ID_ARTICLE})]</div>
 
                                        <div id="descriptionProjet">
                                            <span><h1>#TITRE</h1><div id="date">[(#DATE|affdate_mois_annee)]</div></span>
                                            <p>#DESCRIPTIF</p>
                                            <p>#TEXTE</p>
                                        </div>
                                    </div>
                                <!-- END -->
 
                            </li>
                        </BOUCLE_articles>
                    </ul>
                    </div>
                </B_articles>
            </div>
        </div><!--#contenu-->
    </div><!--#conteneur-->
</div><!--#page-->
</body>
</html>

Merci !

SpaceFrog · 13/07/2011, 10h50

il eut été plus intéressant de voir le html généré ...
(duplications d'id ??)

lda75 · 13/07/2011, 11h20

décidément je suis au fraises… la version en construction : http://tinyurl.com/5skq7or

Une duplication d'ID ? pourtant j'ai justement essayé de créer des ID uniques pour pouvoir ouvrir individuellement chaque box…

danielhagnoul · 15/07/2011, 21h00

Bonsoir

Je vois un bloc 36 (link36, box36, big36, close36) qui contient un "close" et un "IMFcycle"

Code :

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

1
2
3
<img id="close" class="close" src="squelettes/img/closeBTN.png" />
 
<div id="IMGcycle"><script type="text/javascript">

Belote pour le bloc 35 !

Rebelote pour le bloc 34 !

Il y a donc bien duplication d'au minimum deux ID.

lda75 · 18/07/2011, 12h13

Ok, je n'avais pas tout compris
je regarde ça de plus près et je reviens vers vous
merci !

lda75 · 18/10/2011, 09h32

Je reviens vers vous après tout ce temps.
J'ai réglé ce probleme de doublons et j'ai surtout trouvé une solution en ajoutant une classe .boxouverte via la fonction addclass. Du coup ca fonctionne très bien.

Merci à vous

12/07/2011, 22h04	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Sans le contexte (HTML, CSS, jQuery) ou un lien vers votre page de test, c'est impossible. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

13/07/2011, 10h50	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	il eut été plus intéressant de voir le html généré ... (duplications d'id ??) __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/10/2011, 09h32	#8
lda75 Invité de passage Inscription : juillet 2011 Messages : 5 Détails du profil Informations forums : Inscription : juillet 2011 Messages : 5 Points : 3 Points : 3	suite et fin. Je reviens vers vous après tout ce temps. J'ai réglé ce probleme de doublons et j'ai surtout trouvé une solution en ajoutant une classe .boxouverte via la fonction addclass. Du coup ca fonctionne très bien. Merci à vous
	10

13/07/2011, 11h20	#5
lda75 Invité de passage Inscription : juillet 2011 Messages : 5 Détails du profil Informations forums : Inscription : juillet 2011 Messages : 5 Points : 3 Points : 3	décidément je suis au fraises… la version en construction : http://tinyurl.com/5skq7or Une duplication d'ID ? pourtant j'ai justement essayé de créer des ID uniques pour pouvoir ouvrir individuellement chaque box…
	00

18/07/2011, 12h13	#7
lda75 Invité de passage Inscription : juillet 2011 Messages : 5 Détails du profil Informations forums : Inscription : juillet 2011 Messages : 5 Points : 3 Points : 3	Ok, je n'avais pas tout compris je regarde ça de plus près et je reviens vers vous merci !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email