[Pro] Form List - Rollover

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

quote

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

quote

WOW. Thanks Walter.

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

Thanks again,

Neil

quote

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 ?

quote

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

quote

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

quote

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

quote

I’m using Mals Cart

quote

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

quote

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 ?

quote

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

quote

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

quote

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);

quote

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);

quote

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

quote

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

quote

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

quote

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?

quote

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

quote

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.

quote

JavaScript is case-sensitive and very, very, fussy about names. Check to be sure that you have done all of the following:

1. Used the Item/Extended dialog to add an ID to the picking list.
2. Set the Value for each of the picking list options to be precisely the same (letters/case) as the ID of the image you want it to control.
3. You have set the Name attribute (in the third tab from the left of the Inspector) for your picking list control to be exactly the same as the ID.
4. You have replaced the placeholder name ‘myPicker’ in the JavaScript with the actual name and ID of the picker on your page.

The fact that you got the images to all hide except the first instance means that you got the IDs of your images correct in the first line of the script. But all the rest of the script needs to be policed to ensure that everything is wired up correctly.

Walter

On Nov 24, 2011, at 6:49 AM, mphiggins wrote:

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.

quote

Thanks for your reply Walter. When I have the picker selected, and choose Item/Extended, I get a dialog box that gives me the option to edit and add a Name and Value. In your reply, does Name=ID? I’ve been very careful to copy & paste to avoid javascript errors regarding names & case sensitivity. Because all but the first are hidden when the page loads, I assume #2 in your reply is okay. #3: I’ve replaced all instances of myPicker with xxPicker - in the script and in the 3rd from left inspector tab. Any ideas?

quote

Walter: Found the problem. I had originally put xxPicker as the Title in the properties tab of the inspector. That will cause the example to fail - thanks for your help!

quote

ID should literally be id (lower-case) but that shouldn’t affect anything because the browser will silently correct it. Best to make it lower-case, though. So if you were adding the ‘id’ attribute to the select element (and you have to check to be sure that the <select> tab is chosen in the top of the Item / Extended dialog) then you would enter this:

• Name: id
• Value: yourIdGoesHere

yourIdGoesHere should be exactly the same as the Name attribute that you set on your select (picking list) using the Inspector (in the third tab from the left).

Walter

On Nov 25, 2011, at 12:44 PM, mphiggins wrote:

Thanks for your reply Walter. When I have the picker selected, and choose Item/Extended, I get a dialog box that gives me the option to edit and add a Name and Value. In your reply, does Name=ID? I’ve been very careful to copy & paste to avoid javascript errors regarding names & case sensitivity. Because all but the first are hidden when the page loads, I assume #2 in your reply is okay. #3: I’ve replaced all instances of myPicker with xxPicker - in the script and in the 3rd from left inspector tab. Any ideas?

quote