https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar Gravity Support Forums Topic: Image Upload Progress Bar en-US Mon, 20 Apr 2026 04:48:20 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28778 Wed, 29 Jun 2011 11:17:48 +0000 Kevin Flahaut 28778@https://legacy.forums.gravityhelp.com/ <p>It looks like your styles are working fine now and the div is being displayed.</p> <p>screenshot: <a href="http://bit.ly/luzKZG" rel="nofollow">http://bit.ly/luzKZG</a></p> <p>Yeah, you've had errors on your site since we started and I've noticed that the page is very very slow to load. I was getting 500 Server Errors ( <a href="http://grab.by/arDf" rel="nofollow">http://grab.by/arDf</a> ) early on and the page wouldn't load at all. I also see an error related to a wp-recaptcha plugin ( <a href="http://bit.ly/mgBZDH" rel="nofollow">http://bit.ly/mgBZDH</a> )</p> <p>I doubt the performance issue has anything to do with your form - most likely it's scripts from other plugins or your theme itself that are causing the issue.</p> <p>Please start a new thread if you're having problems getting your form submissions since that's not related to the topic here. </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28777 Wed, 29 Jun 2011 11:14:20 +0000 made-connection 28777@https://legacy.forums.gravityhelp.com/ <p>oh, when i use an ID #fakeprogress i do get the msg pop up below my submit btn. </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28775 Wed, 29 Jun 2011 10:59:24 +0000 made-connection 28775@https://legacy.forums.gravityhelp.com/ <p>thanks for a quick reply. Yes, i changed the ids to classes - but nothing this time. My site is running really slowly though. I've also never received a notification to my inbox from this form. The others work perfectly well. Hope you can help. </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28772 Wed, 29 Jun 2011 09:21:42 +0000 Kevin Flahaut 28772@https://legacy.forums.gravityhelp.com/ <p>You're mixing things again. In the example, the new div was given an ID of "fakeprogress". Since you changed that to a class name, you need to change that in your CSS for it to apply properly. The rule in your stylesheet is still looking for an ID so it's not being applied. Try changing your rules to this.</p> <pre><code>[css] .fakeprogress { background-color:#ceecff; border:2px solid #ADDEFC; background-image:url(../../uploads/btn/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> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28771 Wed, 29 Jun 2011 08:59:13 +0000 made-connection 28771@https://legacy.forums.gravityhelp.com/ <p>Thanks Kevin,<br /> my registration page is now seeing some action. The only thing is the message appears below the submit button and not as a graphic in the center of the screen. The CSS for the Fakeprogress bar is contained within the child theme's CSS, would that make a difference?<br /> As for the Button class that i use, i used borrowed that from <a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba" rel="nofollow">http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba</a> and it worked so i didn't think that i was doing anything wrong. </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28678 Tue, 28 Jun 2011 10:22:06 +0000 Kevin Flahaut 28678@https://legacy.forums.gravityhelp.com/ <p>Okay, I see the div being added to the markup now by the jQuery. Here's your problem. Your form markup uses a button element to submit the form, not a standard input element.</p> <pre><code>&lt;button class=&#39;large green awesome&#39; id=&#39;gform_submit_button_1&#39;&gt;登録します！&lt;/button&gt;</code></pre> <p>Your jQuery is trying to add the onClick event to an input so that's why nothing happens. You need to target the button element instead.. I used the button ID in the example below</p> <pre><code>jQuery(document).ready(function() { // clear the fields jQuery.fn.cleardefault = function() { return this.focus(function() { if( this.value == this.defaultValue ) { this.value = &quot;&quot;; } }).blur(function() { if( !this.value.length ) { this.value = this.defaultValue; } }); }; jQuery(&quot;.clearit input, .clearit textarea&quot;).cleardefault(); // upload progress bar jQuery(&quot;.gform_wrapper&quot;).after(&quot;&lt;div class=&#39;fakeprogress&#39;&gt;&lt;h2&gt;アップロード中。。。少々お待ちください&lt;/h2&gt;&lt;/div&gt;&quot;); jQuery(&quot;.fakeprogress&quot;).hide(); jQuery(&quot;.gform_footer button#gform_submit_button_1&quot;).click(function () { jQuery(&quot;.fakeprogress&quot;).delay(3000).show(&#39;slow&#39;); }); });</code></pre> <p>Also, I noticed the class name on your button is "large green awesome" just remember that class names don't have spaces. The browser will interpret this as 3 separate classes "large", "green" &amp; "awesome".</p> <p>Lastly, I don't see the styles for the new "fakeprogress" bar in your stylesheet. Don't forget to include those so everything works properly. </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28676 Tue, 28 Jun 2011 09:02:52 +0000 made-connection 28676@https://legacy.forums.gravityhelp.com/ <p>Kevin, you're a legend. However I'm still not getting any progress bars on my registration page. <a href="http://made-connection.com/%E7%99%BB%E9%8C%B2/?lang=ja" rel="nofollow">http://made-connection.com/%E7%99%BB%E9%8C%B2/?lang=ja</a><br /> I'm still scratching my head... </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28582 Mon, 27 Jun 2011 11:52:59 +0000 Kevin Flahaut 28582@https://legacy.forums.gravityhelp.com/ <p>I looked and saw your new div wasn't being written to the page after the form wrapper. Upon closer inspection, your jQuery script was missing a double-quote and the script wasn't being executed properly. Also, I would just include that script in the same block with the clear fields script above to keep it cleaner. Something like this..</p> <pre><code>jQuery(document).ready(function() { // clear the fields jQuery.fn.cleardefault = function() { return this.focus(function() { if( this.value == this.defaultValue ) { this.value = &quot;&quot;; } }).blur(function() { if( !this.value.length ) { this.value = this.defaultValue; } }); }; jQuery(&quot;.clearit input, .clearit textarea&quot;).cleardefault(); // upload progress bar jQuery(&quot;.gform_wrapper&quot;).after(&quot;&lt;div class=&#39;fakeprogress&#39;&gt;&lt;h2&gt;アップロード中。。。少々お待ちください&lt;/h2&gt;&lt;/div&gt;&quot;); jQuery(&quot;.fakeprogress&quot;).hide(); jQuery(&quot;.gform_footer input.button&quot;).click(function () { jQuery(&quot;.fakeprogress&quot;).delay(3000).show(&#39;slow&#39;); }); });</code></pre> <p>Try that and see if you get a little closer. </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28581 Mon, 27 Jun 2011 11:36:32 +0000 made-connection 28581@https://legacy.forums.gravityhelp.com/ <p>Cheers Kevin, I just uploaded my site today, so there is some funny business going on... should be OK now though ;p </p> https://legacy.forums.gravityhelp.com/topic/image-upload-progress-bar#post-28580 Mon, 27 Jun 2011 11:33:41 +0000 Kevin Flahaut 28580@https://legacy.forums.gravityhelp.com/ <p>@made-connection</p> <p>I get a server error when I try looking at your form.. I've tried a few times and no luck</p> <p>screenshot: <a href="http://grab.by/arDf" rel="nofollow">http://grab.by/arDf</a></p> <p>EDIT: The form page finally loaded. I'll check it out and see what I can tell you. </p>