Souci d'affichage après visibilité d'un bloc

Version imprimable

Bonsoir,

Voici le code suivant, certes fonctionnel, qui me pose cependant un souci d'affichage sous Internet Explorer, alors qu'il s'affiche parfaitement sous Firefox :
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 <script language="javascript" type="text/javascript"> table_parties = new Array("partie_3", "partie_3-2", "partie_3-3", "partie_3-4"); function changevideo(parti) { for(x in table_parties) { if(parti==table_parties[x]) { document.getElementById(table_parties[x]).style.position='relative'; setTimeout('a=2;',1000); document.getElementById(table_parties[x]).style.visibility='visible'; } if(parti!=table_parties[x]) { document.getElementById(table_parties[x]).style.position='absolute'; document.getElementById(table_parties[x]).style.visibility='hidden'; } } } </script> <div align="center" id="partie_3" style="position:absolute;visibility:hidden;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="650" height="420" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="autoStart" value="0" /> <param name="movie" value="video.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="FLASHVARS" value="classe=2009-02-21&maxx=3" /> <embed src="video.swf" FLASHVARS = "classe=2009-02-21&maxx=3" quality="high" bgcolor="#ffffff" width="650" height="420" align="middle" allowScriptAccess="sameDomain" autoStart="0" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </div> <div align="center" id="partie_3-2" style="position:absolute;visibility:hidden;"> ... etc code dans le même style qu'au-dessus, il y a 4 videos l'une en-dessous de l'autre... </div>
Mon souci fait que, lorsque la video s'affiche lors de l'appel de la fonction JS, la video apparaît dans une frame, ok, mais en total décalé à l'écran. Pure souci d'affichage qui est réglé lorsque je touche à la barre séparant les deux frames, mais je vois mal un visiteur faire ce genre de chose ;) Ensuite la video apparaît bien au milieu de la frame.

Souci lié a priori au code pour rendre visible :

Code:

setTimeout('a=2;',1000);

J'ai essayé un setTimeout à 100, ou à 2000, le temps avant affichange change bien (logique) mais l'affichage de la video débloque toujours en décalé, donc bonjour l'esthétique...

J'avais déjà eu ce souci avec un bloc <div> sur un site, apparaîssant à peu près sur le même principe (un formulaire avec des cases à cocher, rien à voir avec une video). La seule solution trouvée avait été d'utiliser du code pour modifier dynamiquement la hauteur de la fenêtre (+ 1 pixel). Mais c'était une interface de saisie en interne, un peu perturbant mais ce n'était pas pour des visiteurs qui risquent de trouver mon astuce un peu chiante à chaque clique pour afficher chaque video :)

Donc si quelqu'un avait la moindre idée de comment résoudre ce souci d'ordre esthétique cela m'arrangerait fortement, car là, je sèche.

Merci

A+

27/03/2009, 07h51
andry.aime

:salut:
Dans ton code, il n'y a pas de variable "a" déclaré et il n'est même pas utilisé à part

Citation:

setTimeout('a=2;',1000);
27/03/2009, 09h20
emmanuel.remy
Code:

1 2 3 4 document.getElementById(table_parties[x]).style.position='relative'; setTimeout('a=2;',1000); document.getElementById(table_parties[x]).style.visibility='visible';
Citation:

J'ai essayé un setTimeout à 100, ou à 2000, le temps avant affichange change bien (logique)

Si je comprends bien tu utilises le setTimeout pour décaler l'affichage ?
Hors le setTimeout n'est pas bloquant 8O.

Et comme andry.aime te fait remarquer que

Citation:

Dans ton code, il n'y a pas de variable "a" déclaré et il n'est même pas utilisé à part

... ton setTimeout ne sert à rien :?

ERE
27/03/2009, 10h40
misterphil

Etes-vous sûrs pour le setTimeout qui n'est là que pour reculer le temps avant affichage ? Parce que, ok, le 'a=2' est inutile en soi, j'ai mis un truc totalement neutre, je l'admets ;) mais j'ai pourtant bien un temps d'attente plus long, soit lié à la durée précisée (1000), donc en soi le setTimeout fonctionne, ce qui ne résout certes pas mon souci d'affichage... mais bien que la variation de durée n'influe par sur le souci d'affichage, la variation, on la ressent bien à l'écran :) A la rigueur, je pourrais faire un truc plus long, j'ai bien fait 2000 (je vais tout de même essayer plus long pour voir), mais mon but n'est pas de rallonger le temps d'affichage, mais bel et bien de supprimer le bug de l'affichage. En fait, je cherche moins à améliorer le setTimeout qu'à trouver une alternative à cette option qui fait un peu trop bricolage...
27/03/2009, 14h26
emmanuel.remy

Piste
Citation:

Etes-vous sûrs pour le setTimeout qui n'est là que pour reculer le temps avant affichage

Essaie:
Code:

1 2 3 4 alert('temps 0'); setTimeout("alert('timeout')",3000); alert('temps 1');
Par contre tu pourrais mettre dans ton setTimeout ton instruction (à ajuster bien sûr pour qu'elle soit correctement exécutée)

Code:

document.getElementById(table_parties[x]).style.visibility='visible';

ERE
27/03/2009, 15h14
misterphil
Alors j'ai essayé :
Code:

1 2 3 alert('temps 0'); setTimeout("alert('timeout')",3000); alert('temps 1');
Ce qui donne par ordre d'apparition :
1- temps 0
2- temps 1
3- affichage video bien comme il faut
4- timeout

Pour ce qui est de l'instruction dans le setTimeout, c'était mon code initial, mais cela n'arrêtait pas de foirer, je ne sais pas pourquoi, il y avait un souci avec table_parties[x] qui n'était pas reconnue, et j'avais pourtant testé à la fois avec table_parties[x] et '+table_parties[x]+' sinon comment faire autrement ? Cela ne voulait rien donner, donc j'ai fait autrement ;)
27/03/2009, 15h37
emmanuel.remy

Donc cela fonctionne maintenant ?

Citation:

setTimeout (...) il y avait un souci avec table_parties[x] qui n'était pas reconnue

Quand la fonction du setTimeout s'exécute, il ne connaissait certainement plus table_parties[x] car le code de ta boucle était jà terminé... :aie:

ERE
27/03/2009, 15h57
misterphil

Oui merci cela fonctionne avec le code tel quel mais dès que je supprime les alertes, cela repose souci, l'affichage ne se fait toujours pas. Tu oensais à quoi pour remplacer les alertes ?

Pour l'instruction dans le setTimeout, hmm, non il me semblait pourtant que c'était dans la boucle, comme maintenant, mais comme j'ai changé pas mal de fois, c'est pas impossible ;)

Remplace ton code...

... par celui-là; si c'est le fait qu'il faut un décalage de temps avant l'affichage de ta div, cela doit corriger...

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
 
<script language="javascript" type="text/javascript">
  //fonction permettant l'appel depuis le setTimeout
  var disp = function (e) {
    return function() {
      e.style.visibility='visible';
    };
  };
 
  table_parties = new Array("partie_3", "partie_3-2", "partie_3-3", "partie_3-4");
 
  function changevideo(parti)
  {
    var elem ;
    for(x in table_parties)
    {
      elem = document.getElementById(table_parties[x]);
 
      if(parti==table_parties[x])
      {
         elem.style.position='relative';
         setTimeout(disp(elem),1000);
      } 
      else {
         elem.style.position='absolute';
         elem.style.visibility='hidden';
      }
    }
  }
 
</script>

ERE

27/03/2009, 16h35
misterphil

Je vais devoir absolument étudier ce que tu as fait, entre temps je testais plein de trucs qui ne donnaient rien, mais là, tu as tout bon. Merci beaucoup car ça fonctinne sous IE, je vais vérifier sous FF aussi pour être sûr ;) mais a priori, c'est réglé !