Dynamic Application for JQuery

JQuery Now in this section we will explain you the example and the code explanation about the jquery, in this section we will try to give some advance jquery examples, like jquery with the database, jquery with ajax and etc.

Example 1: Heading Hover: This is the Example of the Heading hover which gives a piece of information on mouseover the heading (image). In this examples there are three headings, each heading having some information and on mouseover of each heading show the related information of the headings.

Php Page Name: headingHover.php

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

< script type=”text/JavaScript ” src=”jQuery/jquery.js”>< /script>

< script type=”text/JavaScript “>
$(document).ready(function(){

1. $(“.menu a”).hover(function() {
2. $(this).next(“em”).animate({opacity: “show”, top: “-75”}, “slow”);

3. }, function() {
4. $(this).next(“em”).animate({opacity: “hide”, top: “-85”}, “fast”);
});
});
< /script>
5. < style type=”text/css”>
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(images/button.gif) no-repeat center center;
}
.menu li em {
background: url(images/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
6. < /style>
< /head>

< body>

7.< ul class=”menu”>
< li>
< a href=”http://www.ebizelindia.com”>Heading1< /a>
< em>This contains some information about the Heading1< /em>
< /li>
< li>
< a href=”http://www.ebizelindia.com”>Heading2< /a>
< em>This contains some information about the Heading2< /em>
< /li>
< li>
< a href=”http://www.ebizelindiao.com”>Heading3< /a>
< em>This contains some information about the Heading3< /em>
< /li>
8.< /ul>
< /body>
< /html>

Explanation: In the above example, script uses some code which is described below.

1. $(“.menu a”).hover(function() { // This is the hover function which acts on mousehover .

2. (this).next(“em”).animate({opacity: “show”, top: “-75”}, “slow”); // animate is an another function having which works on mousehover , it have some argument which defines the appearance and the position of the animated block.

3. }, function() {

4. $(this).next(“em”).animate({opacity: “hide”, top: “-85”}, “fast”); // same as above but acts for hide headings. }); });

Example 2 (Searching Text) Php Page Name: jquery_search.php:

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
< title>test< /title>
< script type=”text/JavaScript ” language=
“JavaScript ” src=”jQuery/jquery.js”>< /script>
< script type=”text/JavaScript ” language=
“JavaScript ” src=”jQuery/jquery.quicksearch.js”>< /script>
< script type=”text/JavaScript ” charset=”utf-8″>
$(document).ready(function () {
$(‘table#searchoption tbody tr’).quicksearch({
stripeRowClass: [‘odd’, ‘even’],
position: ‘before’,
attached: ‘#searchoption’,
labelText: ‘Search ‘,
loaderImg: ‘images/loading.gif’
});
$(‘#checkAllAuto’).click( function(){ $(“INPUT[type=’checkbox’]”).
attr(‘checked’, $(‘#checkAllAuto’).is(‘:checked’)); } )
});
< /script>
< /head>
< body>
< form name=”frm” action=”” method=”post”>
< table border=”0″ id=”searchoption” align=”left”
width=”400″ cellpadding=”2″ cellspacing=”2″>
< tr>
< td> < /td>
< /tr>
< tr>
< td>
< table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”50%”>
< tr>
< td>kamal< /td>
< /tr>
< tr>
< td>Aman< /td>
< /tr>
< tr>
< td>Tarun< /td>
< /tr>
< tr>
< td>Dhirendra < /td>
< /tr>
< /table>
< /td>
< /tr>
< /table>
< /form>
< /body>
< /html>

Searching text is a good example for helping in searching of the name, address, and other details pf a user with simple typing the text which you want to be search.

If you have some text or data in the database or hard coded the text, there is a text box called search box which search your text enter in the search box.

Code explanation: 2 files are included in the script, one of them have the search script, called jquery. Quick search is (and one is jquery, js the normal jquery file ). This file having the jquery search concept so this is better to include this file before using the jquery search script.

$(document).ready(function () {
$(‘table#searchoption tbody tr’).quicksearch({
stripeRowClass: [‘odd’, ‘even’],
position: ‘before’,
attached: ‘#searchoption’,
labelText: ‘Search ‘,
loaderImg: ‘images/loading.gif’
});
$(‘#checkAllAuto’).click( function(){ $(“INPUT[type=’checkbox’]”).
attr(‘checked’, $(‘#checkAllAuto’).is(‘:checked’)); } )
});

The above script uses in the search example, this is the script for the search option. If you can see the hml part, it have an option “id= search option” in the table. Which is for applying the serch script on the table data?/td>

Example3 (mages Magnifier)

Php Page Name: clickImages.php

< script type=”text/JavaScript ” src=”jQuery/jquery.js”>< /script>

< script type=”text/JavaScript “>
$(document).ready(function(){

$(“h2”).append(‘< em>< /em>’)

$(“.thumbs a”).click(function(){

var largePath = $(this).attr(“href”);
var largeAlt = $(this).attr(“title”);

$(“#largeImg”).attr({ src: largePath, alt: largeAlt });

$(“h2 em”).php(” (” + largeAlt + “)”); return false;
});

});
< /script>

< style type=”text/css”>
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
< /style>
< /head>

< body>

< h2>Illustrations< /h2>

< p>< img id=”largeImg” src=”images/img6.jpg” alt=”Large image” />< /p>

< p class=”thumbs”>
< a href=”images/img1.jpg” title=”Image 2″>< img src=”images/img1-thumb.jpg” />< /a>
< a href=”images/img2.jpg” title=”Image 3″>< img src=”images/img2-thumb.jpg” />< /a>
< a href=”images/img3.jpg” title=”Image 5″>< img src=”images/img3-thumb.jpg” />< /a>
< a href=”images/img4.jpg” title=”Image 6″>< img src=”images/img4-thumb.jpg” />< /a>
< a href=”images/img5.jpg” title=”Image 6″>< img src=”images/img5-thumb.jpg” />< /a>
< /p>

< /body>
< /html>

Explanation: This is an example of the image display from thumbnail to large form on sim[ple click to the thumbnails, a user seens many thumbnails when he clicks on the thumb nail the large form of that picture will be appear and while on click on the other image the next pics, is appears.

Example 4: (Search country with suggestions)

Php Page Name: search Country.php

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>

< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title>AUto suggest country< /title>

< script type=”text/JavaScript ” src=”jQuery/jquery.js”>< /script>
< script type=”text/JavaScript “>
function findCountry(inputString) {
if(inputString.length == 0) { //Hide the suggestion box.
$(‘#suggestions’).hide();
} else {
$.post(“rpc.php”, {queryString: “”+inputString+””}, function(data){
if(data.length >0) {
$(‘#suggestions’).show();
$(‘#autoSuggestionsList’).php(data);
}
});
}
} // findCountry

function searchOption(thisValue) {
$(‘#inputString’).val(thisValue);
setTimeout(“$(‘#suggestions’).hide();”, 200);
}
< /script>

< style type=”text/css”>
body {
font-family: verdana;
font-size: 10px;
color: #000;
}

h3 {
margin: 0px;
padding: 0px;
}

.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color:#5FA2C9;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 3px solid #0099CC;
color: #fff;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList li {

margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}

.suggestionList li:hover {
background-color: #C55E18;
}
< /style>
< /head>
< body>
< div>
< form name=”searchCountry”>
< div>
Country Name:
< br />
< input type=”text” size=”30″ value=”” id=”inputString”
onkeyup=”findCountry(this.value);” onblur=”searchOption();” />
< /div>

< div class=”suggestionsBox” id=”suggestions” style=”display: none;”>
< img src=”images/upArrow.png” style=”position:
relative; top: -12px; left: 30px;” alt=”upArrow” />
< div class=”suggestionList” id=”autoSuggestionsList”>

< /div>
< /div>
< /form>
< /div>

< /body>
< /html>

Secede Php Page With this Page is:

< ?php
$db = mysql_connect(‘localhost’, ‘root’, ”);
## Create Database connection
if(!$db) {
echo ‘ERROR: Could not connect database.’;
## Show error If database not connected
} else {

mysql_select_db(‘autocomplete’, $db);
## Select the Database
if(isset($_POST[‘queryString’])) {
$queryString = mysql_real_escape_string

($_POST[‘queryString’]);

if(strlen($queryString) >0)
{ ## Checks the length of posted queryString greater than 0.

$query = “SELECT value FROM countries
WHERE value LIKE ‘$queryString%’ LIMIT 10″;
## Mysql Query $result = mysql_query($query);
if($result) {
while ($rs = mysql_fetch_assoc($result)) {
echo ‘< li onClick=”fill(\”.$rs[‘value’].’\’);”>’.$rs[‘value’].'< /li>’;
}
} else {
echo ‘ERROR: There was a problem with the query.’;
}
} else {
// Don’t write anything.
} // There is a queryString.
} else {
echo ‘No direct access!’;
}
}
?>

Explanation: Country search is an example to search your country while typing initials of the country, when a user types the initial letter of the any country, the scripts shows all the country starts with the initial letter typed in the text box. User can choose the desired country. This actually helps the user to find the country instantaneously.

This is the example of the jquery using the data from the database, this script also includes an another file called rpm, which have the php coding.

Example 5: (Demo Box)

Php Page Name: demo Box.php

This is an example of a jquery box which appears, when we click on the button. The box comes on the same page without refreshing the page , basically box having an another page data which appears in the box without reloading the page , it is very useful script for creating a form, displaying a message and any thing which you want to come on the same page where the action is fired.

It includes an additional file called facebox.js which has the function or script related to the box. it also include an css called facebox.css, having the css related to the face box.

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
< title>Demo box< /title>
< link href=”css/facebox.css” rel=”stylesheet” type=”text/css” />
< script type=”text/JavaScript ” language=”JavaScript ”
src=”jQuery/jquery.js”>< /script>
< script type=”text/JavaScript ” language=”JavaScript ” src=”jQuery/facebox.js”>< /script>
< script type=”text/JavaScript ” charset=”utf-8″>
$(document).ready(function () {
$(‘a[rel*=ebizbox]’).facebox({loadingImage: ‘images/jquery/loading.gif’
, closeImage: ‘images/jquery/closelabel.gif’, overlay: false});
});
< /script>
< /head>
< body>
< center>
< form name=”mainfrm” method=”post” action=”demoBox.php”>
< table width=”100%” valign=”top” border=”0″
cellspacing=”0″ cellpadding=”0″ bgcolor=”#ffffff”>
< tr>
< td align=”left” valign=”top” class=”navleft-box”> < /td>
< /tr>
< tr>
< td width=”100″ align=”left”>< lable>< b>< u>click to view comment< /u>:
< /b>< /lable> < a href=”addInfo.php” rel=”ebizbox”>
< img src=”images/add2.gif” align=”absmiddle”
border=”0″ alt=”Add Category”>< /a>< /td>
< /tr>
< /table>
< /form>
< /center>
< /body>
< /html>

Second Php Page of this script:

Php Page Name: addInfo.php