Faire apparaitre/disparaitre une div

**kevinf** · 29/05/2007, 22h39

Salut,

j'ai ce code pour faire apparaitre/disparraitre une div :

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
<script language="javascript">
function hideShow(id_div)
    {
    var img = "image";
    img += id_div ;
    if (document.getElementById(id_div).style.display=='block')
        {
        document.getElementById(id_div).style.display='none'
        document.getElementById(img).src='down.png'
        }
    else
        {
        document.getElementById(id_div).style.display='block'
        document.getElementById(img).src='up.png'
        }    
    }
</script>
 
<a href="#"><img src="down.png" name="image1" border="0" id="image1" onClick="hideShow(1)"></a>
<div id="1" style="display:none ">
contenu
</div>

Ce code faire donc apparaitre/disparraitre "tout d'un coup", comment faire pour que ca fasse comme en cliquand sur le croix à côté de la publicité a droite là : http://www.dailymotion.com/fr/cluste...coup-de-mother

Merci de votre aide

**muad'dib** · 29/05/2007, 23h49

Je n'ai aucune pub à droite.

**cerede2000** · 30/05/2007, 00h03

Moi non plus, enfin j'ai AdBlock aussi :S

**Shinuza** · 30/05/2007, 01h45

Pour redéfinir le style par défaut d'un élément via l'object style, on utilise

Code :

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

element.style.my_property = '';

De plus ton getter (la valeur retournée par element.style.my_property) par défaut est vide

Donc ta fonction ne marchera jamais

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function $(el) {
	return document.getElementById(el);
}
 
function toggle(id_div) {
		var img = $("image"+id_div),
			div = $(id_div),
			hide = function() {;div.style.display='none';img.src='down.png'},
			show = function() {div.style.display='';img.src='up.png'};
			(div.style.display == '') ? hide() : show(); 
}
</script>

Accesoirement, le mieux est de passer par des classes pour cacher et afficher tes éléments, en ajoutant une classe qui applique le display:none

**kevinf** · 30/05/2007, 08h29

Le code que je vous ai donné marche très bien. Je voulais juste que la disparition se fasse progressive comme l'apparition.

**SpaceFrog** · 30/05/2007, 08h45

marche pas chez moi ...

mais bon je suppose qu'il doit s'agir d'un setInterval qui modifie l'opacité ...
une petite recherche sur le forum te donnera les code crossbrowser pour l'opacité (parceque là il à pas l'air crossbrowser) j'en ai parlé il n'y a pas très longtemps ...

**Shinuza** · 30/05/2007, 08h55

Envoyé par kevinf

Le code que je vous ai donné marche très bien. Je voulais juste que la disparition se fasse progressive comme l'apparition.

Marche pas leur truc

Essaye bytefx avec cette fonction :

Code :

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

1
2
3
4
5
6
7
	function toggle(id_div) {
			var img = $("image"+id_div),
				div = $(id_div),
				hide = function() {bytefx.fade(div , 100, 0, 2, function(){this.style.display='none'});img.src='down.png'},
				show = function() {div.style.display='';bytefx.fade(div , 0, 100, 2, function(){});img.src='up.png'};
				(div.style.display == '') ? hide() : show(); 
}

Ca devrait marcher
Edit : La version "packer"

Envoyé par SpaceFrog

marche pas chez moi ...

mais bon je suppose qu'il doit s'agir d'un setInterval qui modifie l'opacité ...
une petite recherche sur le forum te donnera les code crossbrowser pour l'opacité (parceque là il à pas l'air crossbrowser) j'en ai parlé il n'y a pas très longtemps ...

Non, setInterval est beaucoup trop lent pour ce genre d'effet.

**kevinf** · 30/05/2007, 09h02

En fait, c'est pas un effect d'opacité que je veux. Le site à changer son effect entre temps (grrr).
C'était en fait comme si le site remontait par dessus la pub lentement, et bien moi je voudrais faire parreil dans les 2 sens.

**SpaceFrog** · 30/05/2007, 09h05

absolument pas ! j'ai déja fait des effets de fade avec setInterval !

et au passage

Code :

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

element.bytefx.fade = setInterval(function(){

tiré du code de bytefx

la librairie utilise un setInterval ...

Donc tu peux downloader un librairie complète pour n'utiliser que le fade ...
ou faire ton fade toi même avec un setInterval ...

**Shinuza** · 30/05/2007, 09h10

Envoyé par kevinf

En fait, c'est pas un effect d'opacité que je veux. Le site à changer son effect entre temps (grrr).
C'était en fait comme si le site remontait par dessus la pub lentement, et bien moi je voudrais faire parreil dans les 2 sens.

Code :

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

1
2
3
4
5
6
7
	function toggle(id_div) {
			var img = $("image"+id_div),
				div = $(id_div),
				hide = function() {bytefx.size(div,{width:200,height:0},20,function(){this.style.display='none'});img.src='down.png'},
				show = function() {div.style.display='';bytefx.size(div,{width:200,height:200},20,function(){});img.src='up.png'};
				(div.style.display == '') ? hide() : show(); 
	}

Lis l'api, c'est une des meilleures, si ce n'est la meilleur lib pour les effets graphiques.

@SpaceFrog : Mes essais avec SetInterval on toujours été plus lent qu'avec setTimeout. Autrement, vu la taille de la lib (3 ko) et sont efficacité/simplicité de syntaxe pourquoi réinventer la roue?

**SpaceFrog** · 30/05/2007, 09h14

je ne parle par de réinventer la roue ... tout ce que je dis c'est que ça utilise setInterval !

et niveau lib je préfère prototype window beintot la doc en français sera disponible... tous les effets de scriptaculous son accessibles depuis le prototype window...

**Shinuza** · 30/05/2007, 09h15

Envoyé par SpaceFrog

Donc tu peux downloader un librairie complète pour n'utiliser que le fade ...
ou faire ton fade toi même avec un setInterval ...

J'ai du mal comprendre

Prototype window c'est aussi beaucoup plus lourd, dois-je rappeler que byte fx fais 3 ko.
De plus se baser c'est la doc en Français pour developper c'est un sacré problème, la majorité du temps c'est mal traduit, et il vaudra mieux toujours connaitre l'anglais pour s'en sortir en programmation

**kevinf** · 30/05/2007, 09h20

Je croit que je délester, car je ne trouve pas ce que je veux.

**SpaceFrog** · 30/05/2007, 09h22

le prototype window ne fait pas que l'effet fade... il est plus à la base pour gérer les popups et alert (fausses popup).

**Shinuza** · 30/05/2007, 09h33

Je le sais pertinement, par contre le fait qu'il s'appuie sur prototype full est déja à mon sens un argument pour que j'évite de l'utiliser en prod extérieure

**SpaceFrog** · 30/05/2007, 09h39

sinon pour l'effet monter descendre ou droit gauche j'ai également collé une paire de scripts sur le forum et dasn les contributions ...

un truc comme ça ?

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
92
93
94
95
96
97
98
99
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
 
var y = 1;
var step = 20;
var down = true;
var minstep=step;
var running=false;
var t
 
 
function smooth_on_off(p_id, hmax){
  running=true;
  obj=document.getElementById(p_id);
 
  if(y>hmax&&down){step=-step;
                down=false;
                running=false;
                clearInterval(t);
                return false;}
  if(y<minstep&&!down){step=-step;
                down=true;
                running=false;
                y=1;
                clearInterval(t);
                return false;}
 
  y = y+step;
 
  obj.style.height = y + 'px';
}
 
function deroule(p_id,hmax){
if (running) {return false;}
t=setInterval(function(){smooth_on_off(p_id,hmax)},1)
 
}
</script>
<style type='text/css'>
div.main{
  width: 700px;
 
  background: #CCEEDD;
  font-weight: bold;
}
 
div.title{
  width: 700px;
  height: 30px;
  background: navy;
  color:white;
  font-weight: bold;
  font-size:14px;
  line-height:30px;
  cursor: pointer;
  padding-left:10px;
}
 
div.content{
  width: 700px;
  height: 1px;
  background: #FFEEFF;
  display: block;
  overflow: hidden;
  font-weight: normal;
  position:absolute;
  z-index:2;
  padding:10px;
  text-align:justify;
}
body {font-family:verdana;}
</style>
</head>
 
<body onload="document.body.focus()">
 
<div class="main">
 
  <div class="title" onclick="deroule('flop', 200);" >
	Un petit texte
  </div>
 
  <div id="flop" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla placerat. Maecenas cursus, enim at laoreet laoreet, lacus quam placerat quam, nec blandit urna arcu quis turpis. Nunc sit amet orci. Aliquam id mi. Maecenas massa leo, interdum faucibus, aliquam nec, lacinia et, diam. Phasellus mollis fermentum enim. Aenean ut enim et est vulputate bibendum. Integer tellus nisi, nonummy et, feugiat at, molestie non, leo. Praesent eu sem. Quisque tincidunt tellus quis libero. Maecenas justo. Nulla gravida, turpis eget facilisis tempor, ipsum metus sollicitudin urna, eget elementum eros diam ut dui. Sed luctus diam quis velit. Vestibulum fringilla lacus sed nisl. Pellentesque hendrerit placerat nisl. Cras vitae risus. Duis pulvinar, orci nec ultricies laoreet, magna est dictum nunc, quis pulvinar est leo quis ipsum. Ut mauris mauris, bibendum eu, consequat et, luctus non, massa. Phasellus felis. Quisque felis.
 
Suspendisse orci nisi, rutrum eu, vestibulum non, aliquet a, est. Vivamus elit. Vestibulum ultricies urna in odio. Duis laoreet. Proin porttitor purus et dolor. Suspendisse sed tellus quis nulla pulvinar vehicula. Praesent tincidunt nisi ut augue. Aliquam semper risus id risus. Pellentesque elementum feugiat nisl. In hac habitasse platea dictumst. Vivamus mattis. Donec sodales orci. Donec ut velit. Phasellus aliquet, felis non ultricies accumsan, lacus eros iaculis dui, ac fringilla sem dolor vitae nisi. Ut eu arcu. Proin tellus.
 
  </div>
 
</div>
 
 
 
</body>

**kevinf** · 30/05/2007, 09h44

Oui, c'est exactement cela, mais pour que ca marche avec mon script.

**kevinf** · 30/05/2007, 15h07

Pourrait tu m'aider à l'adapter à mon script, car le tien marche avec du texte et moi avec des images donc je vois pas comment faire.

Merci de ton aide

**SpaceFrog** · 30/05/2007, 15h11

mets l'image dans le div ????

**kevinf** · 30/05/2007, 15h29

Certes, mais l'image ne change pas entre "down" et "up"

Faire apparaitre/disparaitre une div

JavaScript

Discussions similaires

Partager

Partager