Afficher / Cacher une Div contenant un slider [Fait]

**KrusK** · 06/07/2007, 11h00

Bonjour,

Dans ma page HTML, j'utilise un formulaire qui contient des sliders (http://webfx.eae.net/dhtml/slider/slider.html). Je créé ces sliders dynamiquement (Javascript / DOM) mais le code HTML généré est le suivant :

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
 
<div id="param_msg_pre1" class="cache">
          <div class="petit">Volume : </div>
          <input id="volume_msg_pre1" class="input_param" readonly="true"    name="volume_msg_pre1"/>
          <div id="div_volume_msg_pre1" class="horizontal dynamic-slider-control aligne_div">
                    <input id="input_volume_msg_pre1"/>
                    <div class="line" style="top: 7.5px; left: 15.5px; width: 117px;">
                    <div style="width: 115px;"/></div>
                    <div class="handle" style="left: 71.4px; top: 3px;">
                               <div/>
                    </div>
          </div>
</div>
<script type="text/javascript">
<!--
          var volmsg_pre1 = new Slider(document.getElementById('div_volume_msg_pre1'),            document.getElementById('input_volume_msg_pre1'));
          volmsg_pre1.onchange = function () {
                    document.getElementById('volume_msg_pre1').value = volmsg_pre1.getValue(); };
 
          volmsg_pre1.setValue(9);
          window.onresize = function () {
                   volmsg_pre1.recalculate(); };
 // -->
</script>

Je souhaite pouvoir cacher / afficher la div qui contient le slider (ici la div param_msg_pre1). Je change la classe de la div à chaque clic sur un lien (ceci fonctionne). Au depart la div est "cache", puis je peux la mettre "visible", et ainsi de suite.

Code :

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

1
2
3
4
5
6
7
8
9
10
.cache {
	overflow: hidden;
	height: 0px;
	clear: left;
}
 
.visible {
	overflow: visible;
	clear: left;
}

Cela marche sous Firefox, mais évidemment sous IE, le slider ne se cache pas

J'ai essayé avec les propriétés visibility: hidden et/ou display: none. Là le slider se cache bien dans tous les navigateurs, mais du coup j'ai un problème dans le réaffichage en utilisant visibility: visible et/ou display: block, mon slider ne s'affiche pas correctement (pareil pour tous les navigateurs).

Donc voilà j'ai essayé de bisouiller un peu dans tous les sens pour que ca fonctionne correctement dans tous les cas, sans succès

**Xann_71** · 10/07/2007, 11h11

salut!
Pour ton lien y'a un souci, on à pas accès à ta page.
Le slider je connais pas mais comme tu le décris j'ai 'impression que c'est ce que j'essai de faire aussi.
En fait j'ai des div:
_en tete
_menu
_contenu
Et je voudrais que, lorsque je click sur un lien du menu, seul le contenu soit modifier. j'ai l'impression que c'est un peu sa que tu fais non? Mais je n'y parviens pas donc si tu peu m'expliquer comment tu fais parce que je ne sais pas comment faire pour changer la class d'un div ?? Et après si j'arive à aller plus loin je te donne mon astuce. merci
A+

**Ermanpoe** · 10/07/2007, 15h53

salut,

Je viens d'essayer de résoudre ton problème, j'espère avoir bien compris ce que tu voulais. Quoiqu'il en soit voici le resultat de ma reflexion.

J'ai repris le tutoriel de webfx.

voici le code html :

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
 
<html>
<head>
	<title></title>
 
<script type="text/javascript" src="js/range.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link type="text/css" rel="StyleSheet" href="css/winclassic.css" />
 
</head>
<body>
<a href="#" onclick="javascript:document.getElementById('vis').className='aff';">afficher</a> / <a href="#" onclick="javascript:document.getElementById
 
('vis').className='cache';">cacher</a>
 
<div id="vis" class="cache">
   <div class="slider" id="slider-1" tabIndex="1">
      <input class="slider-input" id="slider-input-1" name="slider-input-1"/>
   </div>
</div>
 
<script type="text/javascript">
 
var s = new Slider(document.getElementById("slider-1"),
                   document.getElementById("slider-input-1"));
 
</script>
 
 
</body>
</html>

et voici ce que j'ai mis a la fin de la feuille css :

Code :

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

1
2
3
4
5
6
7
 
.aff {
	display:display;
}
.cache {
	display:none;
}

ca fonctionne sur firefox et sur ie6

A+

Afficher / Cacher une Div contenant un slider [Fait]

CSS

Discussions similaires

Partager

Partager