Discussion :

[Lionel_aw]

Bonjour,

j'ai remarqué un bug avec Google Chrome et les boites de dialogues Jquery UI.

Mon code est prévu pour afficher, au chargement de la page, une boite de dialogue si la hauteur de la fenêtre - jQuery(window).height() - est inférieure à une certaine valeur (pour inviter les gens à utiliser le mode plein écran)

Mon code est correct puisqu'il fonctionne parfaitement avec firefox, IE, safari, mais avec Chrome, la boite de dialogue s'affiche au dessus de la fenêtre, hors de porté et de de vue donc la fenêtre reste bloquée.
J'ai un écran 1920x1200 et si je simule une fenêtre plus petite, après avoir constaté le problème, si j'agrandis la fenêtre, je vois la dialog box apparaître en haut de la fenêtre.

Certain d'entre vous connaissent ils ce bug??

merci

Lionel

[Lionel_aw]

voici ce qui se passe en image.
sur mon ecran 24" 1920x1200 je simule des résolutions plus faibles.

si la fenêtre du document est trop petite au chargement je fais apparaître une boite de dialogue, ça marche avec IE, Firefox (image1).

avec Google Chrome, le dialog fonctionne, mais la fenêtre elle même est 'hors champ' on ne voit que l'overlay (image2).
Si je tire sur le bas de la fenêtre pour l'agrandir, je voir apparaître péniblement un bout de la boite de dialogue, en haut ... (image 3)

voici en gros mon code

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
$(document).ready(function() 	// le document est chargé
	{
	  var dialogOpts = {
	  title: '<a class="closeDialogUi" href="#">Fermer la fen&ecirc;tre ...</a>',
	  width: 300,
	  height: 120,
	  position: ["center"],
	  modal:true,
	  autoOpen: false
	  };
	  //crée la boite de dialogue
	  $("#dialog_1").dialog(dialogOpts);
	  $(".closeDialogUi").click(function()
		  {
		  $("#dialog_1").dialog("close");	
		  $("#dialog_1").dialog("destroy");	
		  });	
/*----------------------------------*/	
	var checkHeight = function()
	{
	  var $myDiv = jQuery('#myDiv');
	  var $results = jQuery('#results');
	  var $windowH = jQuery(window).height();
	  var $windowW = jQuery(window).width();
	  var $multip = 80;
 
 
	  			if ($windowH <= 720)	{ 
					$multip = 92;		// petit écran, on réduit la marge
					 }
		   	  $bodyH = Math.floor(($windowH * $multip) /100);
			  	if ($bodyH < 560)	{ $bodyH = 560 }
			  	if ($bodyH >= 620 && $bodyH < 630)	{ $bodyH = 620 }  // clarifier cette ligne
		   	  $bodyW = Math.floor(($windowW * 80) /100);
			  	if ($bodyW > 1200)	{ $bodyW = 1200 }
			  	if ($bodyW <  900)	{ $bodyW =  900 }
 
/* ----------------------------------------------- */
 
 
			  jQuery($results).html(''); 
			  jQuery('<p>window height: ' + $windowH + '</p>').appendTo($results); 
			  jQuery('<p>window witdh: ' + $windowW + '</p>').appendTo($results); 
			  jQuery('<p>screen height: ' + screen.height + '</p>').appendTo($results); 
				$("#body").css("background", "#f00");
				$("#body").css("height", $bodyH + "px");
				$("#body").css("width", $bodyW + "px");		
			  jQuery('<p>#body height: ' + jQuery("#body").css("height") + '</p>').appendTo($results); 
			  jQuery('<p>#body width: ' + jQuery("#body").css("width") + '</p>').appendTo($results); 
 
 
 
	  // ----------------------------------------------centrage vertical	  
	  //$("#body").css("margin-top","8px");	/* --- force la marge avant redim */ 
	  var $diff = $windowH - $("#body").outerHeight();
		  if ($diff >= 0 )
		  {
		  $("#body").css({"margin-top": ($diff / 2) +"px"});	
		  } else {
		  $("#body").css({"margin-top":"8px"});	
		  }
	  // ---------------------------------------fin du centrage vertical	  
	} //----------------------------------  fin fonction checkHeight	
 
 
 
	var tooSmall = function()
	{
		if (jQuery(window).height() <= 720)
		{
		  $("#dialog_1").dialog("open");	// écran d'avertissement
		}
	}
 
	checkHeight();
	tooSmall();
	$(window).resize(checkHeight);
 
 
 
 
});				// fin du document.ready