I have this contact page and was wondering if it would be difficult to have the image click (position/person) correspond to the Position at the bottom of the contact form.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you want to change the selected item on the picker depending on the
click of a picture, you’ll need to use some JavaScript. In order to
wire up the page to respond in this way, you’ll need to add some more
identifiers to your page elements through the Item / Extended menu item.
For each of your pictures, add an ID attribute to the image that
exactly matches the value one of the options in your picking list. So
the president should get the id ‘pres’ (without the quotes).
Click once on the image, select Item / Extended from the main menu,
click New, enter id in the Name field and pres in the Value field.
Also add a class to the image so you don’t have to listen to clicks on
all images – just the ones you care about. Click New again, then
enter class in the Name field and picker in the Value field. Okay out
of the dialog. Repeat for each image, making sure that no two images
have the same ID (IDs must be page-unique in all cases).
For your picking list, you need to add an ID so that your script can
find it. Click on the picker, choose Item / Extended, make sure you
have the select segment chosen in the top of the dialog, and press
New. Enter id in the Name field and position in the Name field. (It’s
a good idea to use the same value for the name and id attribute on
form elements, since IE gets very easily confused otherwise.)
Now for the script itself. Apply the Protaculous Action to the page,
and make sure that prototype-packed is chosen in the Library picker in
the Actions palette. Click on the top Function Body button. In the
dialog that appears, paste the following code:
$$('img.picker').invoke('observe','click',function(evt){
$('position').setValue(this.id);
});
Publish and test it out. If it doesn’t work, look at it in Firefox
with the Firebug extension enabled and see what is listed in the
console.
If you want the click to also bring the rest of your form into view
(to scroll the page) then you can change the function to read thus:
$$('img.picker').invoke('observe','click',function(evt){
$('position').setValue(this.id).focus();
});
And the page will scroll down to show the Position picker and
highlight it in the browser when the image is clicked, so the next
action should be evident to your visitor.
To make the browser show a “this is clickable” cursor on these photos,
you can add a CSS style rule to the page using the Styles palette. Get
the New Style dialog open, and in the Tag field enter img.picker and
tab into the Name field and delete whatever is there and then tab back
out to make it “set”. Now click the Extended button, and New, and
enter cursor in the Name field and pointer in the Value field. Okay
out of the stack of dialogs (make sure Freeway didn’t sneak a style
name into the Name field while you weren’t looking).
Now you don’t need to add this style to the page – because it has a
Tag but no Name, it will always publish. If it matches any elements on
the page (which this should) then it will take effect (showing the
click me click me pointing finger while the mouse is over one of the
photos).
Walter
On Mar 27, 2010, at 2:04 PM, Beatrice wrote:
I have this contact page and was wondering if it would be difficult
to have the image click (position/person) correspond to the Position
at the bottom of the contact form.
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
Walter, it took me a couple days to get back to this! Thank you SO much for posting such great directions! I loaded all the details and it appears to be working (selecting the correct position in the form and the pointer mouse), but the scroll down to the form area seems a bit weak. Depending on the size of the browser window, it doesnt appear to scroll at all. I am not sure how to correct this.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Oh, also, would it be possible to do this…> click the position (image), screen scrolls down to form, cursor is active in the Your Name field.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you want the click to also bring the rest of your form into view (to scroll the page) then you can change the function to read thus:
$$('img.picker').invoke('observe','click',function(evt){
$('position').setValue(this.id).focus();
});
And the page will scroll down to show the Position picker and highlight it in the browser when the image is clicked, so the next action should be evident to your visitor.
I think that you just need to change the ID in the last part to the ID of your Name field to achieve this.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I think that should read
$$('img.picker').invoke('observe','click',function(evt){
$('position').setValue(this.id).focus(id_of_name_field);
});
But then again maybe I should just shut up and let Walter answer!
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
HEY! I got it to work!! I added this:
$$(‘img.picker’).invoke(‘observe’,‘click’,function(evt){
$(‘position’).setValue(this.id);
$(‘name’).focus();
});
I am not totally thrilled with the scroll point, but this will be very functional.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dave, I did come to that assumption and put the field in the () and it did not work! But I did get it to work by adding a second line to set the field to focus… whew!
On 30 Mar 2010, 10:13 pm, DeltaDave wrote:
I think that should read
$$('img.picker').invoke('observe','click',function(evt){ $('position').setValue(this.id).focus(id_of_name_field); });
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Well done! You did better than me. (Not hard)
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
BTW it scrolls fine in Safari but in FF just to the Name field
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You’re really close.
$$('img.picker').invoke('observe','click',function(evt){
$('position').setValue(this.id);
$('id_of_name_field').focus();
});
But remember this – Freeway won’t put IDs on form elements unless you
do it yourself, manually. (I also have an Action in the Forge called
FormFix which will do this for you on a form element at a time or an
entire page.) Unless you add an ID to each of the form elements you
want to affect, Prototype will not be able to use its wiles on them.
Walter
On Mar 30, 2010, at 6:13 PM, DeltaDave wrote:
I think that should read
$$('img.picker').invoke('observe','click',function(evt){ $('position').setValue(this.id).focus(id_of_name_field); });But then again maybe I should just shut up and let Walter answer!
D
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
Just to add to this
Some time ago Walter demonstrated the use of a picker/selector enabling the PHPFF form to choose the destination of the form result ie the email destination.
Sounds like this might be useful for you to direct the form result to the correct email address depending on the picker choice.
I cannot find the thread in question but there is an example here
http://www.deltadzine.net/form2.html
If you think that this may be useful then I (or Walter) will share.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter, that last code you wrote looks exactly like what I have:
$(‘id_of_name_field’).focus(); is modified to read $(‘name’).focus();
Each form element is assigned an id in the item output section of the info panel. I used FormsToGo for this form and it does submit to the proper email address based on the position ~ so, David, I got that part covered!
Safari seems to scroll down to the form and I get the same results in Firefox ~ the cursor jumps to the Name field, but doesnt scroll up to place it midscreen like Safari. Any fix for this?
David, I do like the RESET button you have on that sample form. What is the code for that, if you dont mind sharing?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes, I saw that you worked that out – I was looking at my mail in
date order. Please check that you are actually getting the ID on the
form element itself. In my experience, Freeway puts the ID on the
container DIV, not the form element. Unless you use Item / Extended,
and manually add id=“foo” you end up with the form elements’ names
being properly set, but not their IDs. Some browsers will do the
“right” thing and give you the element you ask for when it only has
the name set, but that’s not normal behavior, and thus you are being
lucky when it works.
Walter
On Mar 31, 2010, at 10:54 PM, Beatrice wrote:
Walter, that last code you wrote looks exactly like what I have:
$(‘id_of_name_field’).focus(); is modified to read $(‘name’).focus();Each form element is assigned an id in the item output section of
the info panel. I used FormsToGo for this form and it does submit
to the proper email address based on the position ~ so, David, I got
that part covered!Safari seems to scroll down to the form and I get the same results
in Firefox ~ the cursor jumps to the Name field, but doesnt scroll
up to place it midscreen like Safari. Any fix for this?David, I do like the RESET button you have on that sample form. What
is the code for that, if you dont mind sharing?
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
I do like the RESET button you have on that sample form. What is the code for that, if you dont mind sharing?
Standard FW form button Type:Reset
Its in the inspector.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Really? Geez, sometimes the simplest thing really is under our nose! LOL
Standard FW form button Type:Reset
Its in the inspector.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options