Got that.
I knew this would expand in complexity, the final project is part of a form going to a Mals shopping cart, there are certain (hidden) form values that have to be published into the ‘redbox’ ~ but only when ‘redbox’ visible. Otherwise these hidden value get passed to the mals cart together with blank customer data as part of the page form and is printed in the message fields at mals.
To make this complete I need to create a series of variables (20 in total) to then publish the redbox with these values included. The rest of the form is ignored if ‘redbox’ is hidden.
I could do this with php and re-load the whole page (slower) without the slide effect, but maybe this could all be wrapped up in javascript in one hit?
http://www.printlineadvertising.co.uk/demo/menuselect/option.html
I’m declaring variables at the top of the script. Can the switcheroo function change the cartvalue1 etc variables? Not sure if it can when written outside the function.
<script type="text/javascript">//<![CDATA[
var cartvalue1; cartvalue ="this extra code is published only when box is shown and not if hidden";
var cartvalue2; cartvalue ="something else";
document.observe('dom:loaded', function(){
$('redbox').hide();
var switcheroo = function(){
if($F('List1') == 'Option 3' || $F('List1') == 'Option 2'){
new Effect.SlideDown('redbox', {duration: .5, delay :0} );
cartvalue1 ="changedvalue";
cartvalue2 ="changedvalue";
}else{
if($('redbox').visible()){
new Effect.SlideUp('redbox' , {duration: .5, delay:0} );
}
}
}
$('List1').observe('change',switcheroo);
});
//]]></script>
–
David
On 29 Jun 2010, at 19:52, Walter Lee Davis wrote:
If you are switching the same box in and out, and you want it to respond to the picker being on 2 OR 3, then you would simply modify the test line:
if($F(‘List1’) == ‘Option 3’ || $F(‘List1’) == ‘Option 2’){
On US keyboards, the “pipe” character is on the same keycap as the backslash. Two pipes in a row mean “or” in most programming languages. So in between ‘Option 3’ and $F('List1 above are two pipes, not two lower-case Ls or two upper case Is.
Walter
On Jun 29, 2010, at 2:22 PM, David Owen wrote:
One last thing, a second item needs putting in the menu to drive the same effect on the same box for example ‘option 2’
would this fight the action being performed when selecting ‘option 2’ directly after selecting ‘option 3’ if not could it be done?
$('redbox').hide(); var switcheroo = function(){ if($F('List1') == 'Option 3'){ new Effect.SlideDown('redbox'); }else{ if($('redbox').visible()){ new Effect.SlideUp('redbox'); } } } $('List1').observe('change',switcheroo);On 28 Jun 2010, at 19:33, Walter Lee Davis wrote:
That’s because you’ve given the SELECT (picking list) and the DIV that holds it on the page the same ID (List1). No two things on a page can have the same ID. Since the DIV comes first in the source code of your page, Prototype is trying to get the Form.Element#GetValue function to run against it. But since a DIV is not a form element, the function fails.
Click on the left-most tab in the Inspector while this form element is selected in Freeway. Change the Title field to something besides List1. Then click on the right-most tab and confirm that the Name field still reads List1. Your Extended ID should not be affected by this change.
Walter
On Jun 28, 2010, at 1:45 PM, David Owen wrote:
Walt,
The updated Freeway page is balking with an error :-
TypeError: Result of expression 'Form.Element.Serializers[method]' [undefined] is not a function.–
David
On 28 Jun 2010, at 16:24, waltd wrote:
And if the picker changes from Option 3 back to something else, it should slide back up, right?
Here’s one way to do this.
$('redbox').hide(); var switcheroo = function(){ if($F('List1') == 'Option 3'){ new Effect.SlideDown('redbox'); }else{ if($('redbox').visible()){ new Effect.SlideUp('redbox'); } } } $('List1').observe('change',switcheroo);Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:
$(‘theIdOfThePicker’).getValue();
or the shorter and preferred version:
$F(‘theIdOfThePicker’);
To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.
Here’s a link to the working page:
Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.
Walter
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
