hide / show avec ID

**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

hide / show avec ID

jQuery

Discussions similaires

Partager

Partager