[Pro] Sorting

Is there a way to setup a sort so that a viewer can sort a page by various parameters (price, material, color, etc)


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

If you have your data in a table (a real drawn table using the table tool) then this can be done using JavaScript. If you are getting your tabular data from a database, then I would look down that alley first, since that gives you much more precise control.

Select your table in Freeway (handles showing on the corners and sides) and open the Item / Extended dialog. Click New (and make sure that the

tab is selected when you do that) and add the following Name/Value pair:

  • Name: class
  • Value: sortable

Now apply the Protaculous Action to the page and choose prototype-packed from the Library picker.

Finally, you need to attach the TableKit library to your page. Be sure you have the External JavaScript Action installed, then download the file here: http://www.millstream.com.au/upload/code/tablekit/tablekit1.2.2.zip Unzip the file, and look inside it for tablekit.js (nested a few levels down. Use the External JavaScript Action to add that file to your page, in the Before /HEAD section. That is literally all you need to get click-the-headers-to-sort working. If you also want to add the little up-down arrows to your page, you’ll need to look through the demo here: http://www.millstream.com.au/view/code/tablekit/ and get the CSS and images you’ll need for that.

Walter

On Dec 29, 2012, at 5:24 PM, 4csons wrote:

Is there a way to setup a sort so that a viewer can sort a page by various parameters (price, material, color, etc)


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


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

Walter

That’s not exactly what I was looking for and that’s because I was not more specific in request for information.

I have a single row table and I want to sort it using (preferably) a drop down menu to sort by various parameters in each cell.

The table I am duplicating in Freeway is shown in the website pensbylarry.com. It is a website developed in GoLive which I am trying to update. It does not have a search capability but I was hoping to have one in the new site.

Larry


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

Maybe you might like the Filter method, like this page: Kangax’s Quick Filter

Downloadable example is here: http://scripty.walterdavisstudio.com/filter.freeway.zip

Walter

On Dec 29, 2012, at 6:58 PM, 4csons wrote:

Walter

That’s not exactly what I was looking for and that’s because I was not more specific in request for information.

I have a single row table and I want to sort it using (preferably) a drop down menu to sort by various parameters in each cell.

The table I am duplicating in Freeway is shown in the website pensbylarry.com. It is a website developed in GoLive which I am trying to update. It does not have a search capability but I was hoping to have one in the new site.

Larry


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


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

Very interesting Walter but this then begs the question - how in FW can you add the thead and tfoot designations?

David


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

If you select one of the cells in the table and click open the Row segment of the Cell Inspector, you can check the “Header” checkbox, which will make a th for each header cell.

I don’t think you can make a thead or tfoot directly in Freeway without the Markup interface. Again, in the Row segment of the Inspector, click Markup. Use the Before dialog to add and the After to add .

Walter

On Dec 29, 2012, at 7:34 PM, DeltaDave wrote:

Very interesting Walter but this then begs the question - how in FW can you add the thead and tfoot designations?

David


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


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

Ouch! I feel like I’m watching two Olympic ping pong players. It’s all a blur.

Newbie Larry


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

OK - While I have my Amount and Person columns sortable my Date column is defying me.
I have used the method outlined and added class=date-au (as the closest to my requirements) - but it is not sorting correctly.

Any ideas why not?

http://www.deltadesign.co/fw_examples/walts_scripts/sortable.html

D


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

Try removing the P tags from that column, so the date is the only thing in the td. I think that’s the issue. Here’s a quickie Action that will do that for the entire table.

If you’re creating your text style through Freeway’s normal methods, note that this will strip off all of the style (since it’s carried by the P tag). You’ll need to create a CSS style that accesses the table cells through the cascade, like #item42 td.

Walter

On Dec 29, 2012, at 8:34 PM, DeltaDave wrote:

OK - While I have my Amount and Person columns sortable my Date column is defying me.
I have used the method outlined and added class=date-au (as the closest to my requirements) - but it is not sorting correctly.

Any ideas why not?

http://www.deltadesign.co/fw_examples/walts_scripts/sortable.html

D


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


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

Thanks Walter but that doesn’t seem to have made any difference.

Any other ideas.

I will try using US date format but that doesn’t come naturally.

D


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

OK - I think that missing digits may have upset the apple cart ie 4/5/2012 instead of 04/05/2012.

That in conjunction with your action?

We seem to be sorted now!

D


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

Okay, now make sure you have a thead and tbody (use the Markup dialog in the Table Inspector), and it will work. Then try it again after removing the Action. I tested this in the Safari Web Inspector (just edited the DOM). Works perfectly if you have a fully-standard table.

Walter

On Dec 29, 2012, at 9:30 PM, DeltaDave wrote:

Thanks Walter but that doesn’t seem to have made any difference.

Any other ideas.

I will try using US date format but that doesn’t come naturally.

D


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


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

Works perfectly if you have a fully-standard table.

So are you saying a FW created table isn’t fully-standard?

D


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

It passes validation, but the spec says that a table must have a tbody and optionally may have a thead. Safari will add these to its DOM of the table if they aren’t there, but these auto-added versions don’t behave exactly the same way as the real thing from a scripting perspective.

I just extended the Action to add these tags in there, give it another try.

Walter

On Dec 29, 2012, at 10:04 PM, DeltaDave wrote:

Works perfectly if you have a fully-standard table.

So are you saying a FW created table isn’t fully-standard?

D


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


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

That certainly adds the thead OK and makes the table behave better but the root of the date not sorting problem was definitely the missing digits in the dates.

This exercise has shown the advantages of having a more fully constructed/semantically formed table.

A valuable lesson - thank you.

D


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

I remember a method I used on the Valveco.com project some time ago. I came across a blogpost from Ernie Simpson; sortable items (http://cssway.thebigerns.com/legacy/sortables/). This is based upon a post from Joost de Valk (SEO for everyone • Yoast).

Probably out-dated looking at today’s techniques, but never the less …


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

Lol, that was ages ago, yeah? Version 4. Header-structures are easier to
make now, but we still have a ways to go to accommodate users who want true
html data table structures.


Ernie Simpson

On Sun, Dec 30, 2012 at 6:53 AM, Richard van Heukelum <
email@hidden> wrote:

I remember a method I used on the Valveco.com project some time ago. I
came across a blogpost from Ernie Simpson; sortable items (
Thebigerns.com). This is based upon a
post from Joost de Valk (SEO for everyone • Yoast).

Probably out-dated looking at today’s techniques, but never the less …


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


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

Here’s the beginnings of an Action for this TableKit sorting.

Beware: opinionated software ahead! You will need to un-learn many Freeway-isms if you want to enjoy this Action to the fullest. There’s an Action to apply to your table, and another to apply to any headers where you want to use something other than the default text sort.

To begin with, it will strip out all of your table’s text styling, because it strips out any single inline paragraph tags contained in the cells, so unless you create CSS styles for .sortable td and .sortable th, you won’t have any control over anything from normal inline styling. It also removes the height property from the table wrapper DIV and the table cells. The table Action will magically create the TH tags on the first row, in case you forgot to do that in Freeway. It will also add a gray background to the header and a gray 1px rule to the bottom only of each td. You can override any of this by looking at the styles in http://cdn.freewaypro.com/tablekit/1.3/css/style.css and creating matching styles in the head of your page.

Walter

On Dec 30, 2012, at 8:40 AM, Ernie Simpson wrote:

Lol, that was ages ago, yeah? Version 4. Header-structures are easier to
make now, but we still have a ways to go to accommodate users who want true
html data table structures.


Ernie Simpson

On Sun, Dec 30, 2012 at 6:53 AM, Richard van Heukelum <
email@hidden> wrote:

I remember a method I used on the Valveco.com project some time ago. I
came across a blogpost from Ernie Simpson; sortable items (
thebigerns.com). This is based upon a
post from Joost de Valk (SEO for everyone • Yoast).

Probably out-dated looking at today’s techniques, but never the less …


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


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


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

On 29 Dec 2012, 9:24 pm, 4csons wrote:

Is there a way to setup a sort so that a viewer can sort a page by various parameters (price, material, color, etc)

Well as a Newbie I certainly got lost in the weeds when I started this thread!

Larry


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

Very impressive Walter.

I will dive in and have a look at this.

D


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