Afficher un div dans un emplacement unique... [Résolu]

Signaler
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012
-
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
j'utilise cette fonction pour afficher un arrire plan en gris(ça semble come desactivé ce qui est en arriere de la couleur grise).

function AfficheCache(){
  var Obj;
  //-- on affiche le fond
  Obj = document.getElementById('D_A');
  if(Obj){
    with( Obj.style){
      position="absolute";
      display="inline";
      left = "135px";
      top  = "243px";
      zIndex= 11;
    }
  }
}


function MasquerCache(){
  var Obj;
  //-- on masque le fond
  Obj = document.getElementById('D_A');
  if(Obj)
   {
     with( Obj.style)
   {
         display="none";
      }
 }
}
ça marche tres bien, mais mon probleme c'est que il s'affiche pas dans l'emplacement que je veux,
Normalement je veux afficher "la transparence grise" seulement dans un autre div
(

).

Le div qui fait la couelure grise est :

.
Remarque :sur la resolution 1024/768 et avec left "135px"; top "243px"; , la transparence s'affiche dans l'emplecement que je veux.
Merci pout vos aides.

N'importe où. 
mais là où il le faut.

18 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
B
onjour...
...d'après ce que je viens de lire, il semblerait que le DIV id= "def" soit encapsuler.
Dans ce cas la recherche de sa position doit se faire en absolue comme suit, pour remonter au parent...

//----------------------------
function GetAbsolutePos( obj_){
  var PosX = 0;
  var PosY = 0;
  var Obj  = document.getElementById( obj_);
  do{
    PosX += Obj.offsetLeft;
    PosY += Obj.offsetTop;
    Obj = Obj.offsetParent;
  }while( Obj);
  return [PosX,PosY];
}

par exemple et l'appel dans la fonction AfficheCache devient...




//---------------------






function AfficheCache(){
  var O_Cache = document.getElementById('D_A');
  //-- on affiche le fond
  if( O_Cache){
    with( O_Cache.style){
      position="absolute";
      display="inline";
      left =
GetAbsolutePos('def')[0]
+"px";       
      top  =
GetAbsolutePos('def')[1]
+"px";
      zIndex= 11;
    }
  }
}












;0)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
B
onjour...
Il n'est pas judicieux de fixer la position left et top mais plutôt de récupérer la position du DIV devant être caché et d'ajuster la position du DIV cachant.

par exemple

//---------------------
function AfficheCache(){
  var O_Cache =

document.getElementById('D_A');





  var O_Srce  =



document.getElementById('def');







  //-- on affiche le fond


  if( O_Cache){
    with( O_Cache.style){
      position ="absolute";
      display= "inline";
      left = O_Srce.offsetLeft +"px"; // Recup PosX
      top  =



O_Srce.offsetTop  +



"px";





// Recup PosY







      zIndex= 11;
    }
  }
}






;0)
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
Bonjour,

pas tout compris....

° rien n'appelle AfficheCache()
° comment cliquer sur un élément invisible ( display:none ) ?
° à part cela, s'il faut afficher là où est le div "def"
    document.getElementById("D_A").style.top= document.getElementById("def").offsetTop;

   
document.getElementById("D_A")
.style.top =document.getElementById("def").offsetTop;




<hr />



Cordialement            Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
il fallait lire :


    document.getElementById("D_A").style.top= document.getElementById("def").offsetTop;

   
document.getElementById("D_A")
.style.left =document.getElementById("def").offsetLeft;





<hr />



Cordialement            Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

Merci mes amis de votre aide.

j'ai essayé la solution de PetolTeam mais ça marche pas,

l'appel de fonction je le fait avec :

j'ai plusieurs images qui s'affichent dans le div "def", je veux lorsque je clique sur une image, la transparence s'affiche sur les images (sur le div def).
j'arrive a afficherla transprence, mais pas dans le div, si je change le top et le left de afficheCache(); ça marche dans la reolution actuelle mais si je change la resolution, ça marche plus.
Merci.

N'importe où. 
mais là où il le faut.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
>>j'ai essayé la solution de PetolTeam mais ça marche pas,



curieux, pas de raison... et on aimerait voir ce que tu fais.

je réitère quand même mes questions !!!


                ° rien n'appelle AfficheCache()
                ° comment cliquer sur un élément invisible ( display:none ) ?




<hr />



Cordialement                        Bul                 [mon Site]         [M'écrire]



<hr />
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

il y a :
donc si on clique sur l image on appel la fontion !.
et l image est visible !.
Merci

N'importe où. 
mais là où il le faut.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
dur dur d'avoir les données pour tenter d'aider !
et la fonction AfficheCache() modifiée ? et les div en question sont "tel-quel" ? ...
<hr />


Cordialement                Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

<head>
function AfficheCache(){
  var Obj;
  //-- on affiche le fond
  Obj = document.getElementById('D_A');
  if(Obj){
    with( Obj.style){
      position="absolute";
      display="inline";
      left = "135px";
      top  = "243px";
      zIndex= 11;
    }
  }
}
function MasquerCache(){
  var Obj;
  //-- on masque le fond
  Obj = document.getElementById('D_A');
  if(Obj)
   {
     with( Obj.style)
   {
         display="none";
      }
 }
}

</head>

du html (le head ,d autres divs, ..)

Contient des images

</html>

N'importe où. 
mais là où il le faut.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
je ne demande pas ça pour emm%¤$£... le monde, ni voir
    ce que tu fais, mais la solution de PetOleTeam doit fonctionner,
    donc, tu dois avoir une erreur quelque part, et sans code...
    on ne peut pas dire !
   à propos,  IE : Activer le Debogage,
                    FF/K-Meleon,Opera... : regarder la "console d'Erreurs"
    dèjà ?
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
dans ce que tu donnes, le javascript n'est pas entre
<script type="text/javascript"> et </script> ????
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
et ce qu'a préconisé PetOleTeam ( offset... ) n'est pas fait ???
<hr />


Cordialement         Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

avec la solution de PetoleTeam, ça marche, mais elle m afffiche la transparence, en haut comme 0px,0px !

N'importe où. 
mais là où il le faut.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
ce que tu nous a donné, ne peut pas fonctionner,
tu dois mettre ce que tu utilises... sinon, on se mord la queue...
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]



<hr />
( souple le gars )
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

je fais ça :
<head>
<script type="text/javascript" language="JavaScript">
function AfficheCache(){
  var O_Cache = document.getElementById('D_A');
  var O_Srce  = document.getElementById('def');
  //-- on affiche le fond
  if( O_Cache){
    with( O_Cache.style){
      position="absolute";
      display="inline";
      //document.getElementById("D_A").style.top=document.getElementById
//("defilementAssoc").offsetTop;
   //document.getElementById("D_A").style.left=document.getElementById
//("defilementAssoc").offsetLeft;
      left = O_Srce.offsetLeft;  +"px";       
      top  = O_Srce.offsetTop ; + "px";
      zIndex= 11;
    }
  }
}

function MasquerCache(){
  var Obj;
  //-- on masque le fond
  Obj = document.getElementById('D_A');
  if(Obj)
   {
     with( Obj.style)
   {
         display="none";
      }
 }
}
</script>
</head>

affichage du l'entete de la page (baniere)
affichge du div qui contient le menu.
affichage du

affichage des autres divs ...
affichage de foot....

et tout en bas :
 

N'importe où. 
mais là où il le faut.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
29
et bien ... tout fonctionne ?

...
    with( O_Cache.style){
      position="absolute";
      display="inline";
      left = O_Srce.offsetLeft;  +"px";      
      top  = O_Srce.offsetTop ; + "px";



   //document.getElementById("D_A").style.top=document.getElementById("def").offsetTop;

   //document.getElementById("D_A").style.left=document.getElementById("def").offsetLeft;






affichage du
position:relative;left:100px">exemple pour def

affichage des autres divs ...
affichage de foot....

et tout en bas :
 
www:none;width:525px;height:190px;background-color:#555555;filter:alpha(opacity=40); -moz-opacity: .4;">
    exemple pou D_A





en "pink" ça marche aussi
en rouge pour voir ce qui se passe... y compris appel AfficheCache() qui n'existait pas




<hr />



Cordialement            Bul         [mon Site]     [M'écrire]



<hr />
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

ça marche tres bien,
Merci pour votre aide mes amis.
Un grand chapeau

N'importe où. 
mais là où il le faut.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
1000 excuses, j'ai répondu un peu vite tout à l'heure en repassant au bureau donc quelques explications...
Un DIV est par défaut en position relative, sauf indication contraire bien sur, par rapport à l'endroit ou il est déclaré.

Exemple

 

   
Le texte du DIV

 

  <script type="text/javascript">
    var Obj  = document.getElementById( 'DIV_1');
    alert( "PosX = " +Obj.offsetLeft);
    alert( "PosY = " +Obj.offsetTop);
  </script>






on obtient dans ce cas PosX 0 et PosY 0 ce qui est FAUX par rapport à la page...
la position dépendra donc de la largeur, hauteur de la page et de la position du parent ici DIV_0...

Si l'on utilise la fonction décrite ci dessus dans ce cas on obtient la position réelle par rapport aux bords de la page...








 

   
Le texte du DIV

 

  <script type="text/javascript">
    alert( "Ab_PosX = " +GetAbsolutePos('DIV_1')[0]);
    alert( "Ab_PosY = " +GetAbsolutePos('DIV_1')[1]);
  </script>



on obtient dans ce cas Ab_PosX 250 et Ab_PosY 15 par exemple ce qui est ce que l'on cherche...

PS :
  Voila une raison qu'elle est bonne de fournir le CONTEXTE pour pouvoir mieux cerner le problème..

Allez Bonne Prog...

RePS :
  Tiens voilà un début de TuTo...à vos crayons !!





;0)