Accordion collaspe mais pas vraiment

**Pelote2012** · 21/02/2014, 19h30

Bonjour,

J'ai 2 fonctions JavaScripts: une pour fermer mon accordion et une autre pour calculer la taille de ma page.
Ma 1ere fonction s'exécute en 1er

Code javascript :

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

1
2
3
4
5
6
7
8
 
$(function () {
    $('#accordion').accordion({
        active: false,
        collapsible: true
    });
 
 });

et je mets un point d'arrêt dans la 2nd. Mais là je m'aperçois que sur le rendu web mes div ne sont pas encore transformés en accordion... Donc mon calcul de hauteur de page est faussé...
Ma 1ere fonction est appelé dans le header de ma page et ma 2nd est à la fin du body de ma master.
Mais avec les point d'arrêt, visiblement l'ordre d'exécution est bon. Mais le rendu pas forcément au rendez-vous

Pour essai j'ai aussi fait un appel de ma 2nd fonction à la fin du body de ma page : mais ça fait pareil
Pouvez-vous m'aider?

**danielhagnoul** · 21/02/2014, 22h03

Bonsoir

Au démarrage, je vous suggère d'initialiser le widget dans $( function(){ ... }); (DOM ready) mais de prendre la hauteur de la page dans $( window ).load( function(){ ... }); (page complètement chargée).

**Pelote2012** · 22/02/2014, 09h04

Maintenant effectivement quand j'arrive au point d'arrêt mon visuel de l'accordion est bien collapse. Et j'ai pu remettre ma fonction de calcul de taille avec les autres appels.
Site : http://www.yannickingenierie-informatique.fr/
mais je n'arrive pas à bien tout agencer

Code css :

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

1
2
3
4
5
6
7
8
div#page{
    position: relative;
    width: 960px;
    margin: 20px auto 0px auto;
    min-height: 100%; /* AJOUT */
    background-color: #C9DB93; /* le background ICI */
    border-radius: 10px 10px 0 0;
}

min-height:100% -> quand pas assez de contenu ça permet à ma page de descendre jusqu'au footer

Code javascript :

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
$(window).load(
    function () {
 
        var margintopPage = $("#page").cssInt("margin-top");
        var heightPage = $("#page").cssInt("height");
        var topTraversBar = $("#TraversBar").cssInt("top");
        var heightTraversBar = $("#TraversBar").cssInt("height");
        var heightFooter = $("#footer").cssInt("height");
        var heightContenu = $("#contenu").cssInt("height");
 
        var HautParPage = heightPage - topTraversBar - heightTraversBar - heightFooter;
        var HautParContenu = heightContenu - heightFooter;
 
        if (HautParPage > heightContenu) {
            $("#VertikBar").css("padding-bottom", HautParPage - heightContenu + "px");
            $("#page").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
        }
        else {
            $("#contenu").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
            $("#header").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
        }
    }
);
 
$(window).resize(
    function () {
        var margintopPage = $("#page").cssInt("margin-top");
        var heightPage = $("#page").cssInt("height");
        var topTraversBar = $("#TraversBar").cssInt("top");
        var heightTraversBar = $("#TraversBar").cssInt("height");
        var heightFooter = $("#footer").cssInt("height");
        var heightContenu = $("#contenu").cssInt("height");
 
        var HautParPage = heightPage - topTraversBar - heightTraversBar - heightFooter;
        var HautParContenu = heightContenu - heightFooter;
 
        if (HautParPage > heightContenu) {
            $("#VertikBar").css("padding-bottom", HautParPage - heightContenu + "px");
            $("#page").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
        }
        else {
            $("#contenu").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
            $("#header").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
        }
    }
);

permet de recalculer ma barre vertical
un autre problème est apparu sur mon accordion. Quand je l'ouvre c'est comme si mon footer était décalé vers le bas.

Mode source

Code html :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-language" content="fr" /><meta name="Author" content="YannickIngenierie Informatique" /><meta name="Publisher" content="YannickIngenierie Informatique" /><meta name="Category" content="Informatique, programmation, limoges, développement, Web Master, prestations informatiques" /><meta name="copyright" content="© YannickIngénierie. Tous droits réservés." /><link rel="publisher" href="https://plus.google.com/+YannickingenierieinformatiqueFr2012" /><link rel="icon" type="image/jpeg" href="/Images/logo.ico" /><link href="/Styles/custom-theme/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" /><link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/Scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="/Scripts/ModalPopupResult.js"></script>
    <script type="text/javascript" src="/Scripts/Helper.js"></script>
    <script type="text/javascript" src="/Scripts/VertikBarResize.js"></script>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
  m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 
        ga('create', 'UA-41720006-2', 'yannickingenierie-informatique.fr');
        ga('send', 'pageview');
 
    </script>
 
    <title>Recommander mes services informatiques</title>
    <meta name="Description" content="Recoomander mes services à vos proches et à vos connaissances." />
    <meta name="Keywords" content="contact, question,informatique, renseignement" />
    <script type="text/javascript" src="/Scripts/Helper.js"></script>
    <script type="text/javascript" src="/Scripts/Pages/Recommander.js"> </script>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
    <div id="TraversBar">
        <center class="CenterMenu">
            <div itemprop="breadcrumb" id="breadcrumb">
                <ul id="NavigationMenu" class="menu_deroulant">
                    <li><a href="/Accueil-Informatique-Limoges.aspx" title="Ingénieur informatique Limoges">
                        Accueil</a></li>
                    <li><a href="/Réalisations-Site-Web.aspx" title="Réalisations récentes de Site Web">
                        Réalisations</a></li>
                    <li><a href="/Devis-Informatique.aspx" title="Demande de devis SiteWeb, programmation et Logiciel">
                        Devis </a></li>
                </ul>
            </div>
        </center>
    </div>
    <div id="page">
        <div id="header">
            <div class="VertikBarHead">
                <br />
            </div>
            <div id="headerDroit" itemscope itemtype="http://schema.org/LocalBusiness">
                <div id="Vote">
                    <!-- Place this tag where you want the +1 button to render. -->
                    <div class="g-plusone" data-annotation="bubble" data-width="300">
                    </div>
                    <!-- Place this tag after the last +1 button tag. -->
                    <script type="text/javascript">
                        (function () {
                            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                            po.src = 'https://apis.google.com/js/platform.js';
                            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                        })();
                    </script>
                </div>
                <a itemprop="url" href="http://www.YannickIngenierie-Informatique.fr/">
                    <img style="border: 0px;" itemprop="logo" src="/Images/Logo.png" alt="YannickIngénierie"
                        title="Ingénieur en informatique Limoges" /></a>
                <div style="text-align: right; padding-right: 20px;">
                    L'informatique à votre portée...</div>
            </div>
            <div class="clear">
            </div>
        </div>
        <div id="contenu">
            <div class="VertikBarCorps" id="VertikBar">
                <br />
            </div>
            <div style="padding-left: 70px;">
 
    <h1>
        Me recommander</h1>
    <div id="accordion" style="width: 95%;">
     <h3>
            Par les réseaux sociaux</h3>
        <div>
            <p>
                Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada
                fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et
                ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
            </p>
            <p>
                Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
                aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            </p>
        </div>
        <h3>
            Par envoi de mail depuis le formulaire du site</h3>
        <div id="accordeon">
            <table >
                <tr>
                    <td align="left">
                        Votre Nom Prénom(*) :
                    </td>
                    <td align="left">
                        <input type="text" id="txtNom" style="width: 200px;" />
                        <label class="error" for="txtNom" id="Nom_error">
                            Champs Nom obligatoire.</label>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        Nom Prénom(*) du destinataire :
                    </td>
                    <td align="left">
                        <input type="text" id="txtDest" style="width: 200px;" />
                        <label class="error" for="txtDest" id="Dest_error">
                            Champs Nom obligatoire.</label>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        Email (*) du destinataire:
                    </td>
                    <td align="left">
                        <input type="text" id="txtDestEmail" style="width: 200px;" />
                        <label class="error" for="txtDestEmail" id="DestEmail_error">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        Objet (*) :
                    </td>
                    <td align="left">
                        <input type="text" id="txtSujet" style="width: 90%;" />
                        <label class="error" for="txtSujet" id="Sujet_error">
                            Champs Sujet obligatoire.</label>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        Message (*) :
                    </td>
                    <td align="left">
                        <textarea id="txtMsg" rows="10" cols="50"></textarea>
                        <label class="error" for="txtMsg" id="Msg_error">
                            Champs Message obligatoire.</label>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <div id="Secure">
                        </div>
                    </td>
                    <td align="left">
                        <input type="text" id="txtSec" style="width: 25px;" maxlength="3" />(*)
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div style="float: left;">
                            (*) : Champs obligatoire</div>
                    </td>
                </tr>
            </table>
            <div class="btnForulaire">
                <button id="btnEnvoyer">
                    Envoyer
                </button>
            </div>
        </div>
        <h3>
            Par votre messagerie</h3>
        <div>
            <p>
                Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
                hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
                tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
            </p>
        </div>
 
 
    </div>
    <br />
            </div>
            <div class="clear">
            </div>
        </div>
        <div id="footer">
            <a href="/Accueil-Informatique-Limoges.aspx" title="Retour à la page d'accueil de YannickIngénierie">
                Accueil</a> - <a href="/Mention-Legale.aspx" title="Mentions légales du site">Mentions
                    légales</a> - <a href="/Contact.aspx" title="Posez vos questions">Nous contacter
            </a>
        </div>
    </div>
    <div id="MsgBack" title="">
    </div>
 
</body>
</html>

je crise

**Pelote2012** · 25/02/2014, 14h31

J'ai trouvé une partie de la réponse.

En fait, faut retirer l'option collapsible et mettre active = dernier index. Comme ça il prend tout de suite la bonne taille, qui reste fixe.

J'aurais aimé quand même utiliser le collapsible et pouvoir mettre

Code javascript :

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

heigthStyle:"Content"

Faudrai que je lance le recalcul de taille de ma page.
J'ai vu le beforeActivate ... mais il y a-t-il un autre event qui s'exécute quand il est déjà activé.

Mon code de recalcul de page

Code javascript :

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
$(window).load(
    function () {
        ResizeBar();
    }
);
 
    $(window).resize(
    function () {
        ResizeBar();
    }
);
 
    function ResizeBar() {
        var margintopPage = $("#page").cssInt("margin-top");
        var heightPage = $("#page").cssInt("height");
        var topTraversBar = $("#TraversBar").cssInt("top");
        var heightTraversBar = $("#TraversBar").cssInt("height");
        var heightFooter = $("#footer").cssInt("height");
        var heightContenu = $("#contenu").cssInt("height");
 
        var HautParPage = heightPage - topTraversBar - heightTraversBar - heightFooter;
        var HautParContenu = heightContenu - heightFooter;
 
        if (HautParPage > heightContenu) {
            $("#VertikBar").css("padding-bottom", HautParPage - heightContenu + "px");
            $("#page").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
        }
        else {
            $("#contenu").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
            $("#header").css("box-shadow", "0px 0px 2.5em 0.5em rgba(0,0,0,0.4)");
        }
    }

Accordion collaspe mais pas vraiment [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager