Gravity Support Forums Topic: Fake progress bar working in Firefox but not Safari

Gravity Support Forums Topic: Fake progress bar working in Firefox but not Safari https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari Gravity Support Forums Topic: Fake progress bar working in Firefox but not Safari en-US Sun, 19 Apr 2026 18:40:08 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Chris Hajer on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-112984 Thu, 03 Jan 2013 07:47:28 +0000 Chris Hajer 112984@https://legacy.forums.gravityhelp.com/ <p>Please update the topic after you have fixed these issues. Thank you. </p> ShayneOL on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-112738 Thu, 03 Jan 2013 00:38:33 +0000 ShayneOL 112738@https://legacy.forums.gravityhelp.com/ <p>Chris, thanks so much for the response. I will work on resolving these errors and see if it works. </p> Chris Hajer on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-112348 Wed, 02 Jan 2013 07:37:13 +0000 Chris Hajer 112348@https://legacy.forums.gravityhelp.com/ <p>Every browser responds to invalid HTML and JavaScript errors in different ways. It's likely the trouble you are having is related to the invalid HTML and JavaScript errors on your page. Here is the JavaScript error:</p> <pre><code>Timestamp: 1/2/2013 5:32:58 AM Error: ReferenceError: Tippy is not defined Source File: <a href="http://wordinmotion.com/01test" rel="nofollow">http://wordinmotion.com/01test</a> Line: 56</code></pre> <pre><code><script type="text/javascript"> Tippy.tipPosition = "link"; Tippy.tipOffsetX = 0; Tippy.tipOffsetY = 10; Tippy.fadeRate = 300; Tippy.sticky = false; Tippy.showClose = true; </script></code></pre> <p>And the invalid HTML you have is jQuery for your fake progress bar being output before the beginning of the page. Here are the first few lines of the source of the page you referenced:</p> <pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($) { $("#gform_wrapper_3").after("<div id='fakeprogress'><h2>Uploading Files.. Please Wait</h2></div>"); $("#fakeprogress").hide(); $("#gform_wrapper_3 .gform_footer input").click(function () { $("#fakeprogress").delay(3000).show('slow'); }); }); </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head></code></pre> <p>You can't have all that before the beginning of the page. Please revise your method to include the progress bar script properly inside the page. </p> <p>You also have jQuery referenced at least twice in the page. Here is the second time (coming from a plugin I think):</p> <pre><code><a href="http://wordinmotion.com/wp-content/plugins/slider-pro/js/jquery-1.6.2.min.js?ver=3.2.1" rel="nofollow">http://wordinmotion.com/wp-content/plugins/slider-pro/js/jquery-1.6.2.min.js?ver=3.2.1</a></code></pre> ShayneOL on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-112185 Wed, 02 Jan 2013 00:12:00 +0000 ShayneOL 112185@https://legacy.forums.gravityhelp.com/ <p>Hello,<br /> I'm having the same issue here. The fake progress bar doesn't work in Safari for OSX. It does, however, work for Firefox & Google Chrome (OSX). I also got it working for Safari, IE, Firefox (PC). All of the browsers that I've used are updated to the most recent versions.</p> <p>The test form that I'm using is located at the following address:<br /> <a href="http://wordinmotion.com/01test" rel="nofollow">http://wordinmotion.com/01test</a></p> <p>The PHP and CSS code is below. Any help is appreciated.</p> <p><u>CSS</u><br /> <pre><code>#fakeprogress { background-color:#ceecff; border:2px solid #ADDEFC; background-image:url(http://www.wordinmotion.com/wp-content/themes/rockwell_v1.7.1/skins/white/gfx/ajax-loader.gif); background-repeat:no-repeat; background-position:center 65px; height:120px; width:400px; position:absolute; top:50%; left:50%; margin-top:-60px; margin-left:-200px; z-index:100; } #fakeprogress h2 { text-align:center; margin:0; padding:25px 0 0 0; font-weight:bold; font-size:24px; font-family:sans-serif; }</code></pre> <p><u>Javascript</u><br /> <pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($) { $("#gform_wrapper_3").after("<div id='fakeprogress'><h2>Uploading Files.. Please Wait</h2></div>"); $("#fakeprogress").hide(); $("#gform_wrapper_3 .gform_footer input").click(function () { $("#fakeprogress").delay(3000).show('slow'); }); }); </script></code></pre> Chris Hajer on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-80903 Sun, 14 Oct 2012 18:59:17 +0000 Chris Hajer 80903@https://legacy.forums.gravityhelp.com/ <p>Hi thank you for this. I see the CSS now which affects this (in skin.css):</p> <pre><code>[css] #fakeprogress { background-color:#ceecff; border:2px solid #ADDEFC; background-image:url(http://fluidframe.com.au/wp/wp-content/uploads/2012/09/ajax-loader-1.gif); background-repeat:no-repeat; background-position:center 65px; height:120px; width:400px; position:absolute; top:50%; left:50%; margin-top:700px; margin-left:-200px; z-index:100; }</code></pre> <p>It's difficult for me to make local changes and have them persist after submitting, where I need to see the change in the position. I think I would begin by removing the margin-top and margin-left and see what happens. top:50%; and left:50%; are already defined. There are quite a few positioning rules here. I would remove them all and see where the fakeprogress ends up, then add styles back in to see where it ends up. </p> jwb391 on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-80291 Thu, 11 Oct 2012 07:43:27 +0000 jwb391 80291@https://legacy.forums.gravityhelp.com/ <p>OK sorry. While I have help I am trying to get it all sorted! :)</p> <p>Here is the code link:</p> <p><a href="http://pastie.org/5034645" rel="nofollow">http://pastie.org/5034645</a></p> <p>Please note I have put more than 1 wrapper in as I am trying to get it working on the 3 forms</p> <p>Thank you for your help. </p> Chris Hajer on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-80289 Thu, 11 Oct 2012 07:30:50 +0000 Chris Hajer 80289@https://legacy.forums.gravityhelp.com/ <p>Let's stick to one issue at a time please. We can address clearing the cache and your other question about changing the button ID separately.</p> <p>Can you post the code you are using for the fake progress bar? Please use pastie.org or pastebin.com. Thank you. </p> jwb391 on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-80288 Thu, 11 Oct 2012 07:27:18 +0000 jwb391 80288@https://legacy.forums.gravityhelp.com/ <p>The screenshot of Firefox is here:</p> <p><a href="https://www.dropbox.com/s/qi3irjanhpej0gu/Screen%20Shot%202012-10-11%20at%2010.35.46%20AM.png" rel="nofollow">https://www.dropbox.com/s/qi3irjanhpej0gu/Screen%20Shot%202012-10-11%20at%2010.35.46%20AM.png</a></p> <p>This is where I would like the image to load in all of the browsers. </p> <p>Also is there a way to clear the cache automatically from a browser as if customers go back to order another photo, the fake progress image will not display again? </p> Chris Hajer on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-80264 Thu, 11 Oct 2012 06:31:56 +0000 Chris Hajer 80264@https://legacy.forums.gravityhelp.com/ <p>To post a screenshot, please capture it on your computer then use one of the free image hosting services, and paste the link here so we can check it out. </p> jwb391 on "Fake progress bar working in Firefox but not Safari" https://legacy.forums.gravityhelp.com/topic/fake-progress-bar-working-in-firefox-but-not-safari#post-80199 Wed, 10 Oct 2012 19:33:50 +0000 jwb391 80199@https://legacy.forums.gravityhelp.com/ <p>Hi I don't know how to post a screenshot here taken in Firefox, and the fake upload image doesn't appear in Safari</p> <p>I wanted it to appear as close to the Next button at the bottom of the page on each form. But as the forms are different lengths I thought there could be another way of positioning rather than absolute so it moves dynamically.</p> <p>This way while the user has their screen scrolled down to the bottom of the form they will always see the fake progress image appear. Does that make sense? </p>