les div cachés (display='none') et CSS + JS

Bonjour tout le monde
Sur une page de mon site j'ai des onglets :
Onglet 1,
Onglet 2,
Onglet 3.

Chaque onglet contient un certain nombre d'informations qui 'explose' la page, c'est pourquoi j'ai mis des scrollbar dans chaque onglet pour bien maîtriser la page. J'ai modifié les couleurs de ces scrollbars moyennant le CSS et JS.

Mon problème c'est que
1. l'onglet qui s'affiche premier (lors de chargement de la page porte bien les caractéristiques que j'ai donné sur le CSS et le JS). mais,
2. l'onglet n°2 ou n° 3 (dont display='non') quand t-ils sont affichés (display='block') ne portent pas les caractéristiques que prend le premier.

Il me ressemble que du faite qu'ils sont cachés ils ne chargent pas ce qu'il faut du code CSS et JS.

Je prie vos idées :mouarf:

Bonjour,

merci de poster votre code pour éclaircir votre problème....

Salut

Je vous remercie 10000 fois. Je partage avec vous mon code.

Le code de ma page dessous (offres_demandes.php). Cette page porte deux onglet
1. le premier de "Offres"
2. le 2eme de "Demandes"
le basculement entre onglet est assuré par le javascript (qui met une fois l'un en display='none' et l'autre en display='block')

Code:

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
 
<link rel="stylesheet" href="css_files/scroll_hanid.css" type="text/css" />
<script src="css_files/scroll_hanid.js"></script>
<script type="text/javascript">
  function change_onglet(name)
     {
        document.getElementById('contenu_onglet_Offres').style.display = 'none';
        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
        document.getElementById('contenu_onglet_'+name).style.display = 'block';
        anc_onglet = name ;
     }
</script>
</head>
<body>
<div align="center">
<!-- ====================  Début Tableau de commandes  ======================  --> 
<!-- ====================  Début Tableau de commandes  ======================  --> 
        </br></br>
            <table align="center">
                <tr>
                     <td class="titres_liens" >
                        <a class="souris_liens" id="onglet_Offres" onclick="javascript:change_onglet('Offres');" href="#">Offres</a>
                     </td>       
                     <td width="30px">&nbsp;
                     </td>
                     <td class="titres_liens" >
                     <a id="onglet_Demandes" onclick="javascript:change_onglet('Demandes');" href="#"> Demandes </a>
                     </td>        
                </tr>
            </table>
        </br></br>
<!-- ====================  Fin Tableau de commandes  ======================  --> 
<!-- ====================  Fin Tableau de commandes  ======================  --> 
<!-- ====================  Début Demandes Partie 2  ======================  --> 
<!-- ====================  Début Demandes Partie 2  ======================  --> 
<div  id="contenu_onglet_Demandes" style=" border-left:5px solid #666; border-right:5px solid #666; width:700px">
	<div style="margin-left:10px; background:#39F"> <b> LES DEMANDES <b> </div>
    <div  id="cadre_scroll"  style="overflow:auto; height:500px;">
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    Demande n° xy
    </br></br></br></br>
    </div>
</div>
<!-- ====================  Fin Demandes Partie 2  ======================  --> 
<!-- ====================  Fin Demandes Partie 2  ======================  --> 
<!-- ====================  Début Offres Partie 2  ======================  --> 
<!-- ====================  Début Offres Partie 2  ======================  --> 
<div id="contenu_onglet_Offres" style=" border-left:5px solid #666; border-right:5px solid #666; width:700px">
	<div style="margin-left:10px; background:#39F"> <b> LES OFFRES <b> </div>
    <div  id="cadre_scroll" style="overflow:auto; height:500px;">
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
        Offre n° abc
        </br></br></br></br>
    </div> 
</div>  
<!-- ====================  Fin Offres Partie 2  ======================  --> 
<!-- ====================  Fin Offres Partie 2  ======================  --> 
 
<script type="text/javascript">
        //<!--
                var anc_onglet = 'Demandes';
                change_onglet(anc_onglet);
        //-->
</script>
</div>
</body>
</html>

Cette page nécessite comme vous pouvez constater un css "scroll_hanid.css" qui est sur le dossier "css_files"

<link rel="stylesheet" href="css_files/scroll_hanid.css" type="text/css" />

le code de css est comme suit (portant le nom scroll_hanid.css) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#cadre_scroll {
	-moz-border-radius:3px;
    -webkit-border-radius:3px;
position:relative;
width:680px;
}
.ssb_sb {
background:#930;
cursor:pointer;
position:absolute;
right:0;
}
.ssb_st {
background:#FFD2A6;
cursor:pointer;
height:100%;
position:absolute;
right:0;
top:0;
}

Un autre fichier js est nécessaire portant le nom "scroll_hanid.js" placé dans le dossier css_files comme indiqué ici :
<script src="css_files/scroll_hanid.js"></script>

le code de scroll_hanid.js :

Code:

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
var ssb = {
    aConts  : [],
    mouseY : 0,
    N  : 0,
    asd : 0, /*active scrollbar element*/
    sc : 0,
    sp : 0,
    to : 0,
 
    // constructor
    scrollbar : function (cont_id) {
        var cont = document.getElementById(cont_id);
 
        // perform initialization
        if (! ssb.init()) return false;
 
        var cont_clone = cont.cloneNode(false);
        cont_clone.style.overflow = "hidden";
        cont.parentNode.appendChild(cont_clone);
        cont_clone.appendChild(cont);
        cont.style.position = 'absolute';
        cont.style.left = cont.style.top = '0px';
        cont.style.width = cont.style.height = '100%';
 
        // adding new container into array
        ssb.aConts[ssb.N++] = cont;
 
        cont.sg = false;
 
        //creating scrollbar child elements
        cont.st = this.create_div('ssb_st', cont, cont_clone);
        cont.sb = this.create_div('ssb_sb', cont, cont_clone);
        cont.su = this.create_div('ssb_up', cont, cont_clone);
        cont.sd = this.create_div('ssb_down', cont, cont_clone);
 
        // on mouse down processing
        cont.sb.onmousedown = function (e) {
            if (! this.cont.sg) {
                if (! e) e = window.event;
 
                ssb.asd = this.cont;
                this.cont.yZ = e.screenY;
                this.cont.sZ = cont.scrollTop;
                this.cont.sg = true;
 
                // new class name
                this.className = 'ssb_sb ssb_sb_down';
            }
            return false;
        }
        // on mouse down on free track area - move our scroll element too
        cont.st.onmousedown = function (e) {
            if (! e) e = window.event;
            ssb.asd = this.cont;
 
            ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            for (var o = this.cont, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;
            this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio;
            this.cont.sb.onmousedown(e);
        }
 
        // onmousedown events
        cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; }
        cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this,  1); return false; }
 
        //onmouseout events
        cont.su.onmouseout = cont.su.onmouseup = ssb.clear;
        cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear;
 
        // on mouse over - apply custom class name: ssb_sb_over
        cont.sb.onmouseover = function (e) {
            if (! this.cont.sg) this.className = 'ssb_sb ssb_sb_over';
            return false;
        }
 
        // on mouse out - revert back our usual class name 'ssb_sb'
        cont.sb.onmouseout  = function (e) {
            if (! this.cont.sg) this.className = 'ssb_sb';
            return false;
        }
 
        // onscroll - change positions of scroll element
        cont.ssb_onscroll = function () {
            this.ratio = (this.offsetHeight - 2 * this.sw) / this.scrollHeight;
            this.sb.style.top = Math.floor(this.sw + this.scrollTop * this.ratio) + 'px';
        }
 
        // scrollbar width
        cont.sw = 20;
 
        // start scrolling
        cont.ssb_onscroll();
        ssb.refresh();
 
        // binding own onscroll event
        cont.onscroll = cont.ssb_onscroll;
        return cont;
    },
 
    // initialization
    init : function () {
        if (window.oper || (! window.addEventListener && ! window.attachEvent)) { return false; }
 
        // temp inner function for event registration
        function addEvent (o, e, f) {
            if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; }
            if (window.attachEvent) return o.attachEvent('on' + e, f);
            return false;
        }
 
        // binding events
        addEvent(window.document, 'mousemove', ssb.onmousemove);
        addEvent(window.document, 'mouseup', ssb.onmouseup);
        addEvent(window, 'resize', ssb.refresh);
        return true;
    },
 
    // create and append div finc
    create_div : function(c, cont, cont_clone) {
        var o = document.createElement('div');
        o.cont = cont;
        o.className = c;
        cont_clone.appendChild(o);
        return o;
    },
    // do clear of controls
    clear : function () {
        clearTimeout(ssb.to);
        ssb.sc = 0;
        return false;
    },
    // refresh scrollbar
    refresh : function () {
        for (var i = 0, N = ssb.N; i < N; i++) {
            var o = ssb.aConts[i];
            o.ssb_onscroll();
            o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px';
            o.sb.style.height = Math.ceil(Math.max(o.sw * .5, o.ratio * o.offsetHeight) + 1) + 'px';
        }
    },
    // arrow scrolling
    arrow_scroll : function () {
        if (ssb.sc != 0) {
            ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio;
            ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp);
            ssb.sp = 32;
        }
    },
 
    /* event binded functions : */
    // scroll on mouse down
    mousedown : function (o, s) {
        if (ssb.sc == 0) {
            // new class name
            o.cont.sb.className = 'ssb_sb ssb_sb_down';
            ssb.asd = o.cont;
            ssb.sc = s;
            ssb.sp = 400;
            ssb.arrow_scroll();
        }
    },
    // on mouseMove binded event
    onmousemove : function(e) {
        if (! e) e = window.event;
        // get vertical mouse position
        ssb.mouseY = e.screenY;
        if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio;
    },
    // on mouseUp binded event
    onmouseup : function (e) {
        if (! e) e = window.event;
        var tg = (e.target) ? e.target : e.srcElement;
        if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture();
 
        // new class name
        if (ssb.asd) ssb.asd.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'ssb_sb ssb_sb_over' : 'ssb_sb';
        document.onselectstart = '';
        ssb.clear();
        ssb.asd.sg = false;
    }
}
 
window.onload = function() {
    ssb.scrollbar('cadre_scroll'); // scrollbar initialization
}

Maintenant la question:

Quand je charge la page, la partie "Demande" fonctionne bien et le scrollbar s'affiche comme configuré. Mais quand je passe à l'onglet "Offre", le scrollbar ne prend pas les caractéristiques fixés dans le fichier CSS.

Mercie d'avance :oops:

Bonjour

il y a 2 #cadre_scroll différents, ce qui n'est pas logique pour un id :(
Donc, pour le css, faire une class .cadre_scroll

------------------
Mais surtout
scroll_hand.js utilise l'id "cadre_scroll" dans window.onload(). Mais comme il y en a deux, le code js est appliqué uniquement au premier #cadre_scroll :aie:
Code:

1 2 <div id="cadre_scroll1" class="cadre_scroll"> <div id="cadre_scroll2" class="cadre_scroll">
Code:

1 2 3 4 window.onload = function() { ssb.scrollbar('cadre_scroll1'); // scrollbar initialization ssb.scrollbar('cadre_scroll2'); // scrollbar initialization }

2 pièce(s) jointe(s)

Merci beaucoup,

Effectivement, il y a un problème au niveau de "id", pour ca j'ai fais une class "cadre_scroll"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .cadre_scroll { -moz-border-radius:3px; -webkit-border-radius:3px; position:relative; width:680px; } .ssb_sb { background:#930; cursor:pointer; position:absolute; right:0; } .ssb_st { background:#FFD2A6; cursor:pointer; height:100%; position:absolute; right:0; top:0; }
et sur le JS (scroll_hanid.js) j'ai fais comme ca
Code:

1 2 3 4 5 window.onload = function() { ssb.scrollbar('cadre_scroll_1'); // scrollbar initialization ssb.scrollbar('cadre_scroll_2'); // scrollbar initialization }
ça avance et montre la barre de défilement sur le deuxième onglet maaiiiiis ne nous permet pas ce défilement du contenu de cet onglet.

Les images des deux onglets sont joints.

Merci en core une fois chers développeurs

Oui :( il y a un probleme js
on initialise 2 fois le meme objet ssb...
peut être en dupliquant cette bibliothèque scroll_hand.js
avec un objet ssa dans une et ssb dans l'autre...
ou alors il faut tout réécrite ta bibliotheque !
Code:

1 2 3 4 5 window.onload = function() { ssa.scrollbar('cadre_scroll_1'); // scrollbar initialization scroll_hand_a.js ssb.scrollbar('cadre_scroll_2'); // scrollbar initialization scroll_hand_b.js }

1 pièce(s) jointe(s)

Oui, j ai y pensé avant. je l'ai fais sans résultats

Je partage avec l'ensemble mes fichiers .php et ceux de .css et .js :roll:

J'ai même séparé entre les fichiers css et js en écrivant pour chaque 'id" son correspondant mais sans résultats aussi :aie: