{"id":194,"date":"2011-08-17T08:55:40","date_gmt":"2011-08-17T15:55:40","guid":{"rendered":"http:\/\/www.keganv.com\/?p=194"},"modified":"2014-03-03T13:15:02","modified_gmt":"2014-03-03T20:15:02","slug":"animated-gif-fix-for-ie-on-form-post","status":"publish","type":"post","link":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/","title":{"rendered":"Animated GIF Fix For IE On Form Post"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.keganv.com\/wp-content\/uploads\/ie.jpg\" alt=\"Rotating GIF IE Issues\" width=\"561\" height=\"246\" class=\"aligncenter size-full wp-image-236\" \/>Recently <a href=\"http:\/\/www.seangofus.com\">my buddy<\/a> and I had to figure out a way to get an animated gif (throbber) to animate in IE after the user submitted the form. The problem was that it stopped animating on submission. With a little bit of html, css, and jquery, it was no problem.<br \/>\n<!--more--><br \/>\nOur pop up message is contained in a parent div with an id of &#8216;throbberMsg&#8217;. We use this div as the main hook for our jquery. We then appended a hidden div with an id of &#8216;pBox&#8217; to the body so that we could show the hidden div and present the message to the user upon submitting the form. The span tag we used to dynamically insert a background image of the rotating gif, which fixes the IE issue for 7 and 8. However, this causes the animated gif to freeze in all other browsers. To get around this we inserted the image back into the span tag and wrote a conditional IE jquery fix to remove the image from the DOM. We also noticed that IE9 behaved the same way as Firefox, Chrome, etc. So what worked for IE7, and IE8 did not work for IE9&#8230; go figure. To solve this issue we placed a global variable in a conditional if less than IE9 comment and set the variable value to true. Viola, cross-browser animated goodness.<\/p>\n<p>Global variable: (Must be set before the throbber function is called.)<\/p>\n<pre>\r\n<!--[if lt IE 9]>\r\n<script>\r\n     var LTIE9 = true;\r\n<\/script>\r\n<![endif]-->\r\n<\/pre>\n<p>Here is the end result for the html:<\/p>\n<pre>\r\n<div id=\"throbberMsg\">\r\n     <span>\r\n          <img decoding=\"async\" src=\"\/support\/images\/pages\/ajax-throbber.gif\" \/>\r\n     <\/span>\r\n     Now saving your information...\r\n<\/div>\r\n<\/pre>\n<p>Here is our CSS:<\/p>\n<pre>\r\n.pBox #throbberMsg span{\r\n     float:left;\r\n     width:16px;\r\n     height:16px;\r\n     margin:0 5px 0 108px;\r\n     display:block;\r\n     background-image:url(\/support\/images\/pages\/ajax-throbber.gif) no-repeat top left;\r\n}\r\n<\/pre>\n<p>Here is the jQuery: (Note that you have to sniff out IE < IE9)\n\n\n<pre>\r\nfunction showpBox()\r\n{ \r\n     if(LTIE9 = true){ $(&#8216;.pBox #throbberMsg span img&#8217;).remove();}\r\n     $(&#8220;<div class='pBox' \/>&#8220;).appendTo(&#8216;body&#8217;);\r\n     var throbber = $(&#8216;#throbberMsg&#8217;);\r\n     $(&#8216;.pBox&#8217;).html(throbber);\r\n     $(&#8216;.pBox #throbberMsg&#8217;).show();\r\n     \/\/This line must be ran last.\r\n     $(&#8216;.pBox #throbberMsg span&#8217;).css(&#8216;background-image&#8217;,&#8217;url(\/support\/images\/pages\/ajax-throbber.gif)&#8217;);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Recently my buddy and I had to figure out a way to get an animated gif (throbber) to animate in IE after the user submitted the form. The problem was that it stopped animating on submission. With a little bit of html, css, and jquery, it was no problem.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-194","post","type-post","status-publish","format-standard","hentry","category-coding-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animated GIF Fix For IE On Form Post<\/title>\n<meta name=\"description\" content=\"How to fix the animated GIF issue associated with IE on a form post.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated GIF Fix For IE On Form Post\" \/>\n<meta property=\"og:description\" content=\"How to fix the animated GIF issue associated with IE on a form post.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\" \/>\n<meta property=\"og:site_name\" content=\"KeganV\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-17T15:55:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-03T20:15:02+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.keganv.com\/wp-content\/uploads\/ie.jpg\" \/>\n<meta name=\"author\" content=\"Kegan V.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kegan V.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\"},\"author\":{\"name\":\"Kegan V.\",\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\"},\"headline\":\"Animated GIF Fix For IE On Form Post\",\"datePublished\":\"2011-08-17T15:55:40+00:00\",\"dateModified\":\"2014-03-03T20:15:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\"},\"wordCount\":268,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\"},\"articleSection\":[\"Coding &amp; Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\",\"url\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\",\"name\":\"Animated GIF Fix For IE On Form Post\",\"isPartOf\":{\"@id\":\"https:\/\/www.keganv.com\/#website\"},\"datePublished\":\"2011-08-17T15:55:40+00:00\",\"dateModified\":\"2014-03-03T20:15:02+00:00\",\"description\":\"How to fix the animated GIF issue associated with IE on a form post.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.keganv.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated GIF Fix For IE On Form Post\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.keganv.com\/#website\",\"url\":\"https:\/\/www.keganv.com\/\",\"name\":\"KeganV\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.keganv.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\",\"name\":\"Kegan V.\",\"logo\":{\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.keganv.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated GIF Fix For IE On Form Post","description":"How to fix the animated GIF issue associated with IE on a form post.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/","og_locale":"en_US","og_type":"article","og_title":"Animated GIF Fix For IE On Form Post","og_description":"How to fix the animated GIF issue associated with IE on a form post.","og_url":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/","og_site_name":"KeganV","article_published_time":"2011-08-17T15:55:40+00:00","article_modified_time":"2014-03-03T20:15:02+00:00","og_image":[{"url":"http:\/\/www.keganv.com\/wp-content\/uploads\/ie.jpg"}],"author":"Kegan V.","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kegan V.","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#article","isPartOf":{"@id":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/"},"author":{"name":"Kegan V.","@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276"},"headline":"Animated GIF Fix For IE On Form Post","datePublished":"2011-08-17T15:55:40+00:00","dateModified":"2014-03-03T20:15:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/"},"wordCount":268,"commentCount":0,"publisher":{"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276"},"articleSection":["Coding &amp; Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/","url":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/","name":"Animated GIF Fix For IE On Form Post","isPartOf":{"@id":"https:\/\/www.keganv.com\/#website"},"datePublished":"2011-08-17T15:55:40+00:00","dateModified":"2014-03-03T20:15:02+00:00","description":"How to fix the animated GIF issue associated with IE on a form post.","breadcrumb":{"@id":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.keganv.com\/animated-gif-fix-for-ie-on-form-post\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.keganv.com\/"},{"@type":"ListItem","position":2,"name":"Animated GIF Fix For IE On Form Post"}]},{"@type":"WebSite","@id":"https:\/\/www.keganv.com\/#website","url":"https:\/\/www.keganv.com\/","name":"KeganV","description":"","publisher":{"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.keganv.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276","name":"Kegan V.","logo":{"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.keganv.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts\/194"}],"collection":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/comments?post=194"}],"version-history":[{"count":37,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":435,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts\/194\/revisions\/435"}],"wp:attachment":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}