Displaying the Cllick State of a Button

If I create a three part button in Freeway 5 Pro, one part for “normal”, one for “over”, and one for “click”, the click image appears when the button is released, not when the button is pressed. I’ve noted that it is common in sites created outside of Freeway to display the click state when the button is pushed and to take the action when the button is released. Is this possible to do in Freeway, and if so, how?


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

A bit of clarification…

My expectation is that the “click” appearance behavior should occur when the mouse button is pressed, not when the mouse button is released. An example of what I consider correct behavior can be seen on the Apple website at <www.apple.com>. There the appearance of the menu changes when the mouse button is pressed while the cursor is over one of the menu buttons. The associated action only occurs only if the mouse is released while the cursor is still over that menu button.


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

in my preceding posting somehow the link to the Apple website, http://www.apple.com/, got elided. It did show up in the draft of my posting before it was sent.


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

What follows is a followup posting to a usenet thread I initiated on the same topic as in this thread here in Freeway Talk. The question I ask is if it is possible to create the behavior described below in Freeway, and if so, how?

====================

There’s also the (IMHO much more important) question of what most users
will expect, based on their total computing experience, regardless of
whatever varied browser or other program authors may give them.

Or even, what ought to be this behavior, based on just plain public
policy concerns.

Speaking for myself, I’ve always understood that even after I do a mouse
down on any button, or menu command, or dock item, or anything, in any
app or browser, or whatever, I can always back out of or escape from
whatever that interface element is set up to do by moving the point off
that element to a “safe” spot on the window, and then releasing it.

I strongly support that as what I think ought to be a universal mouse
characteristic: there ought to always be an escape route from any
mouse over or mouse down.

Mouse over or mouse down can give the user “pop up” information, but
neither mouse over nor mouse down ought to ever initiate any
potentially irreversible action.

And of course mouse over can be a good thing (e.g., tool tips), or a bad
and undesirable thing (big ad pops up, covering up the material you were
reading).


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

Sometime around 5/5/08 (at 11:03 -0400) James L. Ryan said:

What follows is a followup posting to a usenet thread I initiated on
the same topic as in this thread here in Freeway Talk. The question
I ask is if it is possible to create the behavior described below in
Freeway, and if so, how?

The behaviour described below covers basic user interface guideline
advice as found in respected tomes such as Apple’s own document, Tog
on Interface, documents from Sun and others, possibly even Microsoft
(!) ;-), and it is quite correct: a mouseDown event should not
(except in unspeakably weird or seriously non-standard circumstances
or environments) produce a potentially irreversible action.

Unfortunately, my brain is apparently not firing on all cylinders, as
I can’t actually see what it is that you’re asking for ‘below’. This
is how things work in web browsers and in Freeway design, at least
as far as normal HTML link and JavaScript code behaviour goes.

If you are asking about the issue you raised on Saturday when
starting this thread, the answer is nope, at the moment the ‘click’
part of Freeway’s rollover doesn’t get actioned before the mouseUp
part of the overall ‘click’ event. This means you don’t see it before
moving to the target of the link, if a link is applied to the
rollover item. This is normal basic JavaScript rollover behaviour,
although there are obviously more sophisticated ways of controlling
this too - one of which is shown in the Apple.com site that you
pointed out.

I’m with you entirely regarding wanting the option to craft a
rollover that shows a mouseDown event as well as the less useful but
more standard ‘after the click’-style mouseUp/onClick event.

(I wish the JavaScript language had gone with the more explicit
mouseDown, mouseUp concepts from the start and never touched the more
ambiguous onClick thing. But that’s how it is.)

I would very much like to do this myself in my web constructions. It
would allow my Freeway-made web pages to be more ‘web app’ in
feeling, with a UI that responds in a more sophisticated,
application-like way.

k


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

Hmmm. An actual example would help debug the actual coding James. It “sounds” as if you are using scripting language (onclick, etc.) but I cannot be sure. In CSS the “active” pseudo-class is responsible for the appearance of a link as it is clicked. http://www.w3schools.com/Css/pr_pseudo_active.asp

Freeway has had some trouble displaying link styles properly as the link pseudo-classes must appear in an exact order in the stylesheet. It’s my impression the Links pane of the Inspector in version 5 helps overcome that problem.

On Sat, May 3, 2008 at 7:57 PM, James L. Ryan wrote:

If I create a three part button in Freeway 5 Pro, one part for “normal”, one for “over”, and one for “click”, the click image appears when the button is released, not when the button is pressed. I’ve noted that it is common in sites created outside of Freeway to display the click state when the button is pushed and to take the action when the button is released. Is this possible to do in Freeway, and if so, how?


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

The Big Erns,

Here is what I am doing…

a) Create three graphic images of the same size and shape, one for “normal”, one for “over”, and one for “click”.

b) Align the three graphic images and then group them.

c) Apply a rollover action to the group.

d) Open the Actions window and apply the appropriate checkmarks, “normal”, “mouseover”, and “click”; one checkmark for each graphic.

e) Select the target using the link selector located at the bottom of the main Freeway window.

I’m now wondering if there is a different method of selecting the link that I should be using.

I have a copy of the Freeway version of the site on my iDisk within the ECR folder of my taliesinsoft Public folder. The site itself can be seen at

http://homepage.mac.com/taliesinsoft/ECR/

Any help you can offer will be most appreciated!

Jim


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

On 5 May. 2008, 4:37 pm, thatkeith wrote:

[responding to an earlier posting of mine in this thread]

Unfortunately, my brain is apparently not firing on all cylinders, as
I can’t actually see what it is that you’re asking for ‘below’. This
is how things work in web browsers and in Freeway design, at least
as far as normal HTML link and JavaScript code behaviour goes.

What I want is for the behavior of a button to be as in the Apple website at http://www.apple.com/ where a rollover action is not committed until both the mouse down and the subsequent mouse up occur within the button.

As things currently stand the rollover action is committed at the moment the mouse down occurs within the button.

In a nut’s hell, my question boils down to whether the behavior I desire is possible using Freeway, and if so, just what do I need to do to invoke it?


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

Don’t use rollover action - Apple didn’t. More about this on the way. http://www.thebigerns.com/freeway/workbench/fw5_jryan-menu/

On Tue, May 6, 2008 at 12:06 PM, James L. Ryan wrote:

What I want is for the behavior of a button to be as in the Apple website at <http://www.apple.com/> where a rollover action is not committed until both the mouse down and the subsequent mouse up occur within the button.

As things currently stand the rollover action is committed at the moment the mouse down occurs within the button.

In a nut’s hell, my question boils down to whether the behavior I desire is possible using Freeway, and if so, just what do I need to do to invoke it?


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Ernie,

Many, many thanks for taking the time to paraphrase the ECR site! I’ll be quickly taking a look at the underlying Freeway structure. I really like, really, really like, the appearance you’ve created!

I should point out that the design of the ECR site we’ve been discussing is not mine but is my paraphrasing, with a few minor variations, the current ECR site which can be seen at http://www.ecraustin.org/web/index.view.

Jim


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

Yes, I am a truly narcissistic designer, enamored of my own work. :slight_smile: I use your material because it is pertinent to you, and hope the relevance in the structure make more sense because of it. However, I am trying to move away from using material extracted from the examples shown to me, mainly because of all the wonderful ‘Thank You’ emails freewayers send me, a few start with the words “Cease and Desist”. Examples like this benefit the Freeway community at large, so should you notice anything that you or someone you know might object to having a place of permanence on the web, please let me know and I will fix it.

On Tue, May 6, 2008 at 12:33 PM, James L. Ryan wrote:

Many, many thanks for taking the time to paraphrase the ECR site! I’ll be quickly taking a look at the underlying Freeway structure. I really like, really, really like, the appearance you’ve created!

I should point out that the design of the ECR site we’ve been discussing is not mine but is my paraphrasing, with a few minor variations, the current ECR site which can be seen at <http://www.ecraustin.org/web/index.view>.


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Sometime around 6/5/08 (at 15:06 -0400) James L. Ryan said:

What I want is for the behavior of a button to be as in the Apple
website at http://www.apple.com/ where a rollover action is not
committed until both the mouse down and the subsequent mouse up
occur within the button.

As things currently stand the rollover action is committed at the
moment the mouse down occurs within the button.

Actually, nothing happens during the mouseDown event. It is the
mouseUp event that triggers the JavaScript ‘onClick’ event and the
click state change. The trouble is, if there’s a link attached as
well, you go there and the click state of the rollover button never
gets shown.

What you want, I believe, is to have an option in the rollover that
gets triggered with the mouseDown event. This, it doesn’t have. Sorry!

Apple’s method uses some clever-looking JavaScript, rather more than
the basic JS rollover’s onClick. I’d really like this too, but it
isn’t something I have time to try working out myself at the moment.
I wonder if some clever Action writer might feel like tackling this
one?

k


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

Apple is using CSS styling, using this image and CSS positioning on the link states:
http://images.apple.com/global/nav/images/globalnavbg.gif

I’m squeezing out an explanation of my example – almost there:
http://www.thebigerns.com/freeway/workbench/fw5_jryan-menu/

On Tue, May 6, 2008 at 1:49 PM, Keith Martin wrote:

Apple’s method uses some clever-looking JavaScript, rather more than
the basic JS rollover’s onClick. I’d really like this too, but it
isn’t something I have time to try working out myself at the moment.
I wonder if some clever Action writer might feel like tackling this
one?


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Sometime around 6/5/08 (at 13:58 -0700) Ernie Simpson said:

Apple is using CSS styling, using this image and CSS positioning

Ace. Thanks for the correction about the JS vs CSS method too; I just
took a brief glance at the Apple code and misunderstood what was
going on. :slight_smile:

k


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

WARNING - THIS IS REALLY LONG (SORRY) AND THAT WILL MAKE SOME ANGRY. PLEASE DON’T MAKE IT WORSE BY QUOTING IT ALL WHEN REPLYING.

Thanks for the example James – As I suspected you are using javascript rollovers.

Not that there is anything wrong with that… except the javascript called here doesn’t support the ‘active’ pseudo-class, which is what controls the link appearance as it is clicked. The menu you mentioned at Apple.com uses this image (http://images.apple.com/global/nav/images/globalnavbg.gif) and CSS methods to do its thing. So I redid the menu using CSS… Here is the example:

http://www.thebigerns.com/freeway/workbench/fw5_jryan-menu/

Pardon me if I am enamored with my own sense of style, but the functionality should be the same :slight_smile: When I started dissecting your page, I noticed some things I felt would become problematic - namely the overabundance of graphic text. But we’ll get to that later.

Making a Real Text CSS menu is easier with FW5 – type a list of items, select, then go to the List pane of the Inspector and indent once. Choose ‘round bullets’ and a new style is created for you in the Style Menu. Edit the new style and give it a better name than ‘style 1’ (I named mine ‘menu’.

A list contains two parts - the list container and the list items (text) inside it. Styling the .menu style affects some of both because the individual list items inherit some attributes from the list container. Setting the Character attributes of Font, Style and Size affect the list item text. The Background Color sets that attribute for the list container. Paragraph Alignment affect list item text while Indents and Space Above/Below affect only the list container. Using the Extended style button we enter some custom code to remove the bullets (without changing the list structure) and add some padding which we’ll use later when we apply links to the list item text.

To affect only the list items themselves, you must create a new, very specifically named style – ul.menu li – see how I named it in my example as it can be tricky. This type of name is CSS shorthand for "apply only to List Items (li) found in Unordered Lists (ul) that also have the class of Menu (.menu). Rather technical, but every modern browser can figure it out in less than a heartbeat. Now, since I want a horizontal menu I can use the Extended attribute ‘display:inline’ to make the list items follow each other horizontally – along with a little left margin space between them to give them room from each other.

In the last version of Freeway Pro, you would have had to written more specially named custom CSS styles to set the link states for this menu, probably hand coding them in the document markup due to the way Freeway orders the style sheet. However, in version 5 you have a much improved Links pane in the Inspector to help you.

Selecting the div/box the menu is in, set the colors for the individual link states. This will create custom link styles for that box only. Cool. I admit it took me some trial and error to work out the link-underline buttons, but most folk can probably figure it out before the kettle boils. Clicking the More button in the Links pane brings up a sort of mini-styles window, just for the link states. And, an extended style button for fussy tweakers like me :slight_smile: Using this improved Link pane not only lets you target which links are affected, but also makes Freeway write the link code in its proper order. Because the Link state is the first in the normal order and governs normal link appearance, I didn’t need to add extended attributes to the other link states as the Link attributes are inherited down the line until purposely contradicted. The extended padding give a little more area to each link so that users can have a larger target area to click instead of just the text itself.

That finishes the main topic – here are two other simple CSS goodies to boot.

As I mentioned earlier, the page suffers from a total lack of real text. This means that people who need machines to read the page will see nothing. Search engines and web programs that can help steer users to the page cannot see the content either. And the user who wants to copy some helpful verse or homily to send to a friend or relative will only be able to grab an image, which become an attachment that is filtered by the spam blocker of the intended. Of course the easiest way to solve that problem is to use actual text whenever possible. Easy?

I’m willing to accept there is a severely limited number of available webfonts, but even I can agree that sometimes graphic fonts just look better… especially in a headline. But if I use a graphic headline, the semantic usefulness of the headline tag is lost. So in this example, I relied on an a variation of an image replacement technique known as Phark. Image Replacement is supposed to replace text with an image… but in this case I put the image in the header image, and the text in a separate box. The text is given a giant negative left-margin value to remove it from sight. This lets me use the fancy headlines, keep my semantic structure and allow anything not viewing the page visually “understand” the context of the content. Yay!

The second goodie is the left column - the one for verses. It’s basically a colored box, but as content is added or enlarged in the main box, the verse box will lengthen or shorten to match. Both boxes are vertically flexible, but the verses box is a child of the main box. The overflow of the main box is set to hidden. The verses box has an enormous amount of padding on the bottom with an equally enormous negative margin as well. The footer is also a child box of the main box, placed 0px from its bottom. These are techniques I’ve used quite often, but usually as inline div items. With FW5, I can simply place them as children. This I like.

DO NOT QUOTE ALL THIS WHEN REPLYING, PLEASE.

On Mon, May 5, 2008 at 2:35 PM, James L. Ryan wrote:

Here is what I am doing…


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Sometime around 6/5/08 (at 14:22 -0700) Ernie Simpson said:

WARNING - THIS IS REALLY LONG (SORRY) AND THAT WILL MAKE SOME ANGRY.
PLEASE DON’T MAKE IT WORSE BY QUOTING IT ALL WHEN REPLYING.

Okay - all I want to say is Wow. and Thanks. This is one of the most
amazing and thorough how-to posts I’ve read here in quite a while.

I’m going to go digest this and play a while now…

k


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

On 6 May. 2008, 10:28 pm, thatkeith wrote:

Sometime around 6/5/08 (at 14:22 -0700) Ernie Simpson said:

WARNING - THIS IS REALLY LONG (SORRY) AND THAT WILL MAKE SOME ANGRY.
PLEASE DON’T MAKE IT WORSE BY QUOTING IT ALL WHEN REPLYING.

Okay - all I want to say is Wow. and Thanks. This is one of the most
amazing and thorough how-to posts I’ve read here in quite a while.

I’m going to go digest this and play a while now…

Well, you are not the only one who is going to digest Ernie’s posting. I will certainly say it is great to receive the kind of help I’m receiving here in the Freeway discussions.


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

Nice job of harvesting there Ern! :0)


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