Module 4: Advance JQuery

Module 4: Advance 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 database, jquery with ajax and etc.
Example 1: Heading Hover: This is the Example of the Heading hover which gives an information on mousehover the heading (image). In this examples there are three headings, each heading having some information and on mousehover of each heading show the related information of the headings.
Php Page Name: headingHover.php

http://www.techumour.tk/2017/07/module-4-advance-jquery.html< !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>Animated Menu Hover 1< /title>

< 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.techumor.com">Heading1< /a>
   < em>This contains some information about the Heading1< /em>
< /li>
< li>
   < a href="http://www.techumor.com">Heading2< /a>
   < em>This contains some information about the Heading2< /em>
< /li>
< li>
   < a href="http://www.techumor.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


< !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>Image Changing< /title>

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


Module 4: Advance JQuery Module 4: Advance JQuery Reviewed by Techumor on July 28, 2017 Rating: 5
Powered by Blogger.