1

Topic: Hardcover Extension / Tutorial: Nice form field hints

This simple yet useful extension+modification was inspired by forum posts of Fusion6, Linda; original control panel's {help:} (tip) extension and this blog post:
http://www.askthecssguy.com/2007/03/for … s_and.html
I borrowed .css styling there.
Although author of that post permited also freely use of Javascript I rewrited using beautiful jQuery which installed by default in our vldP systems.

Ok, let's start:

0. Go to above site and try the demo, read concept, decide if it's what you need.
1. Download my source file, unzip archive and put ext.hint.php to your includes/ext/ folder.
2. Copy/paste this javascript jquery code to the end of your /includes/js/misc.js file:

function generate_hints()
{
    $("input,select,textarea").focus( function(){
        $(this).siblings("span").css('display','inline');
    });
    
    $("input,select,textarea").blur( function(){
        $(this).siblings("span").css('display','none');
    });
    
    $("textarea").keydown( function(){
        $(this).siblings("span").css('display','none');
    });    

}

3. Add extension call(s) into your account_register.tpl file for generating <span>Enter correct email address please...</span> like hints.

{hint:langarray="register",key="email"}

(somewhere afther <input name="email"> tag, right before closing </dd>
Extension will use your languages/english/lang.lib.account_register.php as file for getting hints and will seek for key 'hint_email' in it (prefixing your key parameter with 'hint_' string) .
4. So please add in it:

"hint_email" => 
"Enter correct email address please. We will send activation link to it.",

If you won't provide langarray= parameter extension will seek in lang.custom.php file (for those who want to keep all hints in one file).


5. Add javascript jquery function call at the bottom of your .tpl file but before <!-- include footer.tpl --> part:
    <script language="javascript">
    generate_hints();
   </script>

6. Put this code to bottom of one of your templates .css files. Let's say to site.css

/* The hint to Hide and Show */
.hint {
    display: none;
    position: absolute;
    left: 500px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}

Later adjust horisontal positioning of your tooltip over left: attribute of .hint selector.

7. And also place pointer.gif file to media folder of your template.


8. Go to your website and try to regsiter. Press couple of times F5 to make sure you've uploaded new .js and .css
Click on first email field.

Don't go celebrate yet!

Notice: It works fine with input, select, textarea type fields (checkboxes, radiobuttons not supported)
Here is best pactice I recommend:
9. Use it on registration and profile editing page.
10. Use it for dynamic fields right before </dd>

...
            {hint:langarray="register",key=field_label}
            </dd>
    <!-- END profile_fields -->

Open your language file and add all nessessary values.

"hint_age" =>
"Only adult persons allowed to use our site",

"hint_country" => 
"We have pepople from all over the world. Where are you from?",

"hint_inmyownwords" =>
"Describe yourself! Do not hesitate honey",

... etc...

If you have extension call but do not have language key=> value in file it's ok! No errors will happen.

Your new users will definitely appreciate the way you humanized signup process and will gladly give you their money!

Good luck!

Last edited by radioact (2009-07-14 10:39:56)

www.vldMagic.com - first choice customizations store and help desk

2

Re: Hardcover Extension / Tutorial: Nice form field hints

BRILLIANT. Thanks very much.

3

Re: Hardcover Extension / Tutorial: Nice form field hints

works great !

only thing i like to know is how to change to color of the field hints.

"We have people from all over the world. Where are you from?" -> i like to change the font color of that.

thanks

4

Re: Hardcover Extension / Tutorial: Nice form field hints

add

color: #color_code

to above css code

www.vldMagic.com - first choice customizations store and help desk

5

Re: Hardcover Extension / Tutorial: Nice form field hints

Worth to bookmark & install this sometime :-)

"The hardest thing in the world to understand is the income tax."

6

Re: Hardcover Extension / Tutorial: Nice form field hints

a very good tutorial http://www.webbsupport.eu/image/thumb_up.gif
but there can I download ext_hint.zip ?

7

Re: Hardcover Extension / Tutorial: Nice form field hints

http://www.mahabbat.kz/files/ext_hint.zip


Should post this in Tutorials? Would make it easier to find wink

Last edited by dragon (2009-04-17 20:03:23)

8

Re: Hardcover Extension / Tutorial: Nice form field hints

It is nobody who has this zip file and can share it ? please ...

Last edited by gugu (2009-04-19 11:33:28)

9

Re: Hardcover Extension / Tutorial: Nice form field hints

radioact can you be kind and share this again ...

10

Re: Hardcover Extension / Tutorial: Nice form field hints

Oh I'm sorry.
It's all because of hosting/domain issues.
Now you can try the link, I fixed it to point to the right location.

www.vldMagic.com - first choice customizations store and help desk

11

Re: Hardcover Extension / Tutorial: Nice form field hints

thanks ...http://www.webbsupport.eu/image/thumb_up.gif

12

Re: Hardcover Extension / Tutorial: Nice form field hints

It doesn't depend on version, should work.

www.vldMagic.com - first choice customizations store and help desk

13

Re: Hardcover Extension / Tutorial: Nice form field hints

Ramil

I tried the download link...as of May 23, I got a 404 for site. Is there an alternate place to download.


Address Not Found

Firefox can't find the server at www.olen.kz.

The browser could not find the host server for the provided address.

    * Did you make a mistake when typing the domain? (e.g. "ww.mozilla.org" instead of "www.mozilla.org")
    * Are you certain this domain address exists?  Its registration may have expired.
    * Are you unable to browse other sites?  Check your network connection and DNS server settings.
    * Is your computer or network protected by a firewall or proxy?  Incorrect settings can interfere with Web browsing.

Last edited by db3204 (2009-05-23 16:55:17)

14

Re: Hardcover Extension / Tutorial: Nice form field hints

Yes, it was domain name support expiration (I've just extended support)
And now this file hosted at vldCrowd - stable place for hosting your files! wink
I fixed above link.

www.vldMagic.com - first choice customizations store and help desk

15

Re: Hardcover Extension / Tutorial: Nice form field hints

I found it.

<?php 
function vldext_hint($params = array())
{
    global $LANG;

    // cache settings
    $mod = isset($params['langarray']) && $params['langarray'] ? $params['langarray'] : "custom";
    $key = isset($params['key']) && $params['key'] ? 'hint_' . $params['key'] : "";

    
    $output = isset($LANG[$mod][$key]) ? '<span class="hint">' . str_replace(array("&", "\""), array("&amp;", "&quot;"), ($LANG[$mod][$key])) . '<span class="hint-pointer">&nbsp;</span></span>' : '';

    return $output;

}
?>
Save as ext_hint.php, add to ext folder

Last edited by jonn (2009-06-03 18:30:40)

16

Re: Hardcover Extension / Tutorial: Nice form field hints

It is located in a .zip file mentioned in my post.

www.vldMagic.com - first choice customizations store and help desk

17

Re: Hardcover Extension / Tutorial: Nice form field hints

dont work : (    thanx radioact  for sharing ^^

18

Re: Hardcover Extension / Tutorial: Nice form field hints

What exactly don't work?

www.vldMagic.com - first choice customizations store and help desk

19

Re: Hardcover Extension / Tutorial: Nice form field hints

i did your tutorial step by step, but that  dont work for me, i missed something in language cod adding ? i'am using french language.'defaut'

20

Re: Hardcover Extension / Tutorial: Nice form field hints

If you'd give me link to your website I could help you.

www.vldMagic.com - first choice customizations store and help desk

21

Re: Hardcover Extension / Tutorial: Nice form field hints

Radioact,
Thanks for the mod.
I have it installed but something is wrong. Please look here. What did I do wrong?
http://astrodates.com/pictures/hint.png
Thanks.

"Any good thing ... that I can do or any kindness I can show to any fellow human being let me do it now. Let me not defer nor neglect it, for I shall not pass this way again."

Email through http://www.astrodates.com/contactus/

22

Re: Hardcover Extension / Tutorial: Nice form field hints

What exactly wrong? I only see regular vldPersonals username check message.

www.vldMagic.com - first choice customizations store and help desk

23

Re: Hardcover Extension / Tutorial: Nice form field hints

I have circled the black text that follows the vldPersonals username check message. This sits behind the message and follows around on the page depending on what the red text does. This is distracting, not helping.

http://www.astrodates.com/pictures/hint.png
http://www.astrodates.com/pictures/hint2.png

"Any good thing ... that I can do or any kindness I can show to any fellow human being let me do it now. Let me not defer nor neglect it, for I shall not pass this way again."

Email through http://www.astrodates.com/contactus/

24

Re: Hardcover Extension / Tutorial: Nice form field hints

Have you added css code to your css file? Are you sure css code selectors same as you have in php?
ie. id=pagination-digg in php and #pagination-digg in css?

www.vldMagic.com - first choice customizations store and help desk

25

Re: Hardcover Extension / Tutorial: Nice form field hints

Thanks, I will check.

"Any good thing ... that I can do or any kindness I can show to any fellow human being let me do it now. Let me not defer nor neglect it, for I shall not pass this way again."

Email through http://www.astrodates.com/contactus/