Sometimes form elements will have a value in them like ‘Search’ etc.
and when you click in the field the text disappears automatically so
you don’t have to manually delete it. How does one accomplish that?
Todd
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Oct 29, 2007, at 4:11 PM, Todd wrote:
Sometimes form elements will have a value in them like ‘Search’ etc.
and when you click in the field the text disappears automatically so
you don’t have to manually delete it. How does one accomplish that?Todd
File under Stupid JavaScript Tricks:
The Prototype Way:
//load prototype.js, naturally
//check to see if the form element is there and start watching it
Event.observe(window,'load',function(){
if($('search')){
var DEFAULT = 'Search...';
var elm = $('search');
Event.observe(elm,'focus',function(){
if (elm.getValue() == DEFAULT) elm.clear();
});
Event.observe(elm,'blur',function(){
if (elm.getValue() == '') elm.value = DEFAULT;
});
}
});
The Freeway Way:
Draw a text input element, click on it so it’s highlighted, and
select Item > Extended from the main menu.
Click New in the Exended dialog.
Add the event pairs:
onblur
this.value = (this.value == ‘’) ? ‘Search…’ : this.value;
onfocus
this.value = (this.value == ‘Search…’) ? ‘’ : this.value;
Okay out of the tall stack of dialog boxes, and publish.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Oct 29, 2007, at 4:11 PM, Todd wrote:
Sometimes form elements will have a value in them like ‘Search’ etc.
and when you click in the field the text disappears automatically so
you don’t have to manually delete it. How does one accomplish that?Todd
Also, there used to be an Action to do this, but I don’t know who
wrote it or if it’s usable in Freeway 4. I am thinking this was
around Freeway 2 era or so… I just looked for my copy and can’t
find it.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I see Walt beat me to this – damn my slow hunt-and-peck typing skills! 
Todd, you and I talked about this awhile back – here’s the pastie
code example:
http://pastie.caboo.se/69185
On 10/29/07, Todd wrote:
Sometimes form elements will have a value in them like ‘Search’ etc.
and when you click in the field the text disappears automatically so
you don’t have to manually delete it. How does one accomplish that?
–
Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Really? Well, there’s another Ernie pearl of wisdom that slipped by me. Sorry 'bout that.
Thanks,
Todd
On Oct 29, 2007, at 5:31 PM, Ernie Simpson wrote:
Todd, you and I talked about this awhile back – here’s the pastie
code example:
Here is a more intense application of some labels for input fields:
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ernie, I had a quick look at your pastie, and noticed something you could do to optimize your code.
Inside an event handler (like onblur, onfocus, onwhatever…) the magic keyword this stands in for whatever object called that handler.
So your tortured (but perfectly correct) syntax of
document.forms[0].fieldname.value
could be more clearly written as
this.value
The result of this simplification is also much more portable code. If you were to copy and paste your extension into a different form field, you would need to change fieldname to match the new field name. Using this steps neatly around that entire problem. One handler can work anywhere.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walter – that’s perfect and much appreciated. You’re right, I
had to change the variable names to match its every placement. This
will be much easier than my rote approach.
Thanks for revealing this.
On 10/31/07, waltd wrote:
Ernie, I had a quick look at your pastie, and noticed something you could do to optimize your code.
Inside an event handler (like onblur, onfocus, onwhatever…) the magic keyword
thisstands in for whatever object called that handler.So your tortured (but perfectly correct) syntax of
document.forms[0].fieldname.valuecould be more clearly written as
this.valueThe result of this simplification is also much more portable code. If you were to copy and paste your extension into a different form field, you would need to change
fieldnameto match the new field name. Usingthissteps neatly around that entire problem. One handler can work anywhere.
–
Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The Freeway Way:
Draw a text input element, click on it so it’s highlighted, and
select Item > Extended from the main menu.Click New in the Exended dialog.
Add the event pairs:onblur
this.value = (this.value == ‘’) ? ‘Search…’ : this.value;onfocus
this.value = (this.value == ‘Search…’) ? ‘’ : this.value;Okay out of the tall stack of dialog boxes, and publish.
For the life of me, I cannot get this to work. I followed the advice exactly. Here is a screen shot showing what I did:
Look at my SS. At left you see Freeway. Right is Safari. At left you see that I have added the Extended attributes to the text field as Walter directed. But alas, in Preview and in the Browser, you cannot see the “Search…” inside the field.
Perhaps even more annoying is the length of that text field. I’ve always been disturbed by this. Indeed, I dislike anything that is a slap in the face to WYSIWYG. The width of the field is always shorter in Preview/Browsers than it is in Freeway’s display mode. That always leaves a huge gap between the right edge of the text field and whatever Submit button you want at the very right of the field.
Simply put, I’d like to eliminate the button headache altogether and have some faint gray text inside a search field that looks pretty much exactly how the search field of this forum looks (in the top right of this forum). How do I accomplish this in Freeway?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You’re really close.
The only thing which should be in the Name side of things is the
event. So where you have currently:
| name | value |
|---|---|
| onfocus this.value | (this.value == … |
Make it look like this:
| name | value |
|---|---|
| onfocus | this.value = (this.value == … |
What you’re looking at there in the right side of things is called a
ternary operator. It’s a way of writing out an if/else statement
without the if or the else.
foo = (foo > 3) ? 'bar' : 'baz';
if (foo > 3){
foo = 'bar';
}else{
foo = 'baz';
}
Those two constructions are equivalent.
As to the field dimensions, you can use the FreezeForm Action[1] to
make them look precisely the same in the Preview (and any browser) as
they do in the Design view in Freeway.
Walter
On Jan 15, 2009, at 9:41 PM, JDW wrote:
The Freeway Way:
Draw a text input element, click on it so it’s highlighted, and
select Item > Extended from the main menu.Click New in the Exended dialog.
Add the event pairs:onblur
this.value = (this.value == ‘’) ? ‘Search…’ : this.value;onfocus
this.value = (this.value == ‘Search…’) ? ‘’ : this.value;Okay out of the tall stack of dialog boxes, and publish.
For the life of me, I cannot get this to work. I followed the
advice exactly. Here is a screen shot showing what I did:
http://www.kiramek.com/21test95/WalterD_fieldAdvice.pngLook at my SS. At left you see Freeway. Right is Safari. At left
you see that I have added the Extended attributes to the text field
as Walter directed. But alas, in Preview and in the Browser, you
cannot see the “Search…” inside the field.Perhaps even more annoying is the length of that text field. I’ve
always been disturbed by this. Indeed, I dislike anything that is a
slap in the face to WYSIWYG. The width of the field is always
shorter in Preview/Browsers than it is in Freeway’s display mode.
That always leaves a huge gap between the right edge of the text
field and whatever Submit button you want at the very right of the
field.Simply put, I’d like to eliminate the button headache altogether and
have some faint gray text inside a search field that looks pretty
much exactly how the search field of this forum looks (in the top
right of this forum). How do I accomplish this in Freeway?
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, thank you for the speedy reply!
Unfortunately, I have to report that the changes you suggest still do not work. Here is yet another SS for you:
As to the length of the field, yes I completely forgot about that Action. Perhaps it was subconsciously intentional. For I have long wanted the functionality of that Action to be implemented in text fields by default. For who wants to draw a field in FW and then have it look very different in the browser?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Last guess would be that you are copying and pasting the code from the
Web, and have ended up with curly apostrophes instead of dumb
typewriter single-quotes. Take a careful look at the text in the
dialog. For best chances, copy and paste it into BBEdit and run Text /
Straighten Quotes on it, then paste it back into Freeway.
Walter
On Jan 15, 2009, at 10:30 PM, JDW wrote:
Walter, thank you for the speedy reply!
Unfortunately, I have to report that the changes you suggest still
do not work. Here is yet another SS for you:http://www.kiramek.com/21test95/WalterD_fieldAdvice2.png
As to the length of the field, yes I completely forgot about that
Action. Perhaps it was subconsciously intentional. For I have long
wanted the functionality of that Action to be implemented in text
fields by default. For who wants to draw a field in FW and then
have it look very different in the browser?
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, yes I was copying and pasting. (Why type it again when you can do the easy thing, right?) I checked more closely and found you are correct about the curly quotes. Following your advice, I used TextWrangler to straighten everything and then copied out of TW and pasted into the appropriate dialog in FW. Still a no-go though. Not sure why.
I did receive your email with the FW doc though, so I will email you my doc to see what you think. Perhaps the little splattering of Page Markup I have is conflicting.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Todd,
Did you ever get to the bottom of this?
I’m trying to achieve the same ‘Search field’ look on my site.
Grey text in ‘text field’ that disappears once clicked inside to input your search text!
Worm
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sorry I mean JDW, did you resolve this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes, I did resolve it thanks to Mr. Walter Davis sending me a Freeway document offline back in January of this year. His technique is what is used for the Safari style search on this Freewaytalk.net site. It uses the Protaculous action, which can be downloaded at Actionsforge.com. I made some tweaks to it so it would work well for me, and I am now using it at www.kiramek.com.
Walter did give me his file and we never discussed permission about sharing it publicly, so it would be nice if Walter would chime in here and let everyone know if it is okay to release it. That is the only reason I am not posting the entire block of code for you here in this thread.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Post away, James!
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I take back what I said about Protaculous. Currently, Freeway 5.4.2 Pro (and earlier) currently has a problem whereby the pages get dirtied when using Protaculous for Safari searching. So I ended up having to dump a block of code into HTML markup, in the “Before ” section:
<style type="text/css">
input.safari, input.safari_focus {
width: 152px;
font: 11px MS Serif, Sans-serif;
border: none;
padding: 6px 20px 6px 24px;
background: url(http://www.xxx.com/Resources/safari_search.gif) no-repeat left top;
height: 14px;
}
input.safari_focus {
overflow: visible;
background: url(http://www.xxx.com/Resources/safari_search.gif) 0 -26px;
}
#fwNav1 .fwNavItem {min-width:120px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">//<![CDATA[
document.observe('dom:loaded', function(evt){
$$('input.search').each(function(elm){
var def = 'Site Search...';
if(!Prototype.Browser.WebKit){
elm.addClassName('safari');
if($F(elm).empty()) elm.setStyle({'color':'#888'}).value = def;
elm.observe('focus',function(evt){
if($F(elm) == def) elm.setStyle({'color':'#000'}).clear().focus();
elm.removeClassName('safari');
elm.addClassName('safari_focus');
});
elm.observe('blur',function(evt){
if($F(elm).empty()) elm.setStyle({'color':'#888'}).value = def;
elm.removeClassName('safari_focus');
elm.addClassName('safari');
});
}else{
elm.setAttribute('type','search');
elm.setAttribute('autosave','saved.data');
elm.setAttribute('results','5');
elm.setAttribute('placeholder',def);
}
});
});
//]]></script>In the code above, all the code after “<
Now draw a field on your page in Freeway, then open the Inspector and type sp_q in the Name field (if you are using Atomz). Leave the Value field blank, Maximum Length = 0, Size = whatever you like (I use 25). Then go to the Page menu and choose Form Setup, then fill that out in accordance with your Atomz account. There is a Freeway Knowledgebase article available on how to do it.
As to how I got the field to vertically center in my footer, that was a table cell trick. Just draw a 1x1 table cell, set it to vertically center, then paste in your field.
Please let me know if this helps.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options