Scriptaculous onclick ( on select ?) event from menu dropdown

In need a div to appear on the page when a specific selection if made
on a menu/Item

      <div id="mylist">
		<select name="List1" size=1>
		<option>option 1</option>
		<option>Option 2</option>
		<option>Option 3 (show a div)</option>
		</select>
	</div>

How do I set a trigger inside the menu to get Scriptaculous to make a
div appear?

       onclick="new Effect.toggle('mydiv', 'Blind', {duration:1,  
delay:0, queue:'end'}


David


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

Hi David

This thread should help you out http://freewaytalk.net/thread/view/69466

This principle can be applied to a Div or an image

Example here http://www.deltadzine.net/test/imagepicker.html

David


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

Thanks

I’ll take a look

David

On 27 Jun 2010, at 13:44, “DeltaDave” email@hidden wrote:

Hi David

This thread should help you out http://freewaytalk.net/thread/view/69466

This principle can be applied to a Div or an image

Example here http://www.deltadzine.net/test/imagepicker.html

David


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

Try adding an onchange handler to the menu.

<select name="List1" size=1 onchange="switcheroo(this)">
<script type="text/javascript">
function switcheroo(elm){
	var change;
	switch($F(elm){
		case 'Option 1':
		change = 'div2';
		break;
		case 'Option 2':
		change = 'div3';
		break;
		case 'Option 3':
		change = 'div4';
		break;
		default:
		change = 'div5';
		break;
	}
	return new Effect.toggle(change,Blind',
		{duration:1, delay:0, queue:'end'});
}

That should work. You may have to fiddle with the placement of the
function relative to the element in the page source code.

Walter

On Jun 27, 2010, at 6:43 AM, David Owen wrote:

In need a div to appear on the page when a specific selection if
made on a menu/Item

    <div id="mylist">
		<select name="List1" size=1>
		<option>option 1</option>
		<option>Option 2</option>
		<option>Option 3 (show a div)</option>
		</select>
	</div>

How do I set a trigger inside the menu to get Scriptaculous to make
a div appear?

     onclick="new Effect.toggle('mydiv', 'Blind', {duration:1, delay: 
0, queue:'end'}


David


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

Walt

In this case it’s only one (last) option that needs to reveal a div.

Not switching with each selection.

David

On 27 Jun 2010, at 14:01, Walter Lee Davis email@hidden wrote:

Try adding an onchange handler to the menu.

<select name="List1" size=1 onchange="switcheroo(this)">
<script type="text/javascript">
function switcheroo(elm){
   var change;
   switch($F(elm){
       case 'Option 1':
       change = 'div2';
       break;
       case 'Option 2':
       change = 'div3';
       break;
       case 'Option 3':
       change = 'div4';
       break;
       default:
       change = 'div5';
       break;
   }
   return new Effect.toggle(change,Blind',
       {duration:1, delay:0, queue:'end'});
}

That should work. You may have to fiddle with the placement of the function relative to the element in the page source code.

Walter

On Jun 27, 2010, at 6:43 AM, David Owen wrote:

In need a div to appear on the page when a specific selection if made on a menu/Item

   <div id="mylist">
       <select name="List1" size=1>
       <option>option 1</option>
       <option>Option 2</option>
       <option>Option 3 (show a div)</option>
       </select>
   </div>

How do I set a trigger inside the menu to get Scriptaculous to make a div appear?

    onclick="new Effect.toggle('mydiv', 'Blind', {duration:1, delay:0, queue:'end'}


David


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

Then you could replace the switch statement with a simple if().

if($F(elm) == 'foo') new Effect...

Walter


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

Thank

Just out of interest why did Freeway opt for Scriptaculous whereas the rest of the world appears to be favouring JQuery?

From a designers point of view JQuery seem easier to follow

David

On 27 Jun 2010, at 14:27, “waltd” email@hidden wrote:

Then you could replace the switch statement with a simple if().

if($F(elm) == ‘foo’) new Effect…

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

Prototype is a foundation toolkit. It lets you build things like jQuery from scratch. In contrast, jQuery is designed to build widgets that you can plug together like a kit. If I could make an analogy to the cabinetmaker’s shop that’s near to my heart, jQuery is like going to the Home Depot and buying some mouldings to tack on to your latest project, while Prototype is like owning a milling machine and a set of knives, and thus being able to make the exact set of decorations you need from scratch.

Walter


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

Right I see. Thanks

David

On 27 Jun 2010, at 17:17, “waltd” email@hidden wrote:

Prototype is a foundation toolkit. It lets you build things like jQuery from scratch. In contrast, jQuery is designed to build widgets that you can plug together like a kit. If I could make an analogy to the cabinetmaker’s shop that’s near to my heart, jQuery is like going to the Home Depot and buying some mouldings to tack on to your latest project, while Prototype is like owning a milling machine and a set of knives, and thus being able to make the exact set of decorations you need from scratch.

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

I can’t get this to work, no doubt because I don’t know enough about Javascript and Scriptaculous / Prototype libraries and syntax etc. i.e. not originating from a programming background.

I’ve been messing round with JQuery and with plenty of resources around to get started on, seems an easy path to follow. (Probably because the tutorial are aimed at designers)

Can anyone point to some basic examples/tutorials to get moving with Scriptaculous / Prototype
Or get a bit more basic how to accomplish this particular task?

David

On 27 Jun 2010, at 14:27, waltd wrote:

Then you could replace the switch statement with a simple if().

if($F(elm) == ‘foo’) new Effect…

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

If you could post a link to the page, we might be able to help. One thing to try first is to check your page in the W3 validator. Another is to install Firebug in Firefox, and enable the Developer menu in Safari.

Walter


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

Hi Walt,

Ok the desired effect is to have id=“redbox” appear (slide down) if option 3 is selected.

http://www.printlineadvertising.co.uk/demo/menuselect/

David

On 28 Jun 2010, at 13:27, waltd wrote:

If you could post a link to the page, we might be able to help. One thing to try first is to check your page in the W3 validator. Another is to install Firebug in Firefox, and enable the Developer menu in Safari.

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

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:

http://jsbin.com/unafo

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

I’ve been messing round with JQuery and with plenty of resources around to get started on, seems an easy path to follow. (Probably because the tutorial are aimed at designers)

Can anyone point to some basic examples/tutorials to get moving with Scriptaculous / Prototype Or get a bit more basic how to accomplish this particular task?

For a rich compendium of “stupid prototype tricks”, JavaScript legend Kangax has a great site: http://scripteka.com Note that many or most of these expect you to understand enough about hand-coding to insert the links to the various libraries and to add classnames or IDs to the elements you want to affect.

The Freeway FX Actions are all based on Prototype/Scriptaculous, and if you need something basic, they’re the first place to start. My Carousel, ScriptyAccordion, ScriptyLightbox, CalendarView and others are an attempt to make some designer-friendly packaged effects on this same platform.

The Protaculous Action and Observer are more of a hybrid, in that they expect you to find or write a snippet of Prototype-flavored JavaScript and paste it into a plain text editing window, rather than using pull-down menus and such to configure a limited set of options. In that respect, they do require more of you, but they also remove any limits from what you can choose to do.

One thing that messing around with Proto/Scripty for the last two years has definitely taught me is the finer points of the JavaScript language. It’s quite beautiful, even if it appears mysterious from the outside. I will admit it’s not for everyone, and there are some people for whom a more cookie-cutter approach is not only preferable but also correct.

It ultimately limits you, in my opinion, so I don’t recommend it as a first step. Instead, I would go with copy and paste (without understanding) first, asking questions and learning to debug second, and letting repetition of those two steps lead to true understanding. Google is FULL of P/S code, free for the copying. Prototype itself is “self-hosted”, meaning that the library in part is used to build itself. This leads to a degree of internal consistency that is rarely seen in software projects. Meaning that a kernel of understanding in one area leads to a massive leg up in another.

jQuery has seen a massive push in the last year and a half due to corporate sponsorship from Microsoft and other vendors. There is a large culture of plug-ins surrounding jQuery that allow a designer or beginning developer to chain together a complex effect using what appears to be an English-language syntax for the most part. But I would argue that this culture engenders a posture of dependence and self-editing on the part of the user, never encouraging that user to get her (metaphorical) hands dirty and figure out why and how it works. Being able to take things apart is the first step toward craftsmanship, as opposed to mere kit-assembly.

Prototype remains independent, and is still the default in professional development frameworks like Rails (from whence it sprang, not unlike Athena, as from the forehead of Zeus), Symphony, CakePHP, and others.

Using Prototype can be, as Obi-Wan once said, “…your first step into a larger world.”

Walter


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

Thanks Walt its very much appreciated.

It’s starting to make a bit more sense, slowly. I’ve been strongly following CSS as its very much part of day to day stuff because its design :slight_smile: followed by PHP. Javascript has been on the back burner for far too long. I need to spend more time looking at it, especially as its so much more design related these days.

I find if I can see the code, pick apart how it works, the light bulb can flicker on.

Thanks for the tutorial suggestions.

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:

http://jsbin.com/unafo

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

Walt,

The updated Freeway page is balking with an error :-

TypeError: Result of expression 'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

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:

http://jsbin.com/unafo

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

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.

Select list

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:

http://jsbin.com/unafo

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

Thanks. Got it.

David

On 28 Jun 2010, at 19:33, Walter Lee Davis email@hidden 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.

Select list

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:

http://jsbin.com/unafo

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

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?

http://www.printlineadvertising.co.uk/demo/menuselect/

$('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.

Select list

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:

http://jsbin.com/unafo

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

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?

Select list

$('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.

Select list

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:

http://jsbin.com/unafo

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