un div qui s'ajuste un l'object qu'il contient

Version imprimable

bonjour @ tous !

voici le contexte
une page "mere" :
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 <html> <head> <meta name="keywords" lang="fr" > <meta name="Description" > <title>Bf2 brothers :: ::</title> <style type="text/css"> #player{ position:absolute; margin-top: 0px; margin-left: -22px; } .msgbox2{ width:auto; height:auto; } </style> </head> <body bottommargin="0" leftmargin="0" marginheight="0" topmargin="0" scroll="no"> <div align="center" class="msgbox2" id="player" style="visibility:hidden;" > <object type="application/x-shockwave-flash" data="mp3player.swf?playlist=playlist.php" class="msgbox2"> <param name="movie" value="mp3player.swf?playlist=playlist.php" /> <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> <param name="wmode" value="transparent" /> <param name="menu" value="false" /> <param name="quality" value="best" /> </object> </div> <IFRAME marginheight="0" marginwidth="0" frameborder="0" SRC="index.php" NAME="ZONE2" HEIGHT="100%" width="100%"> Désolé mais votre navigateur ne supporte pas les cadres locaux. </IFRAME> </body> </html>
la page qui s'affiche dans l'iframe et la page principle du site! celle-ci contient de nombreux lien !
Dont un qui permet d'afficher le contenu du div de la page "mere" !
cependant ce div contient un lecteur flash dont la taille varie si on affiche ou pas a playlist par exemple !

Je cherche donc a avoir un div qui s'ajuste autoamtiquement a la taille de mon player ! Le player fera toujours 275 pixels de large mais ca hauteur elle varie enormement !

J'espere que c'est pas trop confu !!!

Je te propose une autre approche ...
voici un petit bout de code à adapter ...

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bannière bas </title>
<script type="text/javascript">
var pos=-90
function launch(){
var banniere=document.getElementById('mp3player')
var moveup=setInterval(function(){   
                              if(pos==0){clearInterval(moveup)}
                              else{banniere.style.left=pos;
                                   pos++;}
                               },10)   
 
setTimeout(function(){
var movedown=setInterval(function(){   
                              if(pos==-90){clearInterval(movedown)}
                              else{banniere.style.left=pos;
                                   pos--;}
                               },10)   
},5000)
 
}
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;">
<input type="button" onclick="launch()" value="go" />
<div id="mp3player" style="position:absolute; left:-90px; top:50px; width:100px;background-color:red;color:white; font-size:30px;text-align:center;height:100px;">lecteur MP3</div>
</body>
</html>

31/10/2006, 17h04
SpaceFrog

pour la mise à la taille ...
recupère le scrollHeight du div et applique le au height du div ...
31/10/2006, 17h06
SpaceFrog

PS tu peux bien entendu declencher l'apparition et la disparition du div sur le onclick du div ... et arreter le timer si tu cliques sur le div ...et le remettre en route sur le onmouseout ....

bon alors voila ou j'en suis actuellement :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bannière bas </title>
<script type="text/javascript">
var pos=-275
function launch(){
var banniere=document.getElementById('mp3player')
var moveup=setInterval(function(){   
                              if(pos==0){clearInterval(moveup)}
                              else{banniere.style.left=pos;
                                   pos++;}
                               },10)   
 
setTimeout(function(){
var movedown=setInterval(function(){   
                              if(pos==-275){clearInterval(movedown)}
                              else{banniere.style.left=pos;
                                   pos--;}
                               },10)   
},5000)
 
}
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;">
<input type="button" onclick="launch()" value="go" />
<div id="mp3player" style="position:absolute; left:-275px; top:50px; width:275px;height:275px;">
 
 <object type="application/x-shockwave-flash" data="lecteur/mp3player.swf?playlist=lecteur/playlist.php"  id="player" style="height:100%; width:100%;">
    <param name="movie" value="lecteur/mp3player.swf?playlist=lecteur/playlist.php" />
    <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
    <param name="wmode" value="transparent" />
    <param name="menu" value="false" />
    <param name="quality" value="best" />
  </object>
 
 
</div>
<p><a href="/RIEN%20A%20VOIR/BFB/lecteur%20bfb/lecteur/BFB.jpg">qdfbvg</a></p>
<p><a href="/RIEN%20A%20VOIR/BFB/lecteur%20bfb/lecteur/BFB2.jpg">sdv</a></p>
</body>
</html>

j'ai ajouter 2 liens pour voir si je pe les atteindre une fois une partie du lecteur retracté !
Et là c'est la deception car sous IE je peux acceder au lien qui se trouve derriere le div mais pas sous firefox 2 :(

La soluton a mon probleme est donc de reduire mon div en meme temps que le lecteur !
Bon ca je sais pas comment faire pour le moment donc si vous avez un ch'tite idée n'hesitez pas ;)

01/11/2006, 15h22
Auteur

bonjour,

je dois avouer que je ne comprends pas très bien ce que tu cherches à faire :koi:. Normalement, les dimensions du div s'adapte au contenu. Donc si le player s'agrandit le div fera de même.

Avant tous je remercie Spacefrog (encore une fois) et AUTEUR pour l'aide qu'ils m'ont apportés !

j'ai compris pas mal de truc !

Mais j'ai encore besoin de vous (ho le boulet :oops: )

voci mon script commenté vous comprendrez mieux
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <title>Document sans titre</title> <script type="text/javascript"> function showLink() { top.document.getElementById('player').style.visibility= top.document.getElementById('player').style.visibility=='visible'?'hidden':'visible'} </script> </head> <body bgcolor="#000000" >  <font color="#FF0000"><a href="lecteur/player2.php" target="ZONE1" onclick="showLink()">LIEN 1</a></font>  <font color="#FF0000"><a href="#" onclick="showLink()">LIEN 2</a></font> </body> </html>
Donc pour resumer lorsque l'on accede a cette page je voudrais que dans un premier temps seul le "LIEN1" apparaisse !
Puis une fois que le visiteur a cliqué dessus, bien entendu cela execute le lien et le JS qui va avec mais que en plus le LIEN 1 disparraisse pour laisser la place au LIEN 2 qui lui ne bougera plus !

Je sais le faire en php mais dans mon cas c'est impossible puisque cela necessite de recharger la page et ce n'est pas possible dans ce cas donc seul du javascript peux me sauver ;)

A votre bon coeur messieurs dames (mais qu'est-ce que je raconte moi 8O )

edit : j'ai bien une idée en utilisant des div hidden mais l'equivalent d'un echo en JS me semble plus aproprié! mais est-ce possible ???? et comment ?

Comme ceci ?

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
 
<html>
<head>
<title>Document sans titre</title>
<style type="text/css">
<!--
#lien1
{
   display: block;
}
#lien2
{
   display: none;
}
//-->
</style>
 
<script type="text/javascript">
 
function showLink()
{
  var lien1= top.document.getElementById('lien1');
  var lien2= top.document.getElementById('lien2');
  lien2.style.display="block";
  lien1.style.display="none";
}
</script>
</head>
 
<body>
<!--Ce lien doit aparaitre en premier et seul ! une fois qu on cliquer dessus il s execute puis disparait pour laisser la place au 2eme lien "lien2"-->
<a id="lien1" href="lecteur/player2.php" target="ZONE1" onclick="showLink()">LIEN 1</a>
 
<!--Ce lien doit apparaitre a la place du premier une fois qu on à cliquer sur le premier et ne bougera plus !!!!-->
<a id="lien2" href="#" onclick="showLink()">LIEN 2</a>
 
</body>
</html>

Deja merci auteur pour ta reponse ;)

Mais c'est pas tout a fait ca que je voulais !

Je test en essayant de modifier a ma convenance et je te tiens informer ;)

EDIT ------------------------------------------------------------------

voila ce que je cherchais exactement

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
<style type="text/css">
<!--
#lien1
{
   display: block;
}
#lien2
{
   display: none;
}
//-->
</style>
 
<script type="text/javascript">
 
function showLink()
{
parent.document.getElementById('player').style.visibility=
parent.document.getElementById('player').style.visibility=='visible'?'hidden':'visible'
 
  var lien1= document.getElementById('lien1');
  var lien2= document.getElementById('lien2');
  lien2.style.display="block";
  lien1.style.display="none";
}
</script>
<!--Ce lien doit aparaitre en premier et seul ! une fois qu on cliquer dessus il s execute puis disparait pour laisser la place au 2eme lien "lien2"-->
<a id="lien1" href="playertx.php" target="ZONE1" onclick="showLink()">LIEN 1</a> 
<!--Ce lien doit apparaitre a la place du premier une fois qu on à cliquer sur le premier et ne bougera plus !!!!-->
<a id="lien2" onclick="showLink()">LIEN 2</a>

03/11/2006, 23h14
Auteur

pourquoi as-tu écrit

Code:

<a id="lien2" onclick="showLink()">LIEN 2</a>

:question: puisque lien 2 apparaît lors du clic sur lien 1. L'appel de showLink() est inutile.

Citation:

Envoyé par Auteur

pourquoi as-tu écrit

Code:

<a id="lien2" onclick="showLink()">LIEN 2</a>

:question: puisque lien 2 apparaît lors du clic sur lien 1. L'appel de showLink() est inutile.

Mais non :)

regarde :
Code:

1 2 3 4 5 6 7 8 9 10 11 function showLink() { parent.document.getElementById('player').style.visibility= parent.document.getElementById('player').style.visibility=='visible'?'hidden':'visible' var lien1= document.getElementById('lien1'); var lien2= document.getElementById('lien2'); lien2.style.display="block"; lien1.style.display="none"; }
Le lien 2 me permet d'afficher le div "player" sans renvoyé un lien a l'iframe qu'il contient !

LE lien1 fait s'afficher un div qui contient une iframe en evoyant la page a affiché dans l'ifram !
Le lien 2 gere l'affichage/masquage du meme div sans renvoyer la cble de l'ifram !
En faite je gere 2 div avec le lien 1 et une seul avec le lien 2 !

J'crois que je suis pas tres clair maisj'arrive pas a faire mieux

07/11/2006, 15h46
Auteur

:resolu: alors ?