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.
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.
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.
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.
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.