[Pro] CUSTOM - SEARCH FIELD

Freeway
1

I am trying to place a search field on a new website I’m building. Really I want it to be similar to that on this forum, in that text already populates in the html ‘search field’:

in my instance ‘Search our site’

I have placed this in the Output Settings Value field - This works, but I want this text to disappear once the html field is clicked on.

Looking back at old posts I have got thus far:

Selected the html text field - Item>Extended>Input and placed the following… using text wrangler to place this script rather than copy & paste.

onblur: this.value = (this.value = = ") ? ‘Search…’ : this.value;

onfocus: this.value = (this.value = = ‘Search…’) ?" : this.value;

Type: search

The field decoration changes to rounded end, but the text remains once the field is clicked on! What am I doing wrong???

Also is there a way to custom the TEXT style in the html field. Currently mine is black, I would prefer a tinted grey look. The action form element styler does not enable me to do this??? Any ideas guys?

Any suggestions would be great! Cheers

Worm

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

2

You’re probably getting syntax errors from using “curly” quotes (especially if you are copying and pasting from the Web view of this mailing list).

I’ve surrounded this bit of text with four tildes to push it into “code view”. Try the following:

onblur: this.value = (this.value == '') ? 'Search...' : this.value;
onfocus: this.value = (this.value == 'Search...') ? '' : this.value;
type: search;

Some notes:
The things that look like double-quotes (if you’re reading this in Mail) are actually two single-quotes. They have to be straight “typewriter” single-quotes or they won’t work. The onblur/focus part (without the colon) goes in the Name field, the rest of each line goes in the Value field.

As far as getting the style effect to happen, in Safari you should see gray text for the proxy text ‘Search…’ and when you click on the field, the text should turn black so you can see what you’re typing. To simulate this on non-WebKit browsers, you have to do some additional trickery. And if you do that, you should probably test to see if the browser is WebKit, because your trickery will never look quite as nice as what WebKit does natively.

So to get there, I would use Prototype.js to plane off the rough differences between browsers. Add the Protaculous Action to the page, then click on the top Function Body button in the Actions palette and paste the following into the dialog:

$$('input.search').each(function(elm){ 
	var proxy = 'Search...'; 
	if(!Prototype.Browser.WebKit){ 
		if($F(elm).empty()) elm.setStyle({'color':'#888'}).value = proxy; 
		elm.observe('focus',function(evt){ 
			if($F(elm) == proxy) elm.setStyle({'color':'#000'}).clear().focus(); 
		}); 
		elm.observe('blur',function(evt){ 
			if($F(elm).empty()) elm.setStyle({'color':'#888'}).value = proxy; 
		}); 
	}else{ 
		elm.setAttribute('type','search'); 
		elm.setAttribute('autosave','saved.data'); 
		elm.setAttribute('results','5'); 
		elm.setAttribute('placeholder',proxy); 
	} 
});

Finally, select your text field and open up the Item / Extended dialog. Delete all the fields you have added already in your efforts, and add Name: class, Value: search.

That should get you the behavior of the Safari search field that you see on the Freewaytalk site.

Walter

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

3

Hi Walter and all,

not sure about to have here the right place to post - but I try.

After following all the discussion about how to make this rounded style search box I just finished one version that seems to be functional (from the graphical standpoint). Thanks for this so far.

But now, I tried to make it technical ready, means “to make it search”. And there I fail.

I gave once the zoom search engine a chance and it worked quite well. In this little example: http://www.kimmich-dm.de/tippsundtricks/index.php you can see the search field and you can see, that the search term typed in (for example “Design”) is leading me to my resultpage, but the term “Design” is not automatically in the field there.

If you follow the second example Index2.php you may see what I mean.

Is there a chance to give the rounded box the same behaviour than that index2 search field? I tried a lot, but in every case everything broke apart. Or are there other (better or easier) possibilities?

Thanks for your help

Thomas

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

4

I thought that I’d posted this online somewhere already but apparently
not.
Below is a simple action that I created a while ago (2006) will
convert it to a Safari (WebKit) search field using a JavaScript
function.
Attach the action to a standard text field, set the settings in the
actions palette and away you go.
The JS prevents the code from failing HTML validation as well as
offering default text options for non Webkit browsers.

See an example and download the action;
http://www.freewayactions.com/test/safari-search/

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

5

Try naming your search field form element zoom_query instead of item1.
Look in the Output tab of the Inspector when you have the form field
itself selected. The Name field controls the actual field name, and
the Value field controls the text that would appear in the field by
default. Leave that blank, and you should be good.

Walter

On Nov 16, 2009, at 6:17 AM, Thomas Kimmich wrote:

But now, I tried to make it technical ready, means “to make it
search”. And there I fail.

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

6

Tim, I’m not a professional web developer so am having trouble with interpreting your message. Was this something that you thought would be helpful with the PHP feedback form action or is this related to something else?
Thanks,
Ashley

On Nov 16, 2009, at 6:32 AM, Tim Plumb wrote:

I thought that I’d posted this online somewhere already but apparently not.
Below is a simple action that I created a while ago (2006) will convert it to a Safari (WebKit) search field using a JavaScript function.
Attach the action to a standard text field, set the settings in the actions palette and away you go.
The JS prevents the code from failing HTML validation as well as offering default text options for non Webkit browsers.

See an example and download the action;
http://www.freewayactions.com/test/safari-search/

FreewayActions.com - Freeware and shareware actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

Ashley Turner
email@hidden

because music matters

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

7

Hi Tim,

thanks for sharing your action once again (… for us sleepyheads :-))). I followed some discussions (“How do they do this”…) where it has been written, that there is one, but believe me … I never found a link or similar. Anyway - correct me if I´m wrong:

The action applied only works in Safari?

Hi Walter,

short spoken: Correct as ever - and shame to me:

By journey into the jungle of coding, I forgot the good old inspector. Now the last step back in civilization is to redesign my resultpage and replace the search filed box and button there. But It is to be feared that this is more a topic of “zoom search engine” than for freeway. Or do you have any ideas for me so far?

Hi Ashley,

as I said in the entry of the post, that I think the discussion is displaced here. The action of Tim and my wish answered by Walter having to do with the question:

“How to make a simple Textbox to have rounded corners - running in more than only safari” as an aspect of design and functionality.

Cheers

Thomas

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

8

The action takes a regular (square ended) text input field and turns
it into a Safari search field when viewed in Safari or any other
Webkit browser (Chrome for example). this in itself isn’t anything
special other than it does so in a way that means the page code will
till validate. The action also allows you to set up default text
inside the field that is hidden when clicked into and works in all
browsers that support JavaScript.

Ashley, you could use the action with the PHP Feedback Form action but
it’s mainly intended to be used in a search environment and
specifically to style the text input field.
Regards,
Tim.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

9

I don’t know what you are doing in PHP to show your search results
(since all I see is the rendered product of that code). But when I
make a search engine (like the one on this site) I put the original
search terms back in to the form field using something like this:

//in the top of the page somewhere
$q = (isset($_POST['q'])) ? trim(strip_tags($_POST['q'])) : '';

//down in the page layout
<input type="text" name="q" value="<?=$q?>" />

So the first step is to set the $q variable to be a “sanitized”
version whatever was entered in the “q” field (or nothing, if there
wasn’t a search request) and then the second is to display it.

Walter

On Nov 17, 2009, at 2:22 AM, Thomas Kimmich wrote:

But It is to be feared that this is more a topic of “zoom search
engine” than for freeway. Or do you have any ideas for me so far?

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

10

Hmmm Walter,

the thing is working and the only thing I dislike is the “design” of purely PC.

The way it works to me?

Zoom search indexing my URL

Result: 7 files

  1. template site (with searchbox and button)
  2. search.php (feel free to have a look on it http://www.kimmich-dm.de/tippsundtricks/index.php
  3. 5 files named .zdat that contains all different things like the words indexed … never had a closer look on it.

Typing the search term in the safari-style search field (zoom_query as you said) form method = get, action = url(./search.php) directly brings me to .php and back to the results(-template) containing the results and the ugly squared PC boxes (that`s how I explain to myself).

Possible to remove both in the search.php (I know cause I did).

But I think, some code (the original one coming from zoom search?) on this “search result page” inserted via HTML Markup is breaking the code of the “safari-styled” field and I don`t find out which.

But except of the viewpoint of sytyling, the thing is not to bad and I have a soultion (… even if it`s goofy :-)).

Thomas

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

11

I have similar issue. I would like to make a text field where a predefined text is already written inside the textbox, and when you click to type in the textbox then the predefined text disappears. I can only get above example to show text once clicking in the text field and clicking somewhere else on the webpage.
I use FW Pro 7.1.1 (7065).

Regards,
Soren

freewaytalk mailing list
email@hidden
Update your subscriptions at:

12

In the Inspector (while the search field is selected) look in the third tab from the left. Fill in your desired text in the Placeholder field. If you don’t see that field, set your page HTML level (DOCTYPE) to HTML5.

Walter

On Oct 31, 2015, at 9:41 AM, Soren F email@hidden wrote:

I have similar issue. I would like to make a text field where a predefined text is already written inside the textbox, and when you click to type in the textbox then the predefined text disappears. I can only get above example to show text once clicking in the text field and clicking somewhere else on the webpage.
I use FW Pro 7.1.1 (7065).

Regards,
Soren

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

13

Thanks Walter, Sorry I forgot to tell that I would like when clicking in the textbox, the text should disappear, without manually having to erase the text. Regards, Soren

freewaytalk mailing list
email@hidden
Update your subscriptions at:

14

I forgot to tell that I would like when clicking in the textbox, the text should disappear, without manually having to erase the text

That is exactly what will happen when you set the placeholder attribute

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

15

Unfortunately I cannot get it to work. I have uploaded my test here: FWTest
Can you see what I do wrong from html code? Many thanks, Soren

freewaytalk mailing list
email@hidden
Update your subscriptions at:

16

Your page is set as Html 4.0 1 Transitional - it should be set as Html5

You have added the text in the Value field when it should be in the Placeholder field

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

17

Hi Dave, it now works. Thank you very much.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

18

By the way Soren - the placeholder attribute does not require any javascript to function so you can remove any code you have added to your page.

You dont need the Protaculous action so it can be removed.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

19

Hi Dave, Yes thanks. I also removed the extended input as well. It’s great help as this textbox feature I really missed on my websites.

freewaytalk mailing list
email@hidden
Update your subscriptions at: