How do they do this?

Freeway
21

I deleted all 3 instances of the “F.” That resolved the problem.

Here’s the perfected code (for those of you reading this who may wish to try it yourself):

$$('input.search').each(function(elm){
    var def = 'Search this site...';
    {
        elm.addClassName('safari');
        if($(elm).empty()) elm.setStyle({'color':'#888'}).value = def;
        elm.observe('focus',function(evt){
            if($(elm) == def) elm.setStyle({'color':'#000'}).clear().focus();
            elm.removeClassName('safari');
            elm.addClassName('safari_focus');
        });
        elm.observe('blur',function(evt){
            if($(elm).empty()) elm.setStyle({'color':'#888'}).value = def;
            elm.removeClassName('safari_focus');
            elm.addClassName('safari');
        });
    }
});

Thank you, Walter!

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

22

Ooops! I just realized the deletion of that F creates a new, bigger problem. Without that F, when you click inside the search field, the proxy text does not vanish. That’s bad because most people are accustomed to a single click inside the field and then they start typing. But doing that without the “F” means you will add your search terms after the end of the “Search this site…” text string!

So the question now becomes, how do I reap the merits of having my proxy text appear “gray” when the page is first loaded in IE and FF, but when the user clicks once inside the field, the text vanishes?

Thanks,

James Wages

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

23

Put back the F in this line. The only two places you needed to remove it were in those where it was followed by empty(). That was my initial mistake.

Walter

On Apr 11, 2013, at 4:33 AM, JDW wrote:

       if($F(elm) == def) elm.setStyle({'color':'#000'}).clear().focus();

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

24

Putting that one F back in truly “perfected” the code, Walter. Thanks! I confirmed perfection in IE7/8/10, FF (WinXP and OSX), Safari, and Chrome (WinXP & OSX).

Best,

James W.

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

25

Can someone tell me what the css is for removing the ugly purple outline(border) on the focus of a form element.

Can I place it in the extra Css area or do I need tot create an extended class?

Billy

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

26

In your page / HTML Markup (before ), add the following:

<style type="text/css">
input:focus {
  outline: none;
}
</style>

That should do it, I think.

Walter

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

27

Hey Walter,
Yes that worked for the text fields but not the text area.
What would cover that?

Billy

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

28

Untested but maybe

<style type="text/css">
input:focus, textarea:focus {
  outline: none;
}
</style>

D

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