Discussion :

[yjuliet]

Salut.

J'utilise des images PNG transparentes. Ok, je sais, sous IE6, ça va foirer ...mais c'est réglé.
Mon problème est que ces images doivent occuper 100% de la largeur de leur conteneur dont la taille peut changer, suite à des ajouts/suppressions de noeuds (gestion d'onglets dynamiques).
Dans IE6, si je modifie une propriété en lui affectant une valeur identique à la valeur actuelle, le noeud n'est pas modifié et donc pas ré-affiché, sans doute pour des questions d'optimisation de l'affichage. Je veux bien comprendre cette problématique, mais lorsque je fais une mise à jour de mon affichage en ajoutant une case à une ligne d'un tableau, les images contenues dans les cases précédentes prennent leur taille par défaut et seul le conteneur HTML conserve la taille assignée.
Je suis donc obligé à chaque fois que je modifie ma page de faire une première passe de modification de monImage.style.width, puis de lui assigner à nouveau la taille de 100%.
Seulement, il semblerait qu'il ne tienne pas compte du premier redimensionnement si je ne lui fais pas effectuer une "pause" entre les 2, cette pause prenant actuellement la forme d'un "alert(...)". J'ai essayé avec un timeout, ça n'a servi à rien, car même un timeout de 30 secondes ne fait rien, tandis qu'un alert() affiché 1 seconde voire moins fonctionne à merveille.
Voici donc les 2 fonctions que j'utilise :

Code javascript :

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
 var ieDebugList;
function initIeDebugList() {
  var cpt = 0;
    try {
      listIeDebugPng = new Array(); 
      var pngs = document.getElementsByTagName("img");
      if (pngs) {
        for (var i = 0; i < pngs.length; ++i) {
          var arr_class = pngs[i].className.split(" ");
          for (var k=0; k<arr_class.length; k++ ) {
            if( arr_class[k] == "debug_png") {
 
              if (pngs[i].style.width=="100%") {
                // Utilisé pour les changements d'onglets AJAX
                pngs[i].style.width = "95%";
                ieDebugList[cpt++] = pngs[i];
              } else if (pngs[i].style.width=="95%") {
                // Utilisé pour les chargements initiaux.
                ieDebugList[cpt++] = pngs[i];
              }              
            }
          }
        }
      }
 
    } catch (e)  {
        alert("Un problème est survenu:\n " + e.name + "\n" + e.message + "\n" + e.stack );
    }
}
 
function ieDebugImages() {
  var i;
  try {
      for ( i=0 ; i<ieDebugList.length ; i++ ) {
        ieDebugList[i].style.width = "100%";
      }      
  } catch (e) {
    alert(i+" images corrigées!\nUne exception est survenue:\n  " + e.name + "\n" + e.message + "\n" + e.stack);
  }
}

Voici donc comment mes 2 fonctions sont appelées :

Code javascript :

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

1
2
3
4
5
 
// appel de
initIeDebugList();
alert("waiting for something ..."); // sans cette ligne, rien ne marche ...
ieDebugImages();

Si quelqu'un a une idée, ou un lien relatif à ce genre de problèmes, ... je prends.

[SpaceFrog]

c'est le problème de l'interprétation des pourcentages ...

a mon avis tu auras aussi vite fait de récupérer le offsetWidth du parentNode et de l'attribuer à l'image ... pareil pour le offsetHeight ?