Ajax File Listing

Freeway
1

Walter,

Wondering how you do this with the ajax action:

“You can use CSS to style the list as you like. The list has the classname fileslist, and each item in the list will either have the class even or odd. If you set a different background-color for each of those styles, you will be able to show alternating stripes like a Finder list view or iTunes.”

I can’t see how to edit styles with a classname “fileslist” Could you give an old codger like me some step by step help???

Bill

2

Sure.

  1. Open the Styles palette, and click on the cog menu to New Style.
  2. In the resulting dialog, click into the Tag field and enter
    ul.fileslist.
  3. Tab or click into the Name field and delete whatever is there
    (style1 or similar).
  4. Very important – tab back out of the Name field and save the style.
  5. Now you can edit this style and make whatever styling features you
    like.

For example, you could use Extended to set padding and margin to 0.

Repeat the process above, but make the Tag field read ul.fileslist li. Now use the Extended dialog to remove the bullets: Click on
Extended, then New, then in the Name field, enter list-style-type,
and in the Value field, enter none. Repeat this process to add no
padding and no margin, and you will have a completely tabula rasa
container for further styling.

Now repeat again, but add the a to the end, so you have this:
ul.fileslist li a. In this style, remove the underline, change the
color, background-color, etc. Use Extended to add padding, set
display to block, etc. You can add a hover form of this style as
well, and make a nice effect when people mouse over.

The important thing here is to make all of these styles as Tag-only
styles, using the technique outlined above. When you do this, you
will see that Freeway publishes these style rules even when nothing
on the page is assigned them. Regular named styles are “pruned”
automatically, unless there is at least one instance on the page
where they are used.

Walter
On Oct 12, 2008, at 12:57 AM, Bill McCarroll wrote:

Walter,

Wondering how you do this with the ajax action:

“You can use CSS to style the list as you like. The list has the
classname fileslist, and each item in the list will either have the
class even or odd. If you set a different background-color for each
of those styles, you will be able to show alternating stripes like
a Finder list view or iTunes.”

I can’t see how to edit styles with a classname “fileslist” Could
you give an old codger like me some step by step help???

Bill

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

3

Walter,

I must be doing something that’s not quite right with your
instructions below. I went to my styles palette and created the tags
without a name as you mention.

I have the ajax files displaying on my page properly but the text
style hasn’t changed. Do I have to apply the style somehow.

I must admit, I’m a longtime freeway user but have never learned the
process of using the extended function or creating new extended
functions…how to do that properly but I dont’ think that’s the problem

Is there a tutorial to help me understand how tags work. I think
Ernie had something on this so I’ll check his website too.

Bill

On Oct 12, 2008, at 12:28 PM, Walter Lee Davis wrote:

Sure.

  1. Open the Styles palette, and click on the cog menu to New Style.
  2. In the resulting dialog, click into the Tag field and enter
    ul.fileslist.
  3. Tab or click into the Name field and delete whatever is there
    (style1 or similar).
  4. Very important – tab back out of the Name field and save the
    style.
  5. Now you can edit this style and make whatever styling features
    you like.

For example, you could use Extended to set padding and margin to 0.

Repeat the process above, but make the Tag field read ul.fileslist li. Now use the Extended dialog to remove the bullets: Click on
Extended, then New, then in the Name field, enter list-style-type,
and in the Value field, enter none. Repeat this process to add no
padding and no margin, and you will have a completely tabula rasa
container for further styling.

Now repeat again, but add the a to the end, so you have this:
ul.fileslist li a. In this style, remove the underline, change the
color, background-color, etc. Use Extended to add padding, set
display to block, etc. You can add a hover form of this style as
well, and make a nice effect when people mouse over.

The important thing here is to make all of these styles as Tag-only
styles, using the technique outlined above. When you do this, you
will see that Freeway publishes these style rules even when nothing
on the page is assigned them. Regular named styles are “pruned”
automatically, unless there is at least one instance on the page
where they are used.

Walter
On Oct 12, 2008, at 12:57 AM, Bill McCarroll wrote:

Walter,

Wondering how you do this with the ajax action:

“You can use CSS to style the list as you like. The list has the
classname fileslist, and each item in the list will either have the
class even or odd. If you set a different background-color for each
of those styles, you will be able to show alternating stripes like
a Finder list view or iTunes.”

I can’t see how to edit styles with a classname “fileslist” Could
you give an old codger like me some step by step help???

Bill

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

4

Could you please post a link to a sample page, so I can see what you’ve ended up with? To answer your question, no, you don’t have to apply these styles in order for them to apply. Note however that they will not apply in the design view, although that’s probably not what you are describing here.

Walter

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

5

Hi Walter,

Here’s the link to the page…site is still in work.

http://pacwestsfs.org/Conference/past_conferences.php

Bill

On Oct 18, 2008, at 11:18 AM, waltd wrote:

Could you please post a link to a sample page, so I can see what
you’ve ended up with? To answer your question, no, you don’t have to
apply these styles in order for them to apply. Note however that
they will not apply in the design view, although that’s probably not
what you are describing here.

Walter

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

6

Hmmmm. I must have lost my mind when I wrote the docs for this. The
classname that the Action is applying is ‘dirlist’, not fileslist. If
you change the names of your styles to reflect this, it will work.

By the way, I see a bunch of unfamiliar style elements in this:

ul.fileslist li { list-style-type:none; list-style-padding:none;

list-style-margin:none }

The only one I recognize as being a valid style parameter is list-
style-type. The other two would be expressed as simply margin and
padding. If you only want to affect the left padding and margin, then
use padding-left and margin-left.

Walter

On Oct 18, 2008, at 3:10 PM, Bill McCarroll wrote:

Hi Walter,

Here’s the link to the page…site is still in work.

http://pacwestsfs.org/Conference/past_conferences.php

Bill

On Oct 18, 2008, at 11:18 AM, waltd wrote:

Could you please post a link to a sample page, so I can see what
you’ve ended up with? To answer your question, no, you don’t have
to apply these styles in order for them to apply. Note however
that they will not apply in the design view, although that’s
probably not what you are describing here.

Walter

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

7

Perfect Walter, all now works. Just need to learn how to apply these
different style tricks.

Bill

On Oct 18, 2008, at 8:19 PM, Walter Lee Davis wrote:

Hmmmm. I must have lost my mind when I wrote the docs for this. The
classname that the Action is applying is ‘dirlist’, not fileslist.
If you change the names of your styles to reflect this, it will work.

By the way, I see a bunch of unfamiliar style elements in this:

ul.fileslist li { list-style-type:none; list-style-padding:none;
list-style-margin:none }

The only one I recognize as being a valid style parameter is list-
style-type. The other two would be expressed as simply margin and
padding. If you only want to affect the left padding and margin,
then use padding-left and margin-left.

Walter

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

8

Hello Walter,

I have applied the script to the site http://www.mv-neuhausen.de/Archiv
I have tried to set the css as you described below.
Unfortunately I was not successfull.
After I have made the index.php I couldn´t find the css in the file. My English is not the best, may be I got something wrong. Do you have any idea/help?

Peter

On 12 Oct 2008, 4:57 am, WilliamMac wrote:

Content-type: multipart/alternative;
boundary=“Boundary_(ID_x2pHuUoRFlhUeBdrLakH3w)”

Content-type: text/plain; charset=US-ASCII; format=flowed; delsp=yes
Content-transfer-encoding: 7BIT

Walter,

Wondering how you do this with the ajax action:

“You can use CSS to style the list as you like. The list has the
classname fileslist, and each item in the list will either have the
class even or odd. If you set a different background-color for each of
those styles, you will be able to show alternating stripes like a
Finder list view or iTunes.”

I can’t see how to edit styles with a classname “fileslist” Could you
give an old codger like me some step by step help???

Bill

Content-type: text/html; charset=US-ASCII
Content-transfer-encoding: quoted-printable

-webkit-line-break: after-white-space; =
">Walter,=

On 12 Oct 2008, 7:29 pm, waltd wrote:

Sure.

  1. Open the Styles palette, and click on the cog menu to New Style.
  2. In the resulting dialog, click into the Tag field and enter
    ul.fileslist.
  3. Tab or click into the Name field and delete whatever is there
    (style1 or similar).
  4. Very important – tab back out of the Name field and save the style.
  5. Now you can edit this style and make whatever styling features you
    like.

For example, you could use Extended to set padding and margin to 0.

Repeat the process above, but make the Tag field read ul.fileslist li. Now use the Extended dialog to remove the bullets: Click on
Extended, then New, then in the Name field, enter list-style-type,
and in the Value field, enter none. Repeat this process to add no
padding and no margin, and you will have a completely tabula rasa
container for further styling.

Now repeat again, but add the a to the end, so you have this:
ul.fileslist li a. In this style, remove the underline, change the
color, background-color, etc. Use Extended to add padding, set
display to block, etc. You can add a hover form of this style as
well, and make a nice effect when people mouse over.

The important thing here is to make all of these styles as Tag-only
styles, using the technique outlined above. When you do this, you
will see that Freeway publishes these style rules even when nothing
on the page is assigned them. Regular named styles are “pruned”
automatically, unless there is at least one instance on the page
where they are used.

Walter
On Oct 12, 2008, at 12:57 AM, Bill McCarroll wrote:

Walter,

Wondering how you do this with the ajax action:

“You can use CSS to style the list as you like. The list has the
classname fileslist, and each item in the list will either have the
class even or odd. If you set a different background-color for each
of those styles, you will be able to show alternating stripes like
a Finder list view or iTunes.”

I can’t see how to edit styles with a classname “fileslist” Could
you give an old codger like me some step by step help???

Bill

On 18 Oct 2008, 3:26 pm, WilliamMac wrote:

Walter,

I must be doing something that’s not quite right with your
instructions below. I went to my styles palette and created the tags
without a name as you mention.

I have the ajax files displaying on my page properly but the text
style hasn’t changed. Do I have to apply the style somehow.

I must admit, I’m a longtime freeway user but have never learned the
process of using the extended function or creating new extended
functions…how to do that properly but I dont’ think that’s the problem

Is there a tutorial to help me understand how tags work. I think
Ernie had something on this so I’ll check his website too.

Bill

On Oct 12, 2008, at 12:28 PM, Walter Lee Davis wrote:

Sure.

  1. Open the Styles palette, and click on the cog menu to New Style.
  2. In the resulting dialog, click into the Tag field and enter
    ul.fileslist.
  3. Tab or click into the Name field and delete whatever is there
    (style1 or similar).
  4. Very important – tab back out of the Name field and save the
    style.
  5. Now you can edit this style and make whatever styling features
    you like.

For example, you could use Extended to set padding and margin to 0.

Repeat the process above, but make the Tag field read ul.fileslist li. Now use the Extended dialog to remove the bullets: Click on
Extended, then New, then in the Name field, enter list-style-type,
and in the Value field, enter none. Repeat this process to add no
padding and no margin, and you will have a completely tabula rasa
container for further styling.

Now repeat again, but add the a to the end, so you have this:
ul.fileslist li a. In this style, remove the underline, change the
color, background-color, etc. Use Extended to add padding, set
display to block, etc. You can add a hover form of this style as
well, and make a nice effect when people mouse over.

The important thing here is to make all of these styles as Tag-only
styles, using the technique outlined above. When you do this, you
will see that Freeway publishes these style rules even when nothing
on the page is assigned them. Regular named styles are “pruned”
automatically, unless there is at least one instance on the page
where they are used.

Walter
On Oct 12, 2008, at 12:57 AM, Bill McCarroll wrote:

Walter,

Wondering how you do this with the ajax action:

“You can use CSS to style the list as you like. The list has the
classname fileslist, and each item in the list will either have the
class even or odd. If you set a different background-color for each
of those styles, you will be able to show alternating stripes like
a Finder list view or iTunes.”

I can’t see how to edit styles with a classname “fileslist” Could
you give an old codger like me some step by step help???

Bill

On 18 Oct 2008, 6:18 pm, waltd wrote:

Could you please post a link to a sample page, so I can see what you’ve ended up with? To answer your question, no, you don’t have to apply these styles in order for them to apply. Note however that they will not apply in the design view, although that’s probably not what you are describing here.

Walter

On 18 Oct 2008, 7:10 pm, WilliamMac wrote:

Hi Walter,

Here’s the link to the page…site is still in work.

http://pacwestsfs.org/Conference/past_conferences.php

Bill

On Oct 18, 2008, at 11:18 AM, waltd wrote:

Could you please post a link to a sample page, so I can see what
you’ve ended up with? To answer your question, no, you don’t have to
apply these styles in order for them to apply. Note however that
they will not apply in the design view, although that’s probably not
what you are describing here.

Walter

On 19 Oct 2008, 3:19 am, waltd wrote:

Hmmmm. I must have lost my mind when I wrote the docs for this. The
classname that the Action is applying is ‘dirlist’, not fileslist. If
you change the names of your styles to reflect this, it will work.

By the way, I see a bunch of unfamiliar style elements in this:

ul.fileslist li { list-style-type:none; list-style-padding:none;
list-style-margin:none }

The only one I recognize as being a valid style parameter is list-
style-type. The other two would be expressed as simply margin and
padding. If you only want to affect the left padding and margin, then
use padding-left and margin-left.

Walter

On Oct 18, 2008, at 3:10 PM, Bill McCarroll wrote:

Hi Walter,

Here’s the link to the page…site is still in work.

http://pacwestsfs.org/Conference/past_conferences.php

Bill

On Oct 18, 2008, at 11:18 AM, waltd wrote:

Could you please post a link to a sample page, so I can see what
you’ve ended up with? To answer your question, no, you don’t have
to apply these styles in order for them to apply. Note however
that they will not apply in the design view, although that’s
probably not what you are describing here.

Walter

On 19 Oct 2008, 7:18 pm, WilliamMac wrote:

Perfect Walter, all now works. Just need to learn how to apply these
different style tricks.

Bill

On Oct 18, 2008, at 8:19 PM, Walter Lee Davis wrote:

Hmmmm. I must have lost my mind when I wrote the docs for this. The
classname that the Action is applying is ‘dirlist’, not fileslist.
If you change the names of your styles to reflect this, it will work.

By the way, I see a bunch of unfamiliar style elements in this:

ul.fileslist li { list-style-type:none; list-style-padding:none;

list-style-margin:none }

The only one I recognize as being a valid style parameter is list-
style-type. The other two would be expressed as simply margin and
padding. If you only want to affect the left padding and margin,
then use padding-left and margin-left.

Walter

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

9

The CSS won’t be in the index.php. The JavaScript that inserts the
list into your page expects those styles to be set in the outer page
– the one you made in Freeway – not in the PHP.

In your Freeway document, you want to add new styles, using the Tag-
only style technique to force Freeway to publish it into the page
without having to apply it to any text.

Open the Styles palette or switch to it if it’s open but hidden.

Click on the Gear menu, and choose New Style…

Click into the Tag field, and add ul.fileslist in that field (if
you’re looking at this in email, don’t include the `` marks around the
name, they’re there to style the text in the Web view).

Tab into the Name field, and delete whatever is there, and Tab back
out again to make sure that the no-name attribute is preserved
(Freeway loves to sneak a style34 in there when you’re not looking).

Click on the Character (+) button and choose Background Color. Set
some color for the entire list. You can also add any other style you
see there or in the Paragraph (+) menu, or use the Extended dialog to
add any random CSS style pair you may want.

Save your style. Preview in a browser, and you should see the color
(and other styles) working in the list.

To make alternating stripes on your list of files, just like the
Finder does in Mac OS X (in list view), make two more styles using the
set of steps above. Tag one .even and the other .odd. (The leading
dot is critical to this working at all.) Give each of them a different
contrasting background-color. These colors will alternate down the
list of files.

To further refine the way that your list is displayed, you can take
away the bullets by creating a style as above with the Tag
ul.fileslist li (and no Name). Click the Extended button, and then
click New.

In the sub-dialog that appears, click into the Name field and enter
list-style-type then tab into the Value field and enter none. Okay
out of that sub-dialog, and press New again.

This time, enter padding in the Name and 3px 6px in the Value.
Okay, then press New.

Enter margin and 0.

This will give you an un-decorated list with enough room inside the
file list to make it look nice and readable. For more refinement,
remove the padding from the list. Control-click on the ul.fileslist
style in your Styles palette, and choose Edit Style… from the
contextual menu.

Click on Extended, and New, and enter padding and 0. Click New
again, and enter border and 1px solid #ccc. This last part will
put a thin gray line around the list of files.

Let me know how this works for you. If I find a moment this weekend
I’ll try to put a screencast together about this styling technique.

Walter

On May 21, 2009, at 3:27 PM, Peter Morlock wrote:

After I have made the index.php I couldn´t find the css in the file.
My English is not the best, may be I got something wrong. Do you
have any idea/help?

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

10

Hi Walter

I followed your instruction and published this page:

http://www.mv-neuhausen.de/Archiv/archiva.html

I received the following message from your script:
Please enable JavaScript in your browser, or click here for a list of files.

Java Script is enabled in my browser.
If I click the file list appears, but without styles.

Could you please check the Source code of the page if this correct?

Peter

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

11

Try publishing again, this time with the Control key held down as you
do. The page is being made correctly, but the Prototype library is not
being properly uploaded to your server in the process. This could be
due to it being renamed because another file of the same name exists
in the same folder that you are publishing the site into.

One other way to fix this is to empty the folder (on your Mac) where
you publish the local files for your site. Then publish in Freeway
again and upload from Freeway (this will get all the files on your
server exactly the same as the local folder).

Walter

On May 22, 2009, at 2:59 PM, Peter Morlock wrote:

Hi Walter

I followed your instruction and published this page:

http://www.mv-neuhausen.de/Archiv/archiva.html

I received the following message from your script:
Please enable JavaScript in your browser, or click here for a list
of files.

Java Script is enabled in my browser.
If I click the file list appears, but without styles.

Could you please check the Source code of the page if this correct?

Peter

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

12

Perfect now it works.

Sorry to bother again. Where do I set the linkstyles in this case?

Peter

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

13

In Freeway, in the page where you have placed the Action. Make a new
style that has the tag

.fileslist ul a

and no name, and style that how you want a link to appear.

If you want to have a hover effect, make a second style that has the tag

.fileslist ul a:hover

and style that up how you want a hover to look. If you don’t care
about these styles being different than the rest of your page, you can
also just set a style for links on the entire page, using the
Inspector, and the links made by this Action will pick up that default
style. When you’re all done, the links become a part of the page you
place the Action in, so anything you’ve done to modify defaults for
that page will work.

Walter

On May 22, 2009, at 5:19 PM, Peter Morlock wrote:

Perfect now it works.

Sorry to bother again. Where do I set the linkstyles in this case?

Peter

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

14

Sorry, I am typing faster than I can think here. Leave out the UL part
of this.

.fileslist a
.fileslist a:hover

Walter

On May 22, 2009, at 6:25 PM, Walter Lee Davis wrote:

In Freeway, in the page where you have placed the Action. Make a new
style that has the tag

.fileslist ul a

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

15

You are a star!
Many thanks!

Now it is time to go to bed. In Germany it is 1 am.

Peter

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