I know about adding, text into a field (Value: ), but is there a way of styling it? For example, rather than black, can it be grey?
Nathan Garner
FW5 Pro | MacBook Pro | Snow Leopard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The Form Element Styler Action can do this. Note that it’s a design
and usability trade-off to make a form element look like something
other than a “native” form element on the current browser/platform. I
really like the way a Safari input field looks, but someone steeped in
Windows lore might not recognize it for what it is, and overlook it as
a result. Use the styler wisely.
Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a way
of styling it? For example, rather than black, can it be grey?Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
Of course - thanks Walter.
Nathan Garner
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a design and usability trade-off to make a form element look like something other than a “native” form element on the current browser/platform. I really like the way a Safari input field looks, but someone steeped in Windows lore might not recognize it for what it is, and overlook it as a result. Use the styler wisely.
Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a way of styling it? For example, rather than black, can it be grey?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
My FreezeForm Action only sets dimensions, and doesn’t go into any
other visual stylings. You might find it to be simpler.
Walter
On Oct 14, 2010, at 10:08 AM, Nathan Garner wrote:
Of course - thanks Walter.
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a design
and usability trade-off to make a form element look like something
other than a “native” form element on the current browser/platform.
I really like the way a Safari input field looks, but someone
steeped in Windows lore might not recognize it for what it is, and
overlook it as a result. Use the styler wisely.Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a
way of styling it? For example, rather than black, can it be grey?Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
When the user clicks on the field, the text doesn’t go away?
Nathan Garner
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a design and usability trade-off to make a form element look like something other than a “native” form element on the current browser/platform. I really like the way a Safari input field looks, but someone steeped in Windows lore might not recognize it for what it is, and overlook it as a result. Use the styler wisely.
Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a way of styling it? For example, rather than black, can it be grey?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
Oh, you’re looking for Placeholder Text. That’s a completely different
animal. What you’re talking about is a design pattern where JavaScript
is used to manipulate the form input (or the native HTML5 attributes
are used where available) so that a hint appears in gray within the
field, and then when a user clicks or tabs into that field, the
placeholder text disappears and any user input is typed in black or
whatever the default form element text color might be.
I’ll see if I can dig up a snippet that does this.
Walter
On Oct 14, 2010, at 10:15 AM, Nathan Garner wrote:
When the user clicks on the field, the text doesn’t go away?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a design
and usability trade-off to make a form element look like something
other than a “native” form element on the current browser/platform.
I really like the way a Safari input field looks, but someone
steeped in Windows lore might not recognize it for what it is, and
overlook it as a result. Use the styler wisely.Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a
way of styling it? For example, rather than black, can it be grey?Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ah I see and understand now. Thanks Walter that would be a great help.
Nathan Garner
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 15:19, Walter Lee Davis wrote:
Oh, you’re looking for Placeholder Text. That’s a completely different animal. What you’re talking about is a design pattern where JavaScript is used to manipulate the form input (or the native HTML5 attributes are used where available) so that a hint appears in gray within the field, and then when a user clicks or tabs into that field, the placeholder text disappears and any user input is typed in black or whatever the default form element text color might be.
I’ll see if I can dig up a snippet that does this.
Walter
On Oct 14, 2010, at 10:15 AM, Nathan Garner wrote:
When the user clicks on the field, the text doesn’t go away?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a design and usability trade-off to make a form element look like something other than a “native” form element on the current browser/platform. I really like the way a Safari input field looks, but someone steeped in Windows lore might not recognize it for what it is, and overlook it as a result. Use the styler wisely.
Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a way of styling it? For example, rather than black, can it be grey?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
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 Oct 14, 2010, at 9:19 AM, Walter Lee Davis wrote:
I’ll see if I can dig up a snippet that does this.
How 'bout this?
<!--
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
// -->
Todd
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here’s a Gist with a full example page as well as the snippet you’d
paste into Protaculous.
To add this to your form, you would need to use the Item / Extended
dialog to add two attributes to each of your placeholder-ized form
inputs. Click once on a form field, then choose Item / Extended from
the main menu. Make sure you are targeting the input, not the div that
holds it on the page. Press New, then in the resulting sub-dialog enter:
Okay, then press New again, and enter:
Repeat this for each form element you wish to have behave this way.
Also create a style called .placeholder.default with the font color
set to your desired shade of gray. #aaa looks pretty much like an
Apple placeholder.
Now apply Protaculous to the page, and choose Prototype-Packed from
the Library picker. Click on the top Function Body button and paste in
the snippet of JavaScript from the Gist above. One instance of this,
applied to the page, will affect every form input that has both the
placeholder classname applied to it and an alt attribute.
Walter
On Oct 14, 2010, at 10:25 AM, Nathan Garner wrote:
Ah I see and understand now. Thanks Walter that would be a great help.
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 15:19, Walter Lee Davis wrote:
Oh, you’re looking for Placeholder Text. That’s a completely
different animal. What you’re talking about is a design pattern
where JavaScript is used to manipulate the form input (or the
native HTML5 attributes are used where available) so that a hint
appears in gray within the field, and then when a user clicks or
tabs into that field, the placeholder text disappears and any user
input is typed in black or whatever the default form element text
color might be.I’ll see if I can dig up a snippet that does this.
Walter
On Oct 14, 2010, at 10:15 AM, Nathan Garner wrote:
When the user clicks on the field, the text doesn’t go away?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a
design and usability trade-off to make a form element look like
something other than a “native” form element on the current
browser/platform. I really like the way a Safari input field
looks, but someone steeped in Windows lore might not recognize it
for what it is, and overlook it as a result. Use the styler wisely.Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a
way of styling it? For example, rather than black, can it be grey?Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
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
How would I apply it to the field Todd?
Nathan Garner
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 16:01, Todd wrote:
On Oct 14, 2010, at 9:19 AM, Walter Lee Davis wrote:
I’ll see if I can dig up a snippet that does this.
How 'bout this?
<!-- function clearDefault(el) { if (el.defaultValue==el.value) el.value = "" } // -->Todd
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
This would clear the field, but not change the text color or deal with
the case where the field already has a real default value, as in a
form that’s been loaded with actual values for editing by the user.
Walter
On Oct 14, 2010, at 11:01 AM, Todd wrote:
On Oct 14, 2010, at 9:19 AM, Walter Lee Davis wrote:
I’ll see if I can dig up a snippet that does this.
How 'bout this?
<!-- function clearDefault(el) { if (el.defaultValue==el.value) el.value = "" } // -->Todd
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
You Sir are a genius. Works like a dream, thank you.
Nathan Garner
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 16:03, Walter Lee Davis wrote:
Here’s a Gist with a full example page as well as the snippet you’d paste into Protaculous.
full page example.html · GitHub
To add this to your form, you would need to use the Item / Extended dialog to add two attributes to each of your placeholder-ized form inputs. Click once on a form field, then choose Item / Extended from the main menu. Make sure you are targeting the input, not the div that holds it on the page. Press New, then in the resulting sub-dialog enter:
- Name: class
- Value: placeholder
Okay, then press New again, and enter:
- Name: alt
- Value: Your Placeholder Text
Repeat this for each form element you wish to have behave this way. Also create a style called .placeholder.default with the font color set to your desired shade of gray. #aaa looks pretty much like an Apple placeholder.
Now apply Protaculous to the page, and choose Prototype-Packed from the Library picker. Click on the top Function Body button and paste in the snippet of JavaScript from the Gist above. One instance of this, applied to the page, will affect every form input that has both the placeholder classname applied to it and an alt attribute.
Walter
On Oct 14, 2010, at 10:25 AM, Nathan Garner wrote:
Ah I see and understand now. Thanks Walter that would be a great help.
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 15:19, Walter Lee Davis wrote:
Oh, you’re looking for Placeholder Text. That’s a completely different animal. What you’re talking about is a design pattern where JavaScript is used to manipulate the form input (or the native HTML5 attributes are used where available) so that a hint appears in gray within the field, and then when a user clicks or tabs into that field, the placeholder text disappears and any user input is typed in black or whatever the default form element text color might be.
I’ll see if I can dig up a snippet that does this.
Walter
On Oct 14, 2010, at 10:15 AM, Nathan Garner wrote:
When the user clicks on the field, the text doesn’t go away?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
On 14 Oct 2010, at 14:58, Walter Lee Davis wrote:
The Form Element Styler Action can do this. Note that it’s a design and usability trade-off to make a form element look like something other than a “native” form element on the current browser/platform. I really like the way a Safari input field looks, but someone steeped in Windows lore might not recognize it for what it is, and overlook it as a result. Use the styler wisely.
Walter
On Oct 14, 2010, at 9:54 AM, Nathan Garner wrote:
I know about adding, text into a field (Value: ), but is there a way of styling it? For example, rather than black, can it be grey?
Nathan Garner
http://www.austinwellsdesign.co.uk
FW5 Pro | MacBook Pro | Snow Leopard
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
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter,
I tried this procedure on my searchbox (simple site search) but it does nothing. What did I do wrong, or is there possibly a conflict between actions? The searchbox is on this page:
http://www.appadvies.nl/appblog.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you just want placeholder text and you are using a version of FW less than 6 then use the HTML5 input action
Get it at ActionsForge http://www.actionsforge.com/actions/view/264-html5-input
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks David! Will try that action. Will also upgrade to 6 and not only because 6 supports placeholder text.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options