PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Fake progress bar working in Firefox but not Safari

  1. 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 8 years ago on Wednesday October 10, 2012 | Permalink
  2. 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>

    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 8 years ago on Wednesday October 10, 2012 | Permalink
  3. OK I think I have removed the double script tags - although I am not good at js (obviously!)

    Posted 8 years ago on Wednesday October 10, 2012 | Permalink
  4. 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 8 years ago on Wednesday October 10, 2012 | Permalink
  5. 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 8 years ago on Wednesday October 10, 2012 | Permalink
  6. 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 8 years ago on Wednesday October 10, 2012 | Permalink
  7. 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 8 years ago on Wednesday October 10, 2012 | Permalink
  8. 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 8 years ago on Wednesday October 10, 2012 | Permalink
  9. 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 8 years ago on Thursday October 11, 2012 | Permalink
  10. 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 8 years ago on Thursday October 11, 2012 | Permalink
  11. 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 8 years ago on Thursday October 11, 2012 | Permalink
  12. 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 8 years ago on Thursday October 11, 2012 | Permalink
  13. 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;
    }

    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 8 years ago on Sunday October 14, 2012 | Permalink
  14. 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 8 years ago on Wednesday January 2, 2013 | Permalink
  15. 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 8 years ago on Wednesday January 2, 2013 | Permalink
  16. ShayneOL
    Member

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

    Posted 8 years ago on Thursday January 3, 2013 | Permalink
  17. Please update the topic after you have fixed these issues. Thank you.

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