[Pro] Form List - Rollover

Freeway
1

Hi all,

I would like to present the site visitor will a drop down list like the one set up using the html form element, which generates an image relative to the current choice.

For example a pull down list numbered 1 to 8 with a different image appearing depending one what the user selects.

Thanks
Neil

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

2

Draw a separate image box on the page for each of your images, and
import the images. Initially, set them up so they are not stacked on
top of each other, so you can see them all at once. Write down the
value of the Title field in the Inspector, which is analogous to the
ID attribute of the DIV containing each image.

Now make your select picker. Add an option for each of your images. In
the Value field, enter each ID that you got in the first step EXACTLY
(case matters here). In the Choice field, enter whatever text you want
to be visible in the option.

While the select picker is still selected on the page, choose Item /
Extended from the main menu. Click New, then in the Name field enter
id and in the Value field enter myPicker. If you drew your picker as a
layer item, the Extended dialog will offer you a number of options
where your extended attributes will apply. You need to choose the one
labeled < select >.

If you have more than one of these pickers on the page, you must give
each of them unique IDs. Legal IDs always begin with a regular ASCII
letter (no accents or diacriticals) and never contain spaces or
punctuation (except for the underscore). Since you are adding this
long-hand, Freeway will not fix things for you if you enter a
duplicate or invalid ID.

The last part of this is a little bit of JavaScript. First, apply the
Protaculous Action to your page. http://actionsforge.com/find/protaculous
Next, set the Library picker to protaculous-packed. Click on the top
Function Body button and enter the following script, substituting your
image names where I have item1, item2, etc. Each image name needs to
be preceded by a hash mark (#).

var list = $$('#item1, #item2, #item3, #item4').invoke('hide');
list.first().show();
var showMe = function(evt){
	var picker = $(this);
	list.invoke('hide');
	$($F(picker)).show();
}
$('myPicker').observe('change',showMe);

Test this out in a browser. You should see all but your first image
hide, and when you change the picker, the corresponding image should
appear. Now you can move the images so that they all occupy the same
x,y coordinates and your illusion should be complete.

If you don’t see this working, use Firefox with Firebug to note the
issue, and / or post a link here so we can help you figure out the
problem.

Walter

On Apr 23, 2010, at 3:26 PM, Neil wrote:

Hi all,

I would like to present the site visitor will a drop down list like
the one set up using the html form element, which generates an image
relative to the current choice.

For example a pull down list numbered 1 to 8 with a different image
appearing depending one what the user selects.

Thanks
Neil

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

WOW. Thanks Walter.

I’ll get to work on this and report back in a while.

Thanks again,

Neil

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

4

Walter,

This is brilliant. Apologies for taking so long to test it but I had to work on something else. It’s really good and the instructions are spot on.

I have one more question regarding the use of this procedure.
If I was displaying some information in a table and wanted to incorporate this into the table, could this be done?

I’m under the impression that it would not work. Is there a way around it ?

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

5

The layers that you show and hide must be just that – layers – so they could not be inside the table. But the picking list certainly could be. Give it a try.

Walter

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

6

Hi Walter,

Could the above example be used in conjunction with a ‘Buy’ button ?

Ideally I would like to offer 8 sizes of a type of product, varying prices. If the buy button is clicked, the product selected in the picker would be added to cart.

Is this possible.

Thanks again,

Neil

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

7

There is already an Action to choose a size/color/whatever in the
Freeway Shop Actions. Or are you using a different cart system?

Walter

On Jun 21, 2010, at 5:47 AM, NeilMT wrote:

Hi Walter,

Could the above example be used in conjunction with a ‘Buy’ button ?

Ideally I would like to offer 8 sizes of a type of product, varying
prices. If the buy button is clicked, the product selected in the
picker would be added to cart.

Is this possible.

Thanks again,

Neil

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

8

I’m using Mals Cart

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

9

I’ve given the e-product variation and e-quantity actions a try. I can’t see where I can alter the price for each option ?

up until now I have listed each item and had a separate 'Buy" button for each item. This makes the page look a bit too busy. I would like to achieve a more professional look using a pull down list.

Any help would be appreciated.

Thanks

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

10

Well, you can very easily set the value of each of a picking list to a
price, but there’s a problem with that. In Mal’s cart, a checksum is
used to make sure that someone doesn’t change your prices behind your
back. That checksum incorporates the price and the product id so the
two cannot be sent separately.

What you might try is to put each of the price options in a separate
form, as you have them, but put each one in a separate DIV (HTML box).
Then use the exact code of this thread to only show one of them at a
time. You can stack them in the same x/y position, and the switching
will be seamless. When a customer chooses one of the product options,
all the other options in the same group would be hidden. The page
would look like it had a single form and a picker to choose the
options, and a single button to add to your cart.

Walter

On Jun 21, 2010, at 9:15 AM, NeilMT wrote:

I’ve given the e-product variation and e-quantity actions a try. I
can’t see where I can alter the price for each option ?

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

11

Walter,

The above solution worked brilliantly.

I have the 8 products overlaid so that when a visitor selects a product from the picker, the price, product details and ‘buy’ button relating to that product appear.

Is it possible to use more than one picker on a page ? I have tried by renaming the picker and some of he variables but this fails.

Thanks

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

12

Glad that worked for you.

Yes, you can have more than one of these on the page. The way the function is written, though, you need to change quite a few different things to make another one work. Basically, you will end up with a separate JavaScript function and associated values for each picker. If I had some time to spare, I could write the function in such a way that it doesn’t need this, but for now, here’s what you can do:

Duplicate the existing function and code in its entirety. Then go through the duplicate and change the following:

  • list becomes list2 or 3 or 4… a different number per instance of the function. Be sure to change all instances of the word list, as that is a variable which contains a reference to all of the elements you want to shift.
  • Change all of the IDs of the elements that are listed in list to match the elements you want to switch with list2.
  • showMe becomes showMe2
  • myPicker becomes the id you assigned to your next picker, perhaps myPicker2 just to keep things straight.
  • And be sure to change the ID of your second picker to match.

Walter

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

13

Thanks Walter,

I had tried to add in the extra code but had not changed the showme variable.

However, I think I have now added in the second section of code correctly !?!

But the second picker does not work?

Is there anything obviously wrong with this code ?

var list = $$(‘#l1, #l2, #l3, #l4,#l5, #l6, #l7, #l8’).invoke(‘hide’);
list.first().show();
var showMe = function(evt){
var picker = $(this);
list.invoke(‘hide’);
$($F(picker)).show();
}
$(‘myPicker’).observe(‘change’,showMe);

var list2 = $$(‘#w1, #w2, #w3, #w4,#w5, #w6’).invoke(‘hide’);
list2.first().show();
var showMe2 = function(evt){
var picker2 = $(this);
list2.invoke(‘hide’);
$($F(picker2)).show();
}
$(‘myPicker2’).observe(‘change’,showMe2);

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

14

Can you post a link to the page? This appears correct, but maybe the
second picker doesn’t have its ID set correctly.

Walter

On Jun 24, 2010, at 3:15 PM, NeilMT wrote:

Thanks Walter,

I had tried to add in the extra code but had not changed the showme
variable.

However, I think I have now added in the second section of code
correctly !?!

But the second picker does not work?

Is there anything obviously wrong with this code ?

var list = $$(‘#l1, #l2, #l3, #l4,#l5, #l6, #l7, #l8’).invoke(‘hide’);
list.first().show();
var showMe = function(evt){
var picker = $(this);
list.invoke(‘hide’);
$($F(picker)).show();
}
$(‘myPicker’).observe(‘change’,showMe);

var list2 = $$(‘#w1, #w2, #w3, #w4,#w5, #w6’).invoke(‘hide’);
list2.first().show();
var showMe2 = function(evt){
var picker2 = $(this);
list2.invoke(‘hide’);
$($F(picker2)).show();
}
$(‘myPicker2’).observe(‘change’,showMe2);

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

15

Hi Walter,

Wet rooms direct dot net / 2

if you click the buy button for the ecodec featured product, you will go to the relevant page.

The options for the ecodec work fine. The options for the waste options fail.

Many thanks for looking,

Neil

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

16

The waste picker has the ID myPicker as does the Eco-Dec picker. No two elements on any one page may have the same ID, so this is invalid code and won’t work. Try changing the second picker to myPicker2, and then this should all work.

Walter

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

17

Thanks Walter,

You are a great help.

I had changed the name in the inspector window but forgot to change it in the extended options.

Thanks again,

Neil

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

18

Is it the difference in versions (using 5.6) that I cannot figure out what a Library Picker is? Is a Picker a menu / list? I’m trying to do basically the same as Neil and would love to see a sample! Anyone have a freeway file they’d like to share?

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

19

Is a Picker a menu / list?

Yes - sorry no example of Neil’s construction but his contact info is on the People page of the Web based Forum.

David

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

20

Thanks David. Using the javascript Walter provided, I got as far as getting all the images to hide except the first item in the list. Then clicking anywhere on the picker makes all the images disappear. If I reload the page, the first image re-appears. Puzzling.

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