RSS

カテゴリー別アーカイブ: jQuery

Userfriendly jQuery for Input

man at hand
The blank input field sometime makes me confused what I should enter.

That’s why user-frendly website has some example text displayed by gray color.
It not so difficult to make, and I think almost all Crossmedia user already know how to implement it into the campaign.

Here is one example by using jQuery.

PreSet Text for Input fields

1. Layout items

Just drop some input fields, and assign them to the database column.
Item Layout

2. Check the name

Because this tip identify each input field by class name, so you need to check the exact name by display preview of the campaign page. Then add identical class name by using another jQuery,
To do so, you need to know the name of each input fields. You can check it by using FireBug with FireFox. or even you can simply check the code of preview page.
Check name of input field

 

3. Add script

Here is the main part of jQuery script you need to add.

$(".focus1").focus(function(){
          if(this.value == "Company Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus1").blur(function(){
          if(this.value == ""){
               $(this).val("Company Name").css("color","#969696");
          }
     });

It because this tip require to have default value for each input fields, so I give the value by script as well. Entire of script looks like below.

<script type="text/javascript">// <![CDATA[
$(function(){
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus1');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Company Name";
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus2');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "Your Name";
	$('input[name="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"]').addClass('focus3');
	document.dsmf_form.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.value = "example@example.com";

     $(".focus1").focus(function(){
          if(this.value == "Company Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus1").blur(function(){
          if(this.value == ""){
               $(this).val("Company Name").css("color","#969696");
          }
     });
	 $(".focus2").focus(function(){
          if(this.value == "Your Name"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus2").blur(function(){
          if(this.value == ""){
               $(this).val("Your Name").css("color","#969696");
          }
     });
	 $(".focus3").focus(function(){
          if(this.value == "example@example.com"){
               $(this).val("").css("color","#000");
          }
     });
     $(".focus3").blur(function(){
          if(this.value == ""){
               $(this).val("example@example.com").css("color","#969696");
          }
     });
}); 
// ]]></script>

4. Add CSS

I also change the color of text by using CSS. Here is the code.

.focus1 {
    color: #969696
}

It will help visitor, and hopefully they won’t be confused.

NOG

広告
 
 

タグ: , , , , , , ,

Mailchecker on DSMX

Recently, I saw quite useful jQuery plugin which was introduced on the Japanese Geek website, aka Gigazine.
It says, it could reduced 50% of returned email because of typo or wrong email address which visitor registered in user registration form.

Kicksend/mailcheck · GitHub
https://github.com/Kicksend/mailcheck

How we decreased sign up confirmation email bounces by 50% – The Kicksend Blog
http://blog.kicksend.com/how-we-decreased-sign-up-confirmation-email-bounces-by-50/

Because I love to try to integrate any kind of useful jQuery plugin into DSMX, so let me share how you can do it at here.

mailcheck.js

The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.

Example on DSMX

Just try to type ‘test@hotmai.con’ or ‘test@gmai.com’. It will suggest you most close actual domain name.

mailcheck example

OK, now here is how to integrate it into DSMX.

1. Upload .js file

upload-jsfile

2. Load .js in the page
Please replace server domain, campaign name, account ID according to your setting.

LoadJS

3. Add class name or ID to the input element

AddClassName

4.Place div element where it should display suggestion

HintPlaceHolder

5. Place Javascript.

mailcheck-JavaScript

Here is my script.

You can add any domain or topLevelDomains in the array. Or simply comment it out, then it will take default value from .js file.

var domains = ['hotmail.com', 'gmail.com', 'aol.com','directsmile.com'];
var topLevelDomains = ["com", "net", "org"];
$('.email').on('blur', function() {
 $(this).mailcheck({
 domains: domains, // optional
 topLevelDomains: topLevelDomains, // optional
 // distanceFunction: superStringDistance, // optional
 suggested: function(element, suggestion) {
 // callback code
 var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left" style=""> <img width="80" height="147" src="template_image/man with query.png" /> </td> <td valign="top" align="left" style=""> <p>Did you mean</p><p class="sug">'+suggestion.full+' ?</p></tr> </tbody> </table>';
 $('#hint').html(suggestion).fadeIn(150)
 },
 empty: function(element) {
 // callback code
 var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left" style=""> <img width="80" src="template_image/serving document.PNG" /> </td> <td valign="top" align="left" style=""> <p>Looks like your email address is valid!</p></p></tr></tbody></table>';
 $('#hint').html(suggestion).fadeIn(150)
 }
 });
});

 

Have a fun!! 🙂

 

タグ: , , , , , , , , ,