Transition height CSS3 en JS

**pito2901** · 16/09/2013, 21h02

Bonjour à tous !
Je dispose de ce code suivant, et je n'arrive pas à appliquer le code js comme du css, je m'explique, en CSS la transtion du height se fait sur la div et son contenu, dans mon code JS, il n'y a que la div qui fait la transition et pas ce qu'il y a à l'intérieur.

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
<style>
#la_div{
  height:18px;
  width:900px;
  border:1px solid black;
  border-radius:5px;
  overflow:hidden;
}
#la_div h1{
  background:red;
  margin:0px;
  line-height:18px;
  font-size:16px;
}
#la_div iframe{
	position:absolute;
	z-index:5000;
}
#la_div img{
	position:absolute;
	z-index:6000;
}
</style>
</head>
 
<body>
<div id="la_div">
<h1>&nbsp;Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
<script>
var Div = document.getElementById('la_div');
var Video = document.getElementById('la_video');
var BTL = document.getElementById('bouton_lecture');
 
Div.style.cssText			=			'transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;';
Video.style.display			=			'none';
BTL.style.display			=			'none';
 
BTL.onclick = function(){
  BTL.flag = true;
};
Div.onmouseover = function(){
  this.style.height 		= 	'524px';
 
  Video.style.display 		= 	'';
 
  BTL.style.display 		= 	'';
  BTL.style.top				=	'50px';
  BTL.style.left			=	'50px';
  BTL.style.cursor			= 	'pointer';
};
Div.onmouseout = function(){
  if( !BTL.flag){
  this.style.height 		=	'18px';
  Video.style.display 		= 	'none';
  BTL.style.display 		= 	'none';
  }
};
</script>
</body>

Merci de votre aide

**SylvainPV** · 17/09/2013, 01h21

Voilà une version "allégée" et debuggée : http://jsfiddle.net/XBb7z/

Tout le code touchant à la propriété display ne sert à rien, puisque tu caches le contenu en tronquant la hauteur + la propriété overflow:hidden sur le div. C'est suffisant pour cacher le tout, mais à partir du moment où tu positionnes le contenu en position:absolute, les éléments sortent du flux et ne sont plus soumis aux règles d'overflow.

**pito2901** · 17/09/2013, 18h38

Merci ce code est-il applicable via ce sujet ?

**SylvainPV** · 17/09/2013, 23h04

Pourquoi avoir fait deux topics pour un seul problème ? J'en ai déjà bien assez fait en retravaillant ton code et en t'expliquant, à toi de te débrouiller pour le reste.

Transition height CSS3 en JS

JavaScript

Discussions similaires

Partager

Partager