First off… Tim, I wrote you an email offline to say I don’t know what you are talking about. You never wrote back.
Back to Safari-style search fields…
My goal is to get a nice looking rounded search field to work in Safari (Mac/Win), Firefox (Mac/Win) and MSIE (6/7 Win). The following is required:
-
Search field with predictable/consistent height and width
-
Text in the search field (lt.gry, if possible) that vanishes when you click in the field.
-
Looks the same in almost any browser.
Walter Davis kindly offered me some detailed guidance offline, which accomplishes (1) & (2) of my aim. I have compiled the steps for the benefit of all Freeway users, as follows:
Step-1: Insert > Text Field. Size it to your liking and then apply the Freeze Form Item action to it – make sure only “Activate” and “Width” checkboxes are ticked in the Actions palette.
Step-2: Insert > Button. Size it to your liking. Click the “Item Output Settings” tab in the Inspector. Type “SEARCH” for the Name. The text you want to appear on the button goes in the Value field. Make sure its a “Submit” button.
Step-3: With your button still selected, choose Item > Extended… Within the tab, Click New and type “onClick” for the Name and type “checkform(); return false;” for the Value (without the quotes). OK that and then click New again. Type “onKeyUp” for the Name and “checkform(); return false;” for the Value (without the quotes). OK the dialog, then OK the Extended Attributes dialog.
Step-4: Select your field and then choose Item > Extended… Within the tab, Click New and type “class” for the Name and type “search” for the Value (without the quotes). OK that and then click New again. Type “type” for the Name and “text” for the Value (without the quotes). OK the dialog, then OK the Extended Attributes dialog.
Step-5: Fill out Page > Form Setup in accordance with whatever search engine you wish to use. There is guidance on the SoftPress website for Atomz:
http://www.softpress.com/kb/questions/131/
Step-6: Download the Protaculous Action from ActionsForge:
http://www.actionsforge.com/actions/view/18-protaculous
(Yes, I know there are two version 0.5’s shown at ActionsForge but with two different dates! I do not know why! I downloaded the one showing 5 Nov, 2008.)
Step-7: Add Protaculous to Freeway by double-clicking it.
Step-8: Apply Protaculous to your page in Freeway.
Step-9: Open the Actions palette and adjust the settings as follows:
• Use Library: prototype-packed
• Click the upper “Function Body” button and then copy/paste in this code:
$$(‘input.search’).each(function(elm){
var def = ‘Site Search…’;
if(!Prototype.Browser.WebKit){
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.observe(‘blur’,function(evt){
if($F(elm).empty()) elm.setStyle({‘color’:’#888’}).value = def;
});
}else{
elm.setAttribute(‘type’,‘search’);
elm.setAttribute(‘autosave’,‘saved.data’);
elm.setAttribute(‘results’,‘5’);
elm.setAttribute(‘placeholder’,def);
}
});
(NOTE: You can change “Site Search…” to whatever you like.)
OK that dialog, and don’t worry about adding code via the lower “Function Body” button.
Step-10: Preview and assuming your Form Setup was correct, you will be enjoying a Safari style curved search field in Safari, with light gray text inside! Sadly, the curves are gone in Firefox and MSIE Windows.
Walter Davis informed me that he did some extra work to get that same curved search field to work in FireFox and MSIE on ActionsForge.com. Walter said that he “Applied styling and background images to make the search field appear exactly the same as Safari’s. (Took screenshots of the field in its two states in Safari, and used that for the field’s background image, hid all borders and selection rectangles and used padding to force the text into the available space.)”
So far, I’ve not been able to figure out this last part on my own, but perhaps some of you can and will then share the detailed steps with us.
I hope this is helpful.
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
In any case, I have found a reasonable solution to the problem.