Thursday, December 26, 2013

How to avoid user to enter a letter more than twice continuously

I have created a small example which will prevent user entering any character more than twice continously.

<!DOCTYPE html>
<html>
<script>
document.addEventListener('keypress', function(event) {
   var input = (document.getElementById("myInput").value);
    if(input.length > 1)
    {
        var enteredValue = String.fromCharCode(event.keyCode);
        var lastEnteredValue = input.substr(-1, 1);
        var lastBeforeValue = input.substr(-2, 1);

        if(enteredValue== lastEnteredValue && enteredValue == lastBeforeValue)
        {
          event.preventDefault();
        }
    }

}, true);
</script>
<body>
<input type = "text" id= "myInput">
</input>
</body>
</html>

The above example works perfectly if user enters two a's like "aa" and he will be blocked to enter another small "a". But he can still enter "A", which means we will allow "aaA".

To avoid even capital letters, you can add the below lines

var enteredValue = String.fromCharCode(event.keyCode).toLowerCase();
        var lastEnteredValue = input.substr(-1, 1).toLowerCase();
        var lastBeforeValue = input.substr(-2, 1).toLowerCase();

Fiddle for the same is here : http://jsfiddle.net/Vk65X/

Wednesday, December 25, 2013

How to validate simple html form using jquery validate plugin

In this example, I have created a simple form which has user name and password as input fields.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
// Validate plugin which I got from http://plugins.jquery.com/validation/
<script src="jquery.validate.js"></script>
</head>

<body>
<script>
$(function() {
 $("#form1").validate({
                // Use this one to place the error
  errorLabelContainer: $("#form1 div.errorHolder")
 });
});
</script>
<form id="form1" action="">
  <p>
   <label>Username</label>
   <input name="user" title="Please enter your username " required minlength="5">
  </p>
  <p>
   <label>Password</label>
   <input type="password" maxlength="12" name="password" title="Please enter your password" required minlength="5">
  </p>
                 // Div tag to hold error messages
  <div class="errorHolder">
  </div>

  
   <input class="submit" type="submit" value="SUBMIT"/>
  
</form>
</body>
</html>

Simple sign in form example

You can copy the above code and save it in a file .html to test it.

Tuesday, December 24, 2013

How to render a simple data table using yui 3

In this tutorial I am gonna show you how to display a basic data table using yui 3.

1. Create a html file with basic information like just html tags

2. Insert the following line in between the header tags. This will point us to the YUI-3 CDN

<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>

3. Now, we need to define any div tag or the just whole body with the yui3 skin class and another div tag to hold the example datatable

4. Now use YUI datatable widget with the method .use() , like below in between the script tags

5. Defining datasources and rendering table

  
     YUI().use("datatable", function (Y) {

    // Define datasource in key value pairs
    var dataSource = [
                                { id: "ga_3475", name: "gadget",   price: "$6.99" },
                                {id: "sp_9980", name: "sprocket", price: "$3.75" },
                                { id: "wi_0650", name: "widget",   price: "$4.25" }
                               ];
  
    // create a new instance for datatable
    var dataTable= new Y.DataTable({

        // Table header names can be labelled like this
        // columns: [{key:"id", label:"ID"}, {key:"name",label:"NAME"}, {key:"price", label:"PRICE"}],     
        columns: ["id", "name", "price"],
        data   : dataSource,
        summary: "Price sheet for inventory parts",
        caption: "Jhtml Basic DataTable YUI 3"
    });
  
// Mentioning where exactly to render the datatable
    dataTable.render("#dataTableHolder");

});

6. Now putting all together, your html should look like below

Here is the fiddle for that http://jsfiddle.net/BLKLH/

Monday, December 23, 2013

How to find user entered value is present in the autocomplete search list

I have created an example here to find whether user entered value is present in the autocomplete search list or not.

How I did this ?
Jquery autocomplete has inbuilt response function, which gets called at the end of every search.
So, just look at the response content and find if the user input value matches. Save your boolean there and

finally, when you submit your form -- Just check this boolean and take your action based on that.

<!DOCTYPE html>
<html>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  var valuePresentInSearchList = false;

  $(function() {
     // ON SUBMIT DO SOME ACTION
      $("#SUBMIT").bind("click", function() {
          alert('Entered value: '+$("#tags").val() +'     Its presence in list: ' + valuePresentInSearchList);

      });

      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
          response: function( event, ui ) {
              valuePresentInSearchList = false;
              jQuery.each( ui.content, function( key, value ) {
                  for( k in value ) {
                   // alert( "key is " + [ k ] + ", value is " + value[ k ] );
                      // CHECK HERE IF INPUT VALUE IS EXACTLTY MATCH
                      // YOU CAN ALSO DO PATTERN MATCH HERE
                      if( value[ k ] ==$("#tags").val())
                      {
                      valuePresentInSearchList = true;
                      }

              }
          });
       }
      });
    });

  </script>
  <link rel="stylesheet" href="/resources/demos/style.css">
      <body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
      <button type= "submit" id= "SUBMIT" onclick="validate()" value="SUBMIT">  BUTTON</button>
</div>


</body>
</html>

You can simply copy the above code and paste it in a NEW .html file to test it.

Also I have created fiddle for the same : http://jsfiddle.net/GCnEW/

NEXT TIP Best way of using jquery ajax

Sunday, December 22, 2013

How to close jquery menu on page scroll down

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>


<!-- STYLE-->
<style>
#main-nav{
    width:150px;
}
body{
    height:1000px;
   
}
</style>


<!--SCRIPT-->
<script>
$(function() {
    $( "#main-nav" ).menu();
  });

 <!--Fire on scroll event and collapse all menu active items -->
window.onscroll = function (event) { 
  $( "#main-nav" ).menu( "collapseAll", null,true );
}
</script>


<body>
<div id="sub-link-bar"> </div>

 <div id="wrap">

 <div class="roundfg">
 <ul id="main-nav">
     <li><a class="main-link" href="#">Home</a>
         <ul class="sub-links">
         <li><a class="main-link" href="#">Home</a></li>
         </ul>
     </li>
     <li><a class="main-link" href="#">Tutorials</a>
         <ul class="sub-links">
             <li><a href="#" >Design</a> </li>
             <li><a href="#">HTML &amp; CSS</a> </li>
             <li><a href="#" >Other</a> </li>
             <li><a href="#">PHP</a> </li>
             <li><a href="#">Ruby</a> </li>
             <li><a href="#">Site Builds</a> </li>
             <li><a href="#">Tools &amp; Tips</a> </li>
             <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
         </ul>
 </li>


 <li><a class="main-link" href="#">Videos</a>
 <ul class="sub-links">
 <li><a href="#">Screencasts</a> </li>
 </ul>
 </li>
 <li><a class="main-link" href="#">About</a>
 <ul class="sub-links">

 </ul>
 </li>
 </ul>
</div></body>
</html>

SEE ALSO

Simple Sign-in form using HTML and CSS

How to place text inside a circle using CSS

I also have created the fiddle for the same http://jsfiddle.net/3XED6/