[pmwiki-users] searchbox that clears

[Petko Yotov]

On Sunday 08 April 2012 17:58:24 adam overton wrote:
> i want to make a searchbox that says "search" in the field, but that then
> automatically clears when it's clicked upon. i only want this for the
> searchbox on some pages, not all.
> 
> is there away to make this happen with (:searchbox:)? or with regular
> (:input:)'s? i can't figure it out.

I have been using a quick fix in CSS, not in JavaScript. I have this code in 
my file pmwiki/pub/css/local.css:

  input.searchbox { background: none;}
  input.searchbox[value=""] {
    background: url("search-bg.png")  .4em 50% no-repeat;}
  input.searchbox:focus { background: none;}

I have a small background picture with the word "Search" in the same directory 
as local.css. My file search-bg.png is attached, you can create your own.

This adds the background+clear thing to all searchboxes. To only have it on 
some pages, wrap the (:searchbox:) directive in a named div, for example:

  >>clearbox<<
  (:searchbox:)
  >><<

then, in local.css, insert "div.clearbox" before all "input.searchbox":
  div.clearbox input.searchbox { background: none;} /*etc.*/

I haven't yet found the time to look into a JavaScript implementation.

Petko
-------------- next part --------------
A non-text attachment was scrubbed...
Name: search-bg.png
Type: image/png
Size: 1041 bytes
Desc: not available
URL: <http://www.pmichaud.com/pipermail/pmwiki-users/attachments/20120409/56b40bac/attachment.png>