More fixes for resizing the popovers.
authorRyan C. Gordon <icculus@icculus.org>
Mon, 05 Jul 2010 17:34:38 -0700
changeset 62 b7452dfbceb9
parent 61 dcf377661e6a
child 63 83b864d3590b
More fixes for resizing the popovers.
index.html
--- a/index.html	Mon Jul 05 15:58:05 2010 -0700
+++ b/index.html	Mon Jul 05 17:34:38 2010 -0700
@@ -26,13 +26,32 @@
         $(current_popover).fadeOut("slow");
 
     current_popover = element;
+    ui_resize();  // make this sane.
+
+    $("#backgroundpopover").css('opacity', '0.7');
+    $("#backgroundpopover").fadeIn('slow');
+    $(element).fadeIn('slow');
+
+    // I guess this doesn't actually recalculate the element sizes until the
+    //  scripts are idle, so do a short timeout so it rechecks this after
+    //  the layout has a chance to catchup.
+    setTimeout('ui_resize();', 10);
+} // popover
+
+function ui_resize()
+{
+    var element = current_popover;
+    if (element == null)
+        return;
+
+    $('#backgroundpopover').css('height', windowHeight);
 
     var windowWidth = document.documentElement.clientWidth;
     var windowHeight = document.documentElement.clientHeight;
     var popupWidth = windowWidth / 2;
     $(element).css('width', popupWidth);
 
-    var popupHeight = $(element).height();
+    var popupHeight = $(element).children().height();
 
     $(element).css({
         position: 'absolute',
@@ -41,12 +60,7 @@
         width: popupWidth,
         height: popupHeight,
     });
-
-    $('#backgroundpopover').css('height', windowHeight);
-    $("#backgroundpopover").css('opacity', '0.7');
-    $("#backgroundpopover").fadeIn('slow');
-    $(element).fadeIn('slow');
-} // popover
+} // ui_resize
 
 function render()
 {
@@ -404,6 +418,11 @@
 
 // kick off AJAX load of user profile when document is ready for action.
 $(document).ready(function(){
+    $(window).resize( function() { ui_resize(); } );
+
+    // Mobile Safari (etc?) orientation support.
+    window.onorientationchange = function() { ui_resize(); }
+
     popover('#loadingmessage');
     $.ajax({
         type: "GET",