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

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

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

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.
Last edited by [RZ] on Mon Aug 17, 2015 12:51 pm, edited 9 times in total.

User avatar
zinc
 
 
Posts: 1502
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom

Re: Form Placeholders

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

Great little beauty RZ!!!! Nice one!

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

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 :idea:
thank you again for your encouraging words my friend

adex1
 
 
Posts: 215
Joined: Fri Apr 01, 2011 1:13 pm

Re: Form Placeholders

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.
Buy Automation Shopping Cart for CMS WEBSHOP + 2.2 Using WB10!
- Use secure gateway to buy using PAYPAL website.

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

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

thank you! :)

User avatar
bburgess
 
 
Posts: 197
Joined: Mon May 13, 2013 5:05 am
Location: Australia
Contact:

Re: Form Placeholders

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

NICE Thank You!!

User avatar
protectourlands
 
 
Posts: 663
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Form Placeholders

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.

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

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
 
 
Posts: 27
Joined: Sat Jan 09, 2010 3:10 am

Re: Form Placeholders

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.

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

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
 
 
Posts: 61
Joined: Mon Nov 25, 2013 2:03 pm

Re: Form Placeholders

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?

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

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

yes to both of your questions

iMatt
 
 
Posts: 61
Joined: Mon Nov 25, 2013 2:03 pm

Re: Form Placeholders

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! :?: :cry:

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders

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...

User avatar
[RZ]
 
 
Posts: 2118
Joined: Tue Nov 04, 2008 12:08 pm

Re: Form Placeholders *** UPDATED Jan-17-2014 ***

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
-------------------------------------------------------------

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests