[BUGFIX] Prevent bouncing fileupload field

After a file is selected in the first step of an upload,
the options are shown and the fileupload field is resized
to a much smaller field. In Chrome and other browsers
this field bounces to an area above the form.

Use relative positioning and fixed heights to prevent this
UI glitch.

Refs #71

diff --git a/lib/functions.js.php b/lib/functions.js.php
index e952430cb586d6398368039ed681deaed0e26476..0c9a0201a65f4a6299c71355d2bc3a8d035f91e8 100644 (file)
--- a/lib/functions.js.php
+++ b/lib/functions.js.php
@@ -261,12 +261,13 @@ function control_selected_file_size(max_size, error_str)
     }
     else
     {
-        document.getElementById('options').style.display = '';
-        document.getElementById('send').style.display = '';
+        // add class to restyle upload form in next step
+        document.getElementById('upload').setAttribute('class', 'file-selected');
+        // display options
+        document.getElementById('options').style.display = 'block';
+        document.getElementById('send').style.display = 'block';
         document.getElementById('error_pop').style.display = 'none';
-        document.getElementById('file_select').style.left = 'inherit';
-        document.getElementById('file_select').style.height = 'inherit';
-        document.getElementById('file_select').style.opacity = '1';
+        document.getElementById('send').focus();
     }
 }
 

diff --git a/media/courgette/style.css.php b/media/courgette/style.css.php
index faa7df30a3048be48e94b5b82a094d53f0e89edb..60359497241e0e62e3055d4bd2f9b8e17c440212 100644 (file)
--- a/media/courgette/style.css.php
+++ b/media/courgette/style.css.php
@@ -157,16 +157,24 @@ input[type="submit"]:focus {
   text-align: center;
 }
 
+#upload p {
+  margin: 0;
+}
+
 #file_select {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
   width: 100%;
-  height: 100%;
+  height: 16em;
   cursor: pointer;
   opacity: 0;
 }
-
+  #upload.file-selected #file_select {
+    opacity: 1;
+    height: 2em;
+  }
+  #upload.file-selected fieldset {
+    background-image: none;
+  }
 
 
 /* ==========================================================================
@@ -197,7 +205,6 @@ input[type="submit"]:focus {
 #options {
   position: relative;
   z-index: 10;
-  background: #efebe9;
   width: 100%;
   height: 90%;
 }
@@ -214,7 +221,7 @@ input[type="submit"]:focus {
 
 #options input[type="submit"] {
   position: relative;
-  left: 11.2em;
+  margin: 1em auto;
 }
 
 /* ==========================================================================

diff --git a/media/elegantish/elegantish.css b/media/elegantish/elegantish.css
index cb18864dcd3cc06a5f28f6efece05d83d0ffc589..14ebfc1039c2a30847b2f3df556a4319a25fc335 100644 (file)
--- a/media/elegantish/elegantish.css
+++ b/media/elegantish/elegantish.css
@@ -150,16 +150,19 @@ input[type="submit"]:focus {
 }
 
 #file_select {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
   width: 100%;
-  height: 100%;
+  height: 16em;
   cursor: pointer;
   opacity: 0;
 }
-
-
+#upload.file-selected #file_select {
+  opacity: 1;
+  height: 2em;
+}
+#upload.file-selected fieldset {
+  background-image: none;
+}
 
 /* ==========================================================================
    2 = Copyright