Since last few days, I am looking for Image Preview Script like template monster. I was doing lots of googling to fing this type of script.

I found one script from javascriptkit.com but its not browser compitible script. (Not working in Google Chrome and Safari). I was searching in goole to make this script compitible with all the browsers. But I wasn’t get any help. At that time, I decided to make such type of script.

After long research and modification, I got success to make such type of script which shows your image properly.I have made script which preview your image same like template monster .

Today I will provide you this script. Click here to see the Demo of this script.

For Download full source code, Click Below links or Click Here

If you have any suggestion or any query regarding this script, then feel free to comment on this post.
Thanks !!

SInce last few dyas, I am facing the problem that how can I change DIV height/width with body or browser height/width ? I want that DIV heoght is increase when browser heignt increase and decrease when browser height decrease.

In short I wnat my DIV size browser friendly. For this, I search many things in google and finally I found the solution by jQuery. In this post, I will give you code that how to change your DIV height/width with browser height/width veries.

First download latest jQuery file. After this make one DIV for which you want to change the height/width.

<div id=”test” style=”background-color:#000;”></div>

In above DIV, i give background color black so you can see the change. Now write below code in you head section.I am giveng you some code whcih use for this.

$(window).width(); => It returns width of the body

$(document).width(); => It returns width of the whole window

$(window).height(); => It returns height of the body

$(document).height(); => It returns height of the whole window

Now for an example you want the div height same as your body

then use below code. First make one div like

<div id=”test” style=”background-color:#000;”></div> I set blacj background color because you can see the change.

Suppose in your web page, there is one header which height is 100px and you want the above div height after header. So follow below code. Put this code in head section.

Thats it. You can also use span tag instead of div. You can set your DIV height/width as page resize. If you have any confusion or query about this than comment on this.

Thanks You !

Today I will Give you code to delete records using JQuery and PHP with Animation effect.

It is very simple to understand. First you have to download jquery.js which is availble HERE.

After that copy this code in your PHP file and run it.

Enjoy the jQuery effect.

If you like this post then comment on this.If you have any query related to PHP then you can also tell me.

I will try my best to solve your problem.

Thanks…..

Yesterday when i was searching, i was found some new thing.

In this post i will show yuo that how to make afancy Username availability checker using AJAX and PHP wiyh jQuery.

If you are looking for such kind of effect for checking username availability then defenately  this post helps you.

Now let’s see hoe to check username using AJAX and PHP with jQyery.

First of all, write this code in your html code:

<div >
 User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
 <span id="msgbox" style="display:none"></span>
</div>

In this code, “span” with id “msgbox” shows the username availability message from ajax.

CSS Code :

I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.

Javascript code:

First of all you have to download jQuery library and include like this :

<script src="jquery.js" type="text/javascript" language="javascript"></script>

And when the focus is moved from the textbox of username the following function is called which call “user_availability.php” through ajax and display the appropriate message with fading effect.

$("#username").blur(function()
{
 //remove all the class add the messagebox classes and start fading
 $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
 //check the username exists or not from ajax
 $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
 {
  if(data=='no') //if username not avaiable
  {
   $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
   });
  }
  else
  {
   $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
   });
  }
 });
});

As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.

After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.

PHP Code :

//this varible contains the array of existing users
$existing_users=array('timir', 'ankur' ,'binoy','dhruv');
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
 //user name is not available
 echo "no";
}
else
{
  //username available i.e. user name doesn't exists in array
  echo "yes";
}

In the above PHP code, I’ve added four usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.

First of all DOWNLOAD jQuery library.

If you want to see DEMO, CLICK HERE

Please comment on this Post.

Here I explain one Example how AJAX used in PHP ?

First create a database displayed below:

Then You have to create HTML form:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

Let Me Explained :

The HTML Form :

As you can see it is just a simple HTML form with a drop down box called “users” with names and the “id” from the database as option values.

The paragraph below the form contains a div called “txtHint”. The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called “showUser()” is executed. The execution of the function is triggered by the “onchange” event.

In other words: Each time the user changes the value in the drop down box, the function showUser() is called.

Javascript used in AJAX

This javascript saved as’selectuser.js‘.

var xmlHttp;

function showUser(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 }
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

The showUser() Function

If an item in the drop down box is selected the function executes the following:

1. Calls on the GetXmlHttpObject function to create an XMLHTTP object
2. Defines the url (filename) to send to the server
3. Adds a parameter (q) to the url with the content of the dropdown box
4. Adds a random number to prevent the server from using a cached file
5. Call stateChanged when a change is triggered
6. Opens the XMLHTTP object with the given url.
7. Sends an HTTP request to the server

At Last You have to create one PHP page on which you want Result :

This PHP form shown below .

The PHP Page

The server page called by the JavaScript, is a simple PHP file called “getuser.php”.

The page is written in PHP and uses a MySQL databse.

The code runs a SQL query against a database and returns the result as an HTML table:

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['FirstName'] . "</td>";
 echo "<td>" . $row['LastName'] . "</td>";
 echo "<td>" . $row['Age'] . "</td>";
 echo "<td>" . $row['Hometown'] . "</td>";
 echo "<td>" . $row['Job'] . "</td>";
 echo "</tr>";
 }
echo "</table>";

mysql_close($con);
?>

When the query is sent from the JavaScript to the PHP page the following steps are occures:

1. PHP opens a connection to a MySQL server
2. The “user” with the specified name is found
3. A table is created and the data is inserted and sent to the “txtHint” placeholder

If you like my post then please comment on this.

Thanks……

Ajax is a set of programming techniques or a particular approach to Web programming. These programming techniques involve being able to seamlessly update a Web page or a section of a Web application with input from the server, but without the need for an immediate page refresh. This doesn’t mean that the browser doesn’t make a connection to the Web server.

Ajax doesn’t have to use XML, and neither does it have to be asynchronous. Ajax applications can use XML, and they can be updated asynchronously. These are quite common tricks and techniques used to update the page, but they are not tied to these technologies.

Here are the technologies he specifically mentioned:

• XHTML and CSS
• The Document Object Model (DOM)
• JavaScript
• XML and XSLT
• The XMLHttpRequest object

In reality, to create an application using Ajax techniques you need only three of these: XHTML, the DOM, and JavaScript. If you do any amount of development with Ajax techniques, though, you will almost certainly need to use all of the technologies at some point.

You’ll also probably need a server-side language to handle any interaction with the server. This is most typically one of the following three:

• PHP
• ASP.NET (Visual Basic.Net/C#)
• Java

This is the Overview of AJAX.

In my Next Post I will write that how to use AJAX in PHP ?

Don’t Forget to leave comment.

Thanks…….