Knowledge Corner: September 2013

Wednesday 25 September 2013

Simple Drop Down Menu with Jquery and CSS

This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery.
This system helps you to minimise the menus list.

Saturday 21 September 2013

Zooming Images using jQuery

Image zoom-in is very useful feature in an eCommerce website to show your product images to viewers in zoom with there ease. So in this tutorial i am going to show you how to make a very simple zoom in image program in which I have used a jQuery plugin

Friday 20 September 2013

How to Create Twitter App

To create Twitter application you need to Visit the Twitter Developers Site https://dev.twitter.com/

The first thing you need to do is head on down to dev.twitter.com. In order to create an account, all you need to do is click on the “Sign In” link at the top right.

How To Add Tweeting With Short URL Functionality To A Website (With PHP)

There is a 140 character limit in Twitter & the length of the URL is a headache. So, auto-shortening the URL with a short URL service will be handy.

The file_get_contents function of PHP helps us to easily get the short URL as a string. Lets use the TinyURLservice & create a simple function:

<?php
function makeShortURL($URLToConvert) { 
     $shortURL= file_get_contents("http://tinyurl.com/api-create.php?url=" . $URLToConvert); 
     return $shortURL; 
}
?>

calling the function with the URL, like:

<?php echo makeShortURL("http://knowledgecornor.blogspot.in/2013/08/how-to-send-sms-using-php_15.html")?>

Result: http://tinyurl.com/lh8znkd

Friday 13 September 2013

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

Thursday 5 September 2013

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

Knowledge Corner

Pages