Affichage et alignement vertical dynamique dans une page lors d'un clic

Invité · 17/05/2008, 14h19

Bonjour à toutes et tous

J'ai un problème d'affichage de vidéo dans un div qui n'apparait que sous firefox 2.
J'appelle une fonction nommé affiche_overlay_vidéo() qui doit normalement afficher une vidéo (youtube) au centre de la page affiché (pas la page totale, celle juste affiché). L'affichage est correct sous ie, ff3 et safari mais ne l'est pas sous ff2, car en effet la vidéo ce positionne au bon endroit mais la page remonte toujours en haut.

Voici le js

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
48
49
50
 
function affiche_overlay_video(message,categorie,nomform){
  if (categorie=='signaler') {
    var cat='<img src="../images/reportpost_clear.gif" width="20" height="18" valign="middle" alt="Vidéo deja signalé"> Vidéo déjà signalé';
  } else {
    var cat='<a href="javascript:document.'+nomform+'.submit()"><img src="../images/reportpost.gif" border="0" width="20" height="18" valign="middle"  title="Signaler à l\'administrateur une vidéo diffamatoire, non autorisée ou n\'existant plus"  title="Signaler à l\'administrateur une vidéo diffamatoire, non autorisée ou n\'existant plus"><\/a> Signaler ce contenu à l\'administrateur';
  }
  montreoverlayvideo("<table id='video_calque' valign='middle' border='0' align='center'><tr><td><fieldset><legend>VOIR LA VIDEO<\/legend><object type='application/x-shockwave-flash' data="+message+" width='425' height='355'><param name='movie' value='"+message+"' /><\/object><br><br><div align='center'>"+cat+"<\/div><\/fieldset><\/td><\/tr><\/table>");
}
 
 
function montreoverlayvideo(text) {
 
  var content = document.all ? document.all["contender"] : document.getElementById ? document.getElementById("contender") : ""
  var overlay = document.all ? document.all["video_overlay"] : document.getElementById ? document.getElementById("video_overlay") : ""
 
  var pgyoffset=MCns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
  var vertpos=MCns6? pgyoffset+window.innerHeight/2-200 : pgyoffset+ietruebody().clientHeight/2-200
  var hauteur=MCns6? pgyoffset+window.innerHeight : pgyoffset+ietruebody().clientHeight
 
  content.style.height=hauteur+"px"
  overlay.style.top=vertpos+"px"
 
  if (window.opera && window.innerHeight) //compensate for Opera toolbar
  vertpos=Math.max(pgyoffset, vertpos)
 
  overlay.innerHTML = text; // fixe le code HTML dans l'overlay balise (div)
  overlay.style.visibility = "visible"; // modification du style
  content.style.visibility = "visible"; // modification du style
  document.body.style.overflow='hidden';
  document.getElementsByTagName("html")[0].style.overflow = 'hidden';
 
  return false;
}
 
 
function cachetoutvideo() {
  var overlay;
  var content;
  // masque la fenetre (balise div [window] )
  content = document.all ? document.all["contender"] : document.getElementById ? document.getElementById("contender") : ""
  overlay = document.all ? document.all["video_overlay"] : document.getElementById ? document.getElementById("video_overlay") : ""
  overlay.innerHTML ='';
  overlay.style.visibility = "hidden";
  content.style.visibility = "hidden";
 
  document.body.style.overflow= '';
  document.body.style.overflowY= '';
  document.getElementsByTagName("html")[0].style.overflow = '';
}

le html (enfin la partie nous concernant)

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
 
<html>
<head>
<link href="mostyle.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="mafonction.js"></script>
</head>
<body>
<div id="contender" onClick='cachetoutvideo();'></div>
<div id="video_overlay"></div>
<table border="0" align="center" cellpadding="10" cellspacing="0">
  <tr>
    <td valign='top' align='center' width="33%">
      [ <a href="javascript:affiche_overlay_video('http://www.youtube.com/v/PvFk9xkID0M','2','formmed1');" class="TexteBleu">Voir la vidéo </a> ]<br><em>Nom du morceau</em>
    </td>
  </tr>
 
</table>

et enfin le css

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
#contender{
  color: #FFFFFF;
  z-index:600;
  position: absolute;
  visibility : hidden;
  padding: 0px;
  font-family: Courrier;
  font-size: 8pt;
  background: #000000; 
  -moz-opacity : 0.7;
  opacity : 0.7; 
  filter: alpha(opacity=70);
  width: 100%;
  height:100%;
  top : 0px;
  left : 0px;
  overflow:hidden;
}
 
#video_overlay{
  color: #FFFFFF;
  z-index:601;
  position: absolute;
  visibility : hidden;
  padding: 0px;
  font-family: Courrier;
  font-size: 8pt;
  width: 50%;
  height: 100%;
  top : 0px;
  left : 25%;
  overflow:hidden;
}
 
#video_calque {
  z-index:602;
  left : 25%;
}

Si quelqu'un m'aider ou m'indiquer d'ou provient le problème je lui serait gré d'avance.

Merci d'avance pour toutes aides

Invité · 20/05/2008, 22h08

Pour info c'est document.body.style.overflow='hidden'; et document.getElementsByTagName("html")[0].style.overflow = 'hidden'; qui foutent le bordel et qui à la suppression des scrolls fait remonter le navigateur en haut de la page.

Pour y remedier j'ai supprimé le overflow ='hidden' sous firefox et j'ai augmenté la taille du div contender (fond semi opaque) sur la totalité de la page avec un document.body.scrollHeight

Donc mon problème et résolu

Je tenais à remercier tout le monde pour votre aide.... à non suis con c'est moi

Affichage et alignement vertical dynamique dans une page lors d'un clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager