[rz] Form Placeholders *** UPD 2015-Aug-17 ***

[RZ] · Post by **[RZ]** » Sun Nov 03, 2013 4:29 pm

[rz] Form Placeholder - v1.3.0.3

The most lightweight solution to have placeholders in your forms!

In forms, the placeholder property for data entry fields is not so easy to customize and not all browsers behave the same in order to properly show them. This extension unifies the criteria for all browsers and it is highly customizable to fit your design needs.

Supports multi-instances; this means that you can have grouped/individual fields with their own colors/settings.

It is cross-browser compatible and even supports old ones.

DEMO

HTML 4.01 Transitional
W3C compliant

* New in version 1.3.0.3:

- Workaround for iOS event bug in select object.
- Workaround for Chrome event bug in select object.
- Improved RTL alignment in select object (please read the "known issues" section).

* New in version 1.3.0.2:

- Improved support for iOS-based devices.
- Improved auto-update process.
- Improved "pixel-perfect" process.

* New in version 1.3.0.1:

- Added smooth colors transitions effect.

* New in version 1.3.0.0:

- Added support for RWD.
- Fixed bug in bottom alignment.

* New in version 1.2.0.3:

- Optimized core.
- RTL support (please read the "known issues" section).

* New in version 1.2.0.2:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.

* New in version 1.2.0.0:

- Fixed a "double-click" issue in Android-based tablets to activate the keyboard.
- Fixed a "double-right-click" issue to activate the context-menu in Safari.
- Improved mouse-emulation colors behavior in touch screens.
- Pixel-perfect option that fixes a size issue in some browsers.
- Entrybox and textarea objects will have the same size as in the workspace (true wysiwyg), even in older browsers and quirks mode.
- Placeholders can have their own alignments within the entry area.
- Workaround for the textarea background image bug in IE8 and earlier (the image moves with the text instead of remain in its original location).

* New in version 1.1.0.0:

- Improved behavior on page refresh.
- Improved security on history-back (optional).
- Borders, background and foreground colors for onhover/onfocus statuses.
- Can detect background/programatically value changes (for advanced users!).
- Placeholder texts can be resized (reduced) proportionally.
- The extension can be placed wherever you want, even outside the form (and even if it exists or not).

* New in version 1.0.1.0:

-Added on-focus behavior: dotted box, border color and background color.
-Added clear/reset form support.
-Improved code for better performance.

How to use?

1. Design your form as you usually do.
2. Setup the form validation rules (if applies, it is up to you).
3. Drag and drop the extension into the workspace.
4. Open its properties dialog and setup the fields that will have a placeholder (the empty-field message).
5. Setup the color and the font type of the placeholder (or leave them as by default).
6. Setup the field borders, background and content colors for when it gets the focus (or leave them as by default).
7. You can do the same as in #6 for when the mouse is over the entry field.
8. Preview or publish (remember: to send messages -depending on your settings- you may need php!).

Enjoy!

Known issues:

RTL issues in combobox (not related to the extension):

- IE: must specify the horizontal position (any other than 'auto') or specify the text-align property in the object to let the extension align the placeholder correctly.
- Safari: the options list is always left aligned.
- Opera: the down arrow fills the control and overlaps the placeholder.

Other alignment issues in combobox (not related to the extension):

- The down arrow will overlap the placeholder if the object alignment is left and the placeholder is aligned to the right and vice-versa; the solution is adding an horizontal offset; if this will interfere with other entry objects alignments in the extension, a new instance can be created for only the affected comboboxes.
- IE 8 and earlier, as well as in some older FireFox versions, there is a vertical/horizontal misplacement whith padding.

zinc · Post by **zinc** » Sun Nov 03, 2013 4:32 pm

Great little beauty RZ!!!! Nice one!

[RZ] · Post by **[RZ]** » Sun Nov 03, 2013 4:41 pm

thank you bendigo!
seems little but was a hard task to unify all browsers and make them work as expected

thank you again for your encouraging words my friend

adex1 · Post by **adex1** » Mon Nov 04, 2013 8:52 pm

Thank you Rabbi even though I have not download it and test but whever I see your work I really appreaciate it. Thanks once more.

[RZ] · Post by **[RZ]** » Mon Nov 04, 2013 11:29 pm

thank you!

bburgess · Post by **bburgess** » Tue Nov 05, 2013 1:09 am

NICE Thank You!!

protectourlands · Post by **protectourlands** » Tue Nov 05, 2013 1:19 am

This is awesome RZ. Tested in HTML5 and it works great! Thank you for sharing this.

[RZ] · Post by **[RZ]** » Tue Nov 05, 2013 1:30 am

bburgess wrote:NICE Thank You!!

protectourlands wrote:This is awesome RZ. Tested in HTML5 and it works great! Thank you for sharing this.

thank you for the feedback!

CJS · Post by **CJS** » Tue Nov 05, 2013 2:34 am

WOW! what a great new tool.
Love the look that will add a very professional appearance to developed web site.
Thanks a bunch for you work and for sharing.
Much appreciated.

[RZ] · Post by **[RZ]** » Tue Nov 05, 2013 6:46 am

thank you cjs for you kind words
glad to know that you all found this useful

iMatt · Post by **iMatt** » Sun Dec 22, 2013 7:35 pm

Trying this extension out. Going wrong somewhere though. When the instructions say:

"Design your form as you usually do"

Dose this mean creating the form using the standard form tool in WB9?

Also:

"Drag and drop the extension (must be on top of the form's elements!)"

Again, is this a standard WB9 form?

[RZ] · Post by **[RZ]** » Sun Dec 22, 2013 7:56 pm

yes to both of your questions

iMatt · Post by **iMatt** » Sun Dec 22, 2013 11:28 pm

Still having problems with this. I know it's probably me doing something wrong! When I drag the extension (from WB9 extensions) onto the form and then double click onto the area created by Form Placeholder, am I supposed to see the same entry fields as the WB9 form I created? If so, then I am doing something wrong!

[RZ] · Post by **[RZ]** » Sun Dec 22, 2013 11:36 pm

without seeing what you did, there is nothing i can do -- saying doesn't work doesn't help to help
once you have your form, you put the extension within the form
and then, you open the properties dialog and type in the entry-field name and its placeholder-message for each form entry field
please read the properties descriptions...

[RZ] · Post by **[RZ]** » Fri Jan 17, 2014 9:52 am

* New in version 1.1.0.0:

- Improved behavior on page refresh.
- Improved security on history-back (optional).
- Borders, background and foreground colors for onhover/onfocus statuses.
- Can detect background/programatically value changes (for advanced users!).
- Placeholder texts can be resized (reduced) proportionally.
- The extension can be placed wherever you want, even outside the form (and even if it exists or not).

* New in version 1.0.1.0:

-Added on-focus behavior: dotted box, border color and background color.
-Added clear/reset form support.
-Improved code for better performance.

-------------------------------------------------------------
reposted because of a link error -- must redownload the update
-------------------------------------------------------------

Patr100 · Post by **Patr100** » Sat Mar 22, 2014 6:42 pm

When I try the demo link I get a blank page (in Chrome)
and the download link for the extension is set to private?

[RZ] · Post by **[RZ]** » Sat Mar 22, 2014 6:59 pm

yes
link removed
extensions were set to private

[RZ] · Post by **[RZ]** » Sun Apr 13, 2014 10:08 am

* New in version 1.2.0.2:

- Optimized core.

* New in version 1.2.0.1:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.

* New in version 1.2.0.0:

- Fixed a "double-click" issue in Android-based tablets to activate the keyboard.
- Fixed a "double-right-click" issue to activate the context-menu in Safari.
- Improved mouse-emulation colors behavior in touch screens.
- Pixel-perfect option that fixes a size issue in some browsers.
- Entrybox and textarea objects will have the same size as in the workspace (true wysiwyg), even in older browsers and quirks mode.
- Placeholders can have their own alignments within the entry area.
- Workaround for the textarea background image bug in IE8 and earlier (the image moves with the text instead of remain in its original location).

Patrik iden · Post by **Patrik iden** » Wed Apr 23, 2014 1:03 pm

Hello, do this Extension (Form Placeholders) also work for styling a Combo box?

Thank you.

[RZ] · Post by **[RZ]** » Wed Apr 23, 2014 1:11 pm

Patrik iden · Post by **Patrik iden** » Wed Apr 23, 2014 1:23 pm

[RZ] wrote:yes!

That sound great.

Thank you.

supersonictt · Post by **supersonictt** » Tue Jul 01, 2014 11:06 pm

[rz]
Thanks for the update

Someone asked about comboboxes, in the latest version, is it possible to add placeholder to comboboxes? Like I have combobox with: Male and Female options, can I add "Gender" as a placeholder?

Thank you

[RZ] · Post by **[RZ]** » Tue Jul 01, 2014 11:13 pm

resounding yes

supersonictt · Post by **supersonictt** » Tue Jul 01, 2014 11:17 pm

Everyday, you are convincing me more and more to buy the Platinum Pack

but I want two gifts instead of one

Thanks [rz]

[RZ] · Post by **[RZ]** » Tue Jul 01, 2014 11:20 pm

the platinum is a gift by itself, so you can select the second listed there...

supersonictt · Post by **supersonictt** » Tue Jul 01, 2014 11:24 pm

Purchase done

Thanks a lot [rz], you deserve a lot more for this great work

[RZ] · Post by **[RZ]** » Tue Jul 01, 2014 11:51 pm

thank you for support the hard work behind the scenes!

[RZ] · Post by **[RZ]** » Sat Jul 05, 2014 11:57 pm

* New in version 1.2.0.3:

- Optimized core.
- RTL support.

RTL issues in combobox (not related to the extension):

- IE: must specify the horizontal position (any other than 'auto') or specify the text-align property in the object to let the extension align the placeholder correctly.
- Safari: the options list is always left aligned.
- Opera: the down arrow fills the control and overlaps the placeholder.

Other alignment issues in combobox (not related to the extension):

- The down arrow will overlap the placeholder if the object alignment is left and the placeholder is aligned to the right and vice-versa; the solution is adding an horizontal offset; if this will interfere with other entry objects alignments in the extension, a new instance can be created for only the affected comboboxes.
- IE 8 and earlier, as well as FireFox, have a vertical/horizontal misplacement whith padding.

* New in version 1.2.0.2:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.

[RZ] · Post by **[RZ]** » Tue Oct 14, 2014 6:25 pm

UPGRADE AVAILABLE

* New in version 1.3.0.0:

- Added support for RWD.
- Fixed bug in bottom alignment.

naftalina · Post by **naftalina** » Tue Dec 23, 2014 11:32 am

Change background image on hover?

[RZ] · Post by **[RZ]** » Tue Dec 23, 2014 11:45 am

not yet

naftalina · Post by **naftalina** » Fri Dec 26, 2014 10:07 am

I'm trying to use extension for the alert button, but when I add a button to the collection instead of the cuboid show a horizontal line?

[RZ] · Post by **[RZ]** » Fri Dec 26, 2014 10:37 am

and how it is related to the form placeholders extension?

naftalina · Post by **naftalina** » Fri Dec 26, 2014 10:58 am

Oooops! Sorry. I used both on the same page and I have not even thought that alert is not part of form

naftalina · Post by **naftalina** » Fri Feb 20, 2015 2:47 pm

Button remains in the hover style after I click on it.
Where I'm wrong?

[RZ] · Post by **[RZ]** » Fri Feb 20, 2015 2:53 pm

button with placeholder, how they are related?

naftalina · Post by **naftalina** » Fri Feb 20, 2015 4:12 pm

I'm talking about send/reset buttons and hover mode style is defined with Form Placeholder.

[RZ] · Post by **[RZ]** » Sat Feb 21, 2015 4:34 pm

are you referring to [rz] Button Pack?
it is unclear for me what you are referring to
pls give me a link and a description about your issue

naftalina · Post by **naftalina** » Sat Feb 21, 2015 4:49 pm

I'm not sure where the problem is.
Yesterday I saw that this is happening to standard send/reset buttons where hover is defined with "Form Placeholder".
Now I see that the same thing happens when "Button Pack" is used as a send/reset button.

On my site (link is in the signature) I used "Button Pack".
Here I used "Form Placeholder"

[RZ] · Post by **[RZ]** » Sat Feb 21, 2015 4:56 pm

i dont see any issue

naftalina · Post by **naftalina** » Sun Feb 22, 2015 6:36 am

Please click on the reset button and you'll see, button will remain in hover style.

[RZ] · Post by **[RZ]** » Sun Feb 22, 2015 8:19 am

this is not an issue at all in the extension
according to the experts advice and the navigability standards, clickable/focusable objects, after a click should get the focus
if you click anywhere else, or start editing something in your contact form, the reset button will lose the focus
if you still want to change this standard behavior, go to the extension properties and in behavior category, set the get focus on click property to false

naftalina · Post by **naftalina** » Sun Feb 22, 2015 9:26 am

[RZ] wrote: if you still want to change this standard behavior, go to the extension properties and in behavior category, set the get focus on click property to false

Of course that I want to change. That's why I use your plug-ins, because they have all these options

Thank you

[RZ] · Post by **[RZ]** » Sun Feb 22, 2015 11:29 am

[RZ] · Post by **[RZ]** » Wed Apr 08, 2015 3:39 pm

* New in version 1.3.0.1:

- Added smooth colors transitions effect.

naftalina · Post by **naftalina** » Wed Apr 08, 2015 4:23 pm

Is demo updated to see how effect looks like?

[RZ] · Post by **[RZ]** » Wed Apr 08, 2015 4:25 pm

nope, the demo is not updated to show this feature yet...
you can get in contact for more details

[RZ] · Post by **[RZ]** » Thu Jun 25, 2015 12:27 pm

* New in version 1.3.0.2:

- Improved support for iOS-based devices.
- Improved auto-update process.
- Improved "pixel-perfect" process.

[RZ] · Post by **[RZ]** » Mon Aug 17, 2015 12:52 pm

* New in version 1.3.0.3:

- Workaround for iOS event bug in select object.
- Workaround for Chrome event bug in select object.
- Improved RTL alignment in select object (please read the "known issues" section).