[Pro] Make a word disappear?

Justin_Easthall · June 22, 2011, 3:00pm

See my search button on my home page (right column, under contact). The norm is when you want to enter a search query the word ‘search’ should disappear? How it is now the word ‘Search’ stays and you have to delete to add your query…

Any idea on how to make the word ‘search’ disappear when you put the cursor in the box??

Cheers!!!

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

David_McCallum · June 22, 2011, 7:09pm

Well the FWT site uses an Item>Extended attribute on the search input field of placeholder/search messages.

So select the input field Item>Extended

New name/value pair of placeholder and Search messages (or whatever)

Make sure that you have nothing in the value box in the inspector third tab.

I have no clue what cross browser support for this is though.

David

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

waltd · June 22, 2011, 7:58pm

This particular trick is limited to WebKit browsers, as far as I know,
although I haven’t tried it on the very latest Firefox. IE support
maybe in IE9, but I wouldn’t hold my breath. It’s an HTML 5 element,
although Safari has had support for it since forever, and it works in
that browser under any DOCTYPE.

Here’s a Gist with a bit of Protaculous code to simulate this in most
browsers. You would need to update the line that begins with var search so it points to the actual id of your search field. (And you
will need to use the Extended dialog to set the ID attribute on that
field, or my FixForm Action, since Freeway doesn’t get that part right.)

gist.github.com

https://gist.github.com/walterdavis/1040975

gistfile1.js

var browserSupportsSearchElement = function(){
  var test = new Element('input',{type:'search'});
  return (test.type == 'search');
};
var search = $('mySearchBox');
if(browserSupportsSearchElement()){
  search.writeAttribute('type','search');
  search.writeAttribute('placeholder','Search...');
}else{
  var DEFAULT = 'Search...';

This file has been truncated. show original

Stepping through what this does, the test function first creates a
hidden element in the page, and if the browser will accept setting
that element to type=search, it returns true.

Then, there’s a simple either/or.

If the browser supports the search element, then the type=search and
placeholder=Search… parts are added to the element. The browser does
all the rest.

If not, then we simulate this with JavaScript. First, for browsers
that support it, we add the rounded corners, Safari-style, and the
gray text style for the placeholder.

Next, if the search field is blank, we add the placeholder text. (It
might not be blank on page load, particularly if you are using server-
side form processing and pre-fill the field during a search results
display.)

Then we add a focus and blur observer, checking for default text and
emptiness, respectively, and either clearing the field and setting the
font color to black, or restoring the placeholder text and graying it
back, depending on the state of the field.

The benefit of doing this trick using the script is that your page
will still validate in a < HTML 5 DOCTYPE. Since Freeway doesn’t do
HTML 5 yet, you need this if you’re worried about validation.

Walter

On Jun 22, 2011, at 3:09 PM, DeltaDave wrote:

Well the FWT site uses an Item>Extended attribute on the search
input field of placeholder/search messages.

So select the input field Item>Extended

New name/value pair of placeholder and Search messages (or whatever)

Make sure that you have nothing in the value box in the inspector
third tab.

I have no clue what cross browser support for this is though.

David

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

Justin_Easthall · June 22, 2011, 8:03pm

Great thanks - where do I put this code (walter)?

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

waltd · June 22, 2011, 8:13pm

Apply Protaculous to the page, and set the library picker to prototype-
packed (or scriptaculous-packed if you are using any other Scripty or
FX Actions on the same page). Then click the top Function Body button
in the Actions interface and paste in this code. Be sure to update the
line with the correct ID of the search field, and be sure to apply the
same ID to your search field as noted previously.

Walter

On Jun 22, 2011, at 4:03 PM, Justin Easthall wrote:

Great thanks - where do I put this code (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

Justin_Easthall · June 22, 2011, 8:14pm

great cheers

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

waltd · June 22, 2011, 8:27pm

Forgot to mention, if you are currently using the Value field in
Freeway to set this element to read Search…, you need to delete
that. Click on the search element, and look in the third tab from the
left (output) to see that field. In order for this script to work,
that value must default to nothing.

Walter

On Jun 22, 2011, at 4:14 PM, Justin Easthall wrote:

great cheers

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

Justin_Easthall · June 22, 2011, 8:40pm

I tried the above? Not working what do I put in the extended>Div fields>

I have changed the div to SearchBox, in the properties and in the extended i did SearchBox for name and value? I know thats wrong!

ANd changed SearchBox in the code above

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

waltd · June 22, 2011, 9:10pm

You need to change it to just ‘q’, since that’s the name of your
search field, and you need to single-click on the q field, choose
Item / Extended from the main menu, make sure the Input tab is
highlighted, click New, and add

Name: id
Value: q

in the resulting sub-dialog. This code only applies to form elements,
not to divs, so I presume that you want to make the Safari-style
rounded search box out of your q field.

Walter

On Jun 22, 2011, at 4:40 PM, Justin Easthall wrote:

I tried the above? Not working what do I put in the extended>Div
fields>

I have changed the div to SearchBox, in the properties and in the
extended i did SearchBox for name and value? I know thats wrong!

ANd changed SearchBox in the code above

http://www.easthalldesign.com/

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

Justin_Easthall · June 22, 2011, 9:29pm

Thanks dont know where the q is coming from! - It looks pretty rough in IE 8 - can I increase the height for IE?

Cheers!

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

waltd · June 22, 2011, 10:03pm

Are you using the Site Search Action? That’s probably it. If you can’t
get at the form element to add the ID, you can change the script to
target it a different way. Try changing the line that begins with var search to read:

var search = $$('input[name="q"]').first();

As far as adding a special rule for IE, you can use conditional
comments:

<!--[if IE]>
<style type="text/css">
.form_element_SearchBox { padding: 3px 6px; }
</style>
<![endif]-->

…or whatever else you might want to use inside there.

Use the Page / HTML Markup dialog to paste that in, in the Before /
HEAD section.

Walter

On Jun 22, 2011, at 5:29 PM, Justin Easthall wrote:

Thanks dont know where the q is coming from! - It looks pretty rough
in IE 8 - can I increase the height for IE?

Cheers!

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

Justin_Easthall · June 22, 2011, 10:04pm

Nice one thank you

J

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

David_McCallum · June 22, 2011, 10:33pm

Interestingly FF 4.0.1 does the placeholder but not the rounded corners while 3.6.13 does rounded corners - no placeholder.

D

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

waltd · June 22, 2011, 10:41pm

Have you tried FF5 yet? I was quite surprised to see they jumped that
far already!

Walter

On Jun 22, 2011, at 6:33 PM, DeltaDave wrote:

Interestingly FF 4.0.1 does the placeholder but not the rounded
corners while 3.6.13 does rounded corners - no placeholder.

D

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

David_McCallum · June 22, 2011, 10:48pm

Have you tried FF5 yet?

I didn’t know it was out there!

But I have it now and it doesn’t do the rounded corners either!

D

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

Shane1 · June 22, 2011, 11:22pm

Is this only happening in IE 6.0? I am looking at it in all my browsers and nothing seems to be an issue.

have you tried to clear out your browser settings?

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