https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered Gravity Support Forums Topic: Change image size live when form field entered en-US Mon, 20 Apr 2026 12:05:38 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69454 Fri, 03 Aug 2012 22:32:26 +0000 Chris Hajer 69454@https://legacy.forums.gravityhelp.com/ <p>Is that working for you now or do you need to me to take a look again? I forget where we were with this one. </p> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69116 Thu, 02 Aug 2012 07:50:56 +0000 Touchm 69116@https://legacy.forums.gravityhelp.com/ <p>new code:</p> <pre><code>&lt;img class=&quot;sbimg&quot; id=&quot;sbimg&quot; src=&quot;/wp-content/uploads/2012/06/AAF-Splashback-Black-Gloss-Splashback-Full-No-Handle-200x200.jpg&quot; width=&quot;200&quot; height=&quot;200&quot;&gt; &lt;script&gt; $(function width(){ $(&#39;#input_9_2&#39;).keydown(function(){ setTimeout(function() { $(&#39;#input_9_2&#39;).val(); }, 50); }); }); $(function height(){ $(&#39;#input_9_3&#39;).keydown(function(){ setTimeout(function() { $(&#39;#input_9_3&#39;).val(); }, 50); }); }); var photo = document.getElementById(&#39;sbimg&#39;); var photoWidth = width(); var photoHeight = height(); photo.width = photoWidth; photo.height = photoHeight; &lt;/script&gt;</code></pre> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69115 Thu, 02 Aug 2012 07:49:39 +0000 Touchm 69115@https://legacy.forums.gravityhelp.com/ <p>Hi Chris - I've changed it to make it default to 200 h and 200 w. Thank you so much for helping with this - I am so desperate for it now! </p> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69107 Thu, 02 Aug 2012 07:20:32 +0000 Chris Hajer 69107@https://legacy.forums.gravityhelp.com/ <p>Maybe width and height should be defined up front, so that before the keydown event is captured, there will still be a width and height value? Define them before the function, then rely on the function to change them based on the data entry? Is there a default size at which the image starts? </p> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69106 Thu, 02 Aug 2012 07:18:30 +0000 Chris Hajer 69106@https://legacy.forums.gravityhelp.com/ <p>Thanks for that link. When I access that page I get this JavaScript error:</p> <pre><code>Timestamp: 8/2/2012 6:15:43 AM Error: ReferenceError: width is not defined Source File: <a href="http://www.thesplashbackfactory.com/splashback-products/black-steel-splashback-12mm" rel="nofollow">http://www.thesplashbackfactory.com/splashback-products/black-steel-splashback-12mm</a> Line: 210</code></pre> <p>Let me look into that a little bit and see what I can find out. </p> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69088 Thu, 02 Aug 2012 04:21:32 +0000 Touchm 69088@https://legacy.forums.gravityhelp.com/ <p>Hi Chris - link to page here, just select 'custom sizes' to see the section I'm talking about: <a href="http://www.thesplashbackfactory.com/splashback-products/black-steel-splashback-12mm" rel="nofollow">http://www.thesplashbackfactory.com/splashback-products/black-steel-splashback-12mm</a> </p> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-69035 Wed, 01 Aug 2012 16:42:41 +0000 Chris Hajer 69035@https://legacy.forums.gravityhelp.com/ <p>Can you post a link to this live somewhere so we can take a look at it? Maybe it's something simple that more eyes will catch. </p> https://legacy.forums.gravityhelp.com/topic/change-image-size-live-when-form-field-entered#post-68952 Wed, 01 Aug 2012 10:34:56 +0000 Touchm 68952@https://legacy.forums.gravityhelp.com/ <p>Following on from some helpful advice on this forum, I have tried to develop a solution to a problem. Basically, when a user enters their bespoke widths into two seperate form fields (#input_9_2 and #input_9_3) I want an image or div layer, or table, to change shape in relation to the entered field entry. So if say, a user enters 20cm in field one and 300cm in field two, the image/div/cell will automatically before their eyes show that shape (using cm as pixels - this 20 px wide x 300px high). This is the code I have been using but it just isnb't working - I have no doubt my argument / syntax is wrong but can anyone help - I'm now three days into this and have tried very hard to sort myself. Many thanks.</p> <p>-------<br /> <pre><code>&lt;img class=&quot;sbimg&quot; id=&quot;sbimg&quot; src=&quot;/wp-content/uploads/2012/06/AAF-Splashback-Black-Gloss-Splashback-Full-No-Handle-200x200.jpg&quot;&gt; &lt;script&gt; $(function width(){ $(&#39;#input_9_2&#39;).keydown(function(){ setTimeout(function() { $(&#39;#input_9_2&#39;).val(); }, 50); }); }); $(function height(){ $(&#39;#input_9_3&#39;).keydown(function(){ setTimeout(function() { $(&#39;#input_9_3&#39;).val(); }, 50); }); }); var photo = document.getElementById(&#39;sbimg&#39;); var photoWidth = width(); var photoHeight = height(); photo.width = photoWidth; photo.height = photoHeight; &lt;/script&gt;</code></pre>