Progress indicator or gif/image displayed when client uploads file

Hi having search the forum I found a modification to product info display that would display an animated gif when a customer upload was taking p;lace. It works fine in firefox and chrome but in ie and edge the gif is not animated so it looks like nothing is happening.

What I would like if posible is to use the same code but with a statement built in that if the browser is ie or edge then display "myupload.jpeg" instead. code is below and I await in anticipation of a fix

 <!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>

    <?php
      echo $display_qty;
      ?>

      <div id="cartAdd" style="display:none;"> <img border="0" src="http://example.com/templates/0/images/preparing_progressbar.gif" width="250" height="50"> </div><a href="javascript:ShowDiv()"></a> <div onclick="ShowDiv()">

      <?
      echo $display_button;
            ?>
          </div>
          </div>

<script language="javascript">
function ShowDiv()
{
document.getElementById("cartAdd").style.display = '';
}
</script>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

sorry path to gif is 444 net dotcodotuk/prints/resources/preparing_progressbar.gif

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>

    <?php
      echo $display_qty;
      ?>

      <div id="cartAdd" style="display:none;"> <img border="0" src="http://www.44########.co.uk/prints/resources/preparing_progressbar.gif" width="250" height="50"> </div><a href="javascript:ShowDiv()"></a> <div onclick="ShowDiv()">

      <?
      echo $display_button;
            ?>
          </div>
          </div>

<script language="javascript">
function ShowDiv()
{
document.getElementById("cartAdd").style.display = '';
}
</script>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

ok reaserch shows that ie and edge will freeze and animated gif if it is revealed by the "onclick". There does seem to be a few work arounds for this problem if it ocurrs during a form "submit" but I have had no joy with sorting it in zen cart code.

Can any coders out there pease assist me to overcome this bug in microsoft's browsers?

Hey zen cart boffins. Surely one of you can ad a workaround to ie and edge freezing gif when using "onclick"

Have you tried the results when you google ' IE and Edge freezing gif when using "onclick" ' Several possible solutions there.

Hmm thanks anyway but Like I said 2nd up

"ok reaserch shows that ie and edge will freeze and animated gif if it is revealed by the "onclick". There does seem to be a few work arounds for this problem if it ocurrs during a form "submit" but I have had no joy with sorting it in zen cart code."

the part of my code that needs altering is

<?php
  echo $display_qty;
  ?>

  <div id="cartAdd" style="display:none;"> <img border="0" src="http://www.44########.co.uk/prints/resources/loading1.gif"> </div><a href="javascript:ShowDiv()"></a> <div onclick="ShowDiv()">

  <?
  echo $display_button;
        ?>
      </div>
      </div>

Any one help with this please?

Any one help with this please?

Thanks for the code. I'm looking for the same fix for IE. Any updates on that issue?

No updates and as you see no help from zen boffins

I'm even willing to pay a reasonable fee is someone can fix this. All my orders have file uploads. This is very important to me. I'm not a coder, I just know some basic self-thought coding, but it seems like someone who knows codding well, should be able to add a line of code or two and create a work around for Explorer and Safari.
Maybe someone will figure it out one day.

I do hope so as I have 5 sites that rely on uploads, but do not hold your breath. A script like Zen cart that offers an image upload really should have a cross browser upload progress bar available even if it is a paid for plugin.

What if, instead of using an animated GIF, you used a font-awesome glyph with the fa-spin class? See this w3chools tryit for an example.

Thank you. That's a great idea. Works in Chrome, but in Explorer, it is not visible. I mean the area shifts to create space for it, and if you click and highlight the area, you can see that a square block instead of it, is highlighted and spinning, but nothing is visible in IE.

Dalmen:

Thank you. That's a great idea. Works in Chrome, but in Explorer, it is not visible. I mean the area shifts to create space for it, and if you click and highlight the area, you can see that a square block instead of it, is highlighted and spinning, but nothing is visible in IE.
What version of IE is "not displaying"?

I'm using IE 11, and Edge, and I get the same thing on both. But it works in Chrome.

@Dalmen, would you share the code you're using, either via direct post on a reply or via PM? What size files are your customers uploading?

lat9:

@Dalmen, would you share the code you're using, either via direct post on a reply or via PM? What size files are your customers uploading?

Please reply by posting code here as I have the same issue to resolve

Thanks