Fake progress bar working in Firefox but not Safari

Gravity Support Forums » Plugin Support » Gravity Forms

jwb391
Member

I have managed to get the fake progress bar working in Firefox but it doesn't seem to work in Safari. Does anyone know why this would be?

Also could you suggest a way to show this on every form without manually changing the button ID each time?

The site is http://fluidframe.com.au/wp/frame-your-image/

I realise there is also some sort of Javascript error with the Google Analytics code on this page. Not sure what that's about but hopefully it is not interfering with this code.

Thanks for any help you can give.

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
Chris Hajer
Key Master
Looking at the Google Analytics code, it appears you have two opening and two closing < scr ipt > tags:
<scr ipt type="text/java script"><scr ipt type="text/java script"> // analytics code here </scr ipt> </scr ipt>
Copy
Please remove the outer ones and we'll take a look again for other JavaScript errors.

Every browser handles JavaScript errors differently, which is why your functionality will work in some browsers and not in others, when there are script errors.

(I had to break the script tags to get it to display here - the tags are valid when you view the source of your page. There just happens to be a duplicate pair.)
Posted 12 years ago on Wednesday October 10, 2012 | Permalink
jwb391
Member

OK I think I have removed the double script tags - although I am not good at js (obviously!)

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
Chris Hajer
Key Master

Looks like you did a good job there. I don't have a JavaScript error at all any more from Google Analytics. I will check in the various browsers now. It's working for me in Chrome on Windows 7.

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
Chris Hajer
Key Master

It's working in Safari on OSX for me as well. Are you still having trouble with it? Please be sure to clear the browser's cache so you get a fresh page.

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
jwb391
Member

I think it is because it is appearing higher than my screen view in Safari. Is there a way to make it appear down the bottom of the page no matter which browser it is in? At the moment I have set the margin-top but it seems to be different on different browsers.

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
Chris Hajer
Key Master

Where do you want it positioned, and in which browser? Post a screenshot of what you see and describe what you would like to see instead. Thank you.

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
jwb391
Member

Hi I don't know how to post a screenshot here taken in Firefox, and the fake upload image doesn't appear in Safari

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.

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?

Posted 12 years ago on Wednesday October 10, 2012 | Permalink
Chris Hajer
Key Master

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.

Posted 12 years ago on Thursday October 11, 2012 | Permalink
jwb391
Member

The screenshot of Firefox is here:

https://www.dropbox.com/s/qi3irjanhpej0gu/Screen%20Shot%202012-10-11%20at%2010.35.46%20AM.png

This is where I would like the image to load in all of the browsers.

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?

Posted 12 years ago on Thursday October 11, 2012 | Permalink
Chris Hajer
Key Master

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.

Can you post the code you are using for the fake progress bar? Please use pastie.org or pastebin.com. Thank you.

Posted 12 years ago on Thursday October 11, 2012 | Permalink
jwb391
Member

OK sorry. While I have help I am trying to get it all sorted! :)

Here is the code link:

http://pastie.org/5034645

Please note I have put more than 1 wrapper in as I am trying to get it working on the 3 forms

Thank you for your help.

Posted 12 years ago on Thursday October 11, 2012 | Permalink
Chris Hajer
Key Master
Hi thank you for this. I see the CSS now which affects this (in skin.css):
[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; }
Copy
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.
Posted 12 years ago on Sunday October 14, 2012 | Permalink

ShayneOL
Member

Hello,
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.

The test form that I'm using is located at the following address:
http://wordinmotion.com/01test

The PHP and CSS code is below. Any help is appreciated.

CSS

#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;
}

Javascript

<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>

Posted 12 years ago on Wednesday January 2, 2013 | Permalink

Chris Hajer
Key Master

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:

Timestamp: 1/2/2013 5:32:58 AM
Error: ReferenceError: Tippy is not defined
Source File: http://wordinmotion.com/01test
Line: 56

<script type="text/javascript">
	Tippy.tipPosition = "link";
	Tippy.tipOffsetX = 0;
	Tippy.tipOffsetY = 10;
	Tippy.fadeRate = 300;
	Tippy.sticky = false;
	Tippy.showClose = true;
</script>

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:

<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>

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.

You also have jQuery referenced at least twice in the page. Here is the second time (coming from a plugin I think):

http://wordinmotion.com/wp-content/plugins/slider-pro/js/jquery-1.6.2.min.js?ver=3.2.1

Posted 12 years ago on Wednesday January 2, 2013 | Permalink

ShayneOL
Member

Chris, thanks so much for the response. I will work on resolving these errors and see if it works.

Posted 12 years ago on Thursday January 3, 2013 | Permalink
Chris Hajer
Key Master

Please update the topic after you have fixed these issues. Thank you.

Posted 12 years ago on Thursday January 3, 2013 | Permalink