Play Notification Sound using Jquery.

---

How to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag.

Read more >>

Example will demonstrate how a web page can communicate with a web server using Ajax

---

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:
When a user types a character in the input field above, the function "showHint()" is executed. The function is triggered by the "onkeyup" event:

<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<b>Start typing a name in the input field below:</b>
<form>
First name: <input onkeyup="showHint(this.value)" type="text" />
</form>
Suggestions: <span id="txtHint"></span>
</body>
</html>

The page on the server called by the JavaScript above is a PHP file called "gethint.php" The source code in "gethint.php" checks an array of names, and returns the corresponding name(s) to the browser:

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Anil";
$a[]="Brittany";
$a[]="Bhaskar";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Karthik";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raj";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Srinu";
$a[]="Suneel";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }
//output the response
echo $response;
?>

How to install gnome3 on ubuntu

---

This article will help you to install gnome3 on ubuntu. people who are not interested in using unity can install gnome environment on their ubuntu machine.Gnome3 now comes with various new features

Read more >>

How to install curl on ubuntu

---

We only need to run following commands to install CURL for PHP on Ubuntu

srinu@ebiz:~$ sudo apt-get update

srinu@ebiz:~$ sudo apt-get install php5-curl

srinu@ebiz:~$ sudo service apache2 restart

Birthday Dropdown using html and js validation

---

Birthday Dropdown using html and js , validation for selected year is not leaf year the day will show only 28 days

<html>
 <head>
 <script type="text/javascript">
  function call(){
 var kcyear = document.getElementsByName("year")[0],
  kcmonth = document.getElementsByName("month")[0],
  kcday = document.getElementsByName("day")[0];
       
 var d = new Date();
 var n = d.getFullYear();
 for (var i = n; i >= 1950; i--) {
  var opt = new Option();
  opt.value = opt.text = i;
  kcyear.add(opt);
    }
 kcyear.addEventListener("change", validate_date);
 kcmonth.addEventListener("change", validate_date);

 function validate_date() {
 var y = +kcyear.value, m = kcmonth.value, d = kcday.value;
 if (m === "2")
     var mlength = 28 + (!(y & 3) && ((y % 100) !== 0 || !(y & 15)));
 else var mlength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m - 1];
 kcday.length = 0;
 for (var i = 1; i <= mlength; i++) {
     var opt = new Option();
     opt.value = opt.text = i;
     if (i == d) opt.selected = true;
     kcday.add(opt);
 }
     }
    validate_date();
  }
 </script>
 </head>
   <body>
        <div class="register-form-row">
      <div class="register-form-row-col">Date Of Birth :</div>
      <div class="register-form-row-col">Month :<select name="month" onchange="call()" >
         <option value="">select</option>
         <option value="1">Jan</option>
         <option value="2">Feb</option>
         <option value="3">Mar</option>
         <option value="4">Apr</option>
         <option value="5">May</option>
         <option value="6">Jun</option>
         <option value="7">Jul</option>
         <option value="8">Aug</option>
         <option value="9">Sep</option>
         <option value="10">Oct</option>
         <option value="11">Nov</option>
         <option value="12">Dec</option>
        </select>
        Day :<select name="day" >
           <option value="">select</option>
          </select>
        Year:<select name="year" onchange="call()">
           <option value="">select</option>
          </select>
               </div>
       </div>
   </body>
</html>

Demo

Date Of Birth :

Month : select Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Day : select Year: select

Get the value from a select box and display their value.Using jQuery

---

Display select box selected value using jQuery......

<html lang="en">
 <head>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 </head>
  <body>
  <p></p>
 <select id="kc">
   <option>knowledge</option>
   <option>cornor</option>
   <option>knowledgecornor</option>
   <option>srinu chilukuri</option>
 </select>
 <script>
   function displayVals() {
   var singleValues = $("#kc").val();
   $("p").html("<b>value:</b> " +
   singleValues );
   }
   $("select").change(displayVals);
   displayVals();
 </script>
 </body>
</html>

Demo:

knowledge cornor knowledgecornor srinu chilukuri

Facebook Slide Out Like Box Widget For Blog Or Website

---

Stylish facebook like box widget is design and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect.
For you to add this great widget to your blog, simply follow the few steps below.

Read more >>