how can this be done

Freeway
1

The size on the left (grösse) changes the size of the frame on the right. Has anyone an idea from where I can get such a script? (Google helped me not.)

http://blachenportal.ch/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

View source is your first port of call when deconstructing a page like this. If you haven’t already, turn on the Develop menu in Safari Preferences, advanced pane. Then you can use Develop / Show Page Source and see all the bits under the hood.

They are using a custom JavaScript written with the Ext.js framework to do this. Making an on-screen element respond to changes in a form field is the really easy part. Harder part is all the business rules (can’t read the error messages, but I get the idea that there are limits in either dimension).

If you have an example of the kind of thing you need to build, the first place to start is with a mockup showing various extremes of the kind of data a user may enter, and a writeup of any rules that need to be enforced.

The following script will do a naive translation of user input into width and height fields into a sized DIV on the screen:

  new Form.Observer('my_form', 0.3, function(){
    var height = parseInt($F('height'), 10) || 10;
    var width = parseInt($F('width'), 10) || 10;
    $('foo').setStyle('width: ' + width + 'px; height: ' + height + 'px;');
  });

This is taking advantage of a different JavaScript framework – Prototype.js in this case – to do all the form-wrangling and CSS-mangling. All of this could be done without a framework, but it would be many more lines of code, and there may be edge cases in certain browsers from the Pacific Northwest where the whole thing would just turn into a puddle.

Stepping through this a line at a time, here’s what you’re doing:

  1. Wrapping an unobtrusive listener function around the form named ‘my_form’, watching it every 1/3 second for changes, and firing a callback function whenever it does change.
  2. Very naively getting the value of the form field named ‘height’, and translating its value into an integer.
  3. The same, with the width.
  4. Setting the HTML box named ‘foo’ to the width and height, in pixels, as described by the form inputs.
  5. End of the wrapped observer.

Now to fully duplicate the appearance of what you showed in your example, you would need to do some arithmetic on the inputs to determine what percentage of your outer “canvas” area the inner shape would take, and then use that output instead of the raw inputs from the form fields.

Just to wrap up, here’s roughly what this would look like without Prototype (not tested, probably broken somewhere):

setInterval(function(){
  var width = parseInt(document.getElementById('width').value, 10) || 10;
  var height = parseInt(document.getElementById('height').value, 10) || 10;
  var foo = document.getElementById('foo');
  foo.style.width = width + 'px';
  foo.style.height = height + 'px';
}, 300);

That would have the disadvantage that it was running all the time, not just when you type changes into the form. I could write it to do the latter, but that’s a bit more work.

Walter

On Jun 20, 2014, at 3:44 AM, GTPeter wrote:

The size on the left (grösse) changes the size of the frame on the right. Has anyone an idea from where I can get such a script? (Google helped me not.)

http://blachenportal.ch/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Personally I think that scripts like this one - for costing Banner production - are a bit of a gimmick and are not going to lead to more sales.

Far better to encourage 1 to 1 interaction so that some real selling can be done.

David (my2c)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Thanks Walt thanks David.
About your 2c: I absolutely agree!!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options