Dynamo
6 replies to this thread. Most Recent
[Pro] How can I do this with Freeway?
I’d like to be able to do this in Freeway Pro: http://www.crucial.com/ballistix/index.aspx
You can see the crucial website allows you to select from the popup menu/list the manufacturer, then product line, then model. I’ve read through the entire Freeway manual and can’t see how you can do this. I’ve seen websites lay out horrendous lists that make it very difficult for the user to find their product, I’d like to avoid this in my website. If someone has the patience, please advise step by step how I can do this.
Thank you.
Chained pickers are a great user convenience. They are not simple to make, though. You will need to do some fairly hairy JavaScript to make them work. In the case of the Crucial site, they appear to be driven by a database lookup, too, so you would need to decide whether your data changes often enough to warrant the additional engineering.
A good place to start is by making a static mock-up, showing the first picker, then all of the different second pickers that the first picker allows you to choose in a column next to that. If your model requires a third level, then you will probably want to give up on the static model at that point, but it’s a good way to organize your thoughts up to a point.
If you can sketch out what you need like this, and post them somewhere, either I or someone else on the list can suggest the next prudent step.
Walter
Freeway user since 1997
Here’s another idea you might want to look at.
http://scripty.walterdavisstudio.com/tree.html
The starting point is a nested unordered list, with each list item containing the parent item along with a nested list containing that parent’s child options.
This might be a lot easier to lay out than a zillion picking lists. The requirement of JavaScript is the same with either this or the chained picking lists.
Walter
On Jul 11, 2010, at 9:23 AM, waltd wrote:
Chained pickers are a great user convenience. They are not simple to make, though. You will need to do some fairly hairy JavaScript to make them work. In the case of the Crucial site, they appear to be driven by a database lookup, too, so you would need to decide whether your data changes often enough to warrant the additional engineering.
A good place to start is by making a static mock-up, showing the first picker, then all of the different second pickers that the first picker allows you to choose in a column next to that. If your model requires a third level, then you will probably want to give up on the static model at that point, but it’s a good way to organize your thoughts up to a point.
If you can sketch out what you need like this, and post them somewhere, either I or someone else on the list can suggest the next prudent step.
Walter
Freeway user since 1997
Walter Have had a go at recreating your demo : http://ictlinks.co.uk/design/
I have modified the js so that you simply click on the first li to reveal the next level. Two questions : Is there a way to prevent a double click to activate the list on page entry, Is there a way to have the next element down appear in a div below the first.
Thanks Mark
On Jul 13, 2010, at 3:35 PM, ictlinks wrote:
Walter Have had a go at recreating your demo : http://ictlinks.co.uk/design/
I have modified the js so that you simply click on the first li to reveal the next level. Two questions : Is there a way to prevent a double click to activate the list on page entry,
There’s a stray observer in there that’s eating the first click. Here’s how your script should appear (and since you’re not using the message part, I took that out):
document.observe('dom:loaded', function(evt){
$('main').addClassName('finder');
$$('#main li > ul').invoke('hide');
$$('#main li').invoke('addClassName','clickable');
$('main').observe('click',function(evt){
var elm = Event.element(evt);
if(elm.hasClassName('clickable')){
var next = elm.down('ul');
Event.stop(evt);
elm.addClassName('selected');
if(next){
next.show();
}
elm.siblings().each(function(elm){
elm.removeClassName('selected');
elm.select('ul').invoke('hide');
});
elm.descendants().invoke('removeClassName','selected');
}
});
});
Is there a way to have the next element down appear in a div below the first.
I made mine to look like the Finder in Columns view. But you can do anything you like using CSS. Try removing all the CSS I added, and then build up the look you want from scratch. I used absolute positioning for the different level columns, but if you let them be relative, then the next level of options will naturally appear directly inside the parent list item when it is made visible with the show() command, so you could work with borders and margins and padding to give it the look you want.
Remove all the JavaScript while you’re doing this, so you can see the whole tree getting mushed down to look the way you want it to. Then you can turn the JavaScript back on to hide all but the top level of the tree.
Walter
Freeway user since 1997
