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

**NoobX** · 31/10/2006, 17h00

bonjour @ tous !

voici le contexte
une page "mere" :

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
<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 !!!

**SpaceFrog** · 31/10/2006, 17h02

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

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>
<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>

**SpaceFrog** · 31/10/2006, 17h04

pour la mise à la taille ...
recupère le scrollHeight du div et applique le au height du div ...

**SpaceFrog** · 31/10/2006, 17h06

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 ....

**NoobX** · 31/10/2006, 17h45

bon alors voila ou j'en suis actuellement :

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
<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

**Auteur** · 01/11/2006, 15h22

bonjour,

je dois avouer que je ne comprends pas très bien ce que tu cherches à faire

. Normalement, les dimensions du div s'adapte au contenu. Donc si le player s'agrandit le div fera de même.

**NoobX** · 03/11/2006, 14h55

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

)

voci mon script commenté vous comprendrez mieux

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
<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" >
<!--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"-->
<font color="#FF0000"><a href="lecteur/player2.php" target="ZONE1" onclick="showLink()">LIEN 1</a></font>
 
<!--Ce lien doit apparaitre a la place du premier une fois qu on à cliquer sur le premier et ne bougera plus !!!!-->
<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

)

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 ?

**Auteur** · 03/11/2006, 15h37

Comme ceci ?

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
 
<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>

**NoobX** · 03/11/2006, 16h00

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 :

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
<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>

**Auteur** · 03/11/2006, 23h14

pourquoi as-tu écrit

Code html :

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

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

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

**NoobX** · 06/11/2006, 12h33

Envoyé par Auteur

pourquoi as-tu écrit

Code html :

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

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

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

Mais non

regarde :

Code :

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

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

**Auteur** · 07/11/2006, 15h46

alors ?

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

JavaScript

Discussions similaires

Partager

Partager