Posts

Showing posts with the label Jquery

Select active menu using jquery

Most of the developer has an issue to select active menu in the same header. So here we try with the following example. May be this example will help you, If you have any doubt or question you can comment us. We will reply you ASAP. Home About us Contact us >/li> Suppos here we click on Home menu. Then home li should be selected. My URL is : http://www.example.com/home Output : Home About us Contact us >/li>
Keep reading

PART 2 : Php Add Edit Delete Update Example for freshers

1. Use Part 1 instruction for table and database   2. Create  register.php <?php $con = mysql_connect("localhost","root",""); if (!$con){   die('Could not connect: ' . mysql_error()); } mysql_select_db("sampletest", $con); if($_GET['type'] == 'delete'){     $delquery = "delete from user where id='" . $_GET['id'] . "'";     mysql_query($delquery); }else if($_GET['type'] == 'update'){     $selquery = "select * from user where id='" . $_GET['id'] . "'";     $rsquery = mysql_query($selquery);     $arrquery = mysql_fetch_array($rsquery); } if($_POST['submitbutton'] == 'Add'){     $name= $_POST['name'];     $email= $_POST['email'];     $phone= $_POST['phone'];     $query= $_POST['query'];     $query = "insert into user (name, email, phone, query) values ('".$name."'
Location: India
Keep reading

Jquery Validation Example 2

Fresher need to understand jquery validation. So we have made very easy to understand example as follows. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>  <head>   <title> New Document </title>   <meta name="Generator" content="EditPlus">   <meta name="Author" content="">   <meta name="Keywords" content="">   <meta name="Description" content="">  </head> <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript"> $(document).ready(function() {        // validate signup form on keyup and submit     $("#frmregisterproc").validate({         rules: {            
Keep reading

Jquery Validation Example1

http://docs.jquery.com/Plugins/Validation   Same Example Try in above link with demo   <html> <head> <script src=" http://code.jquery.com/jquery-latest.js "></script> <script type="text/javascript" src=" http://jzaefferer.github.com/jquery-validation/jquery.validate.js "></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> <script> $(document).ready(function(){ $("#commentForm").validate(); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>A simple comm
Keep reading

Tool tip code in Jquery

Follow below code ....  <script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script> <style type="text/css">     .tooltip {     display:none;     background:#333333;     font-size:12px;     height:110px;     width:150px;     padding:25px;     color:#fff;   } </style> <span id="list"><a href="#">list of documents</a></span>.                         <!-- tooltip element -->                         <div class="tooltip">                             <table style="margin:0">                                 <tr>                                     <td class="label">1. Graduatiom Marksheet</td></tr>                                 <tr>                                 <tr>                                                                    <td class="label">2. Certifi
Keep reading

tool tip effect in jquery..

<head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script type="text/javascript">     $(document).ready(function(){         $('.show-tip').hover(             function(){             $('.tool-tip').fadeIn(100);             },             function() {                 $('.tool-tip').delay(100).fadeOut(100);             });     });      </script> </head> <body>        <a href="#" class="show-tip">Learn more</a> <div class="tool-tip" style="display:none"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sapien ante, lobortis semper massa. Quisque non turpis at dolor ultrices facilisis. Nullam nisi libero, tristique ultricies mollis vel, ultricies eu leo. Morbi vitae ligula id mi condimentum ultrices sit amet quis tortor. Donec adipisc
Keep reading

How to make slide show using jquery?

styles <style> body {         font-family:arial; } ul#nav {     list-style-type:none;     margin:10px 0 10px;     padding:0; } ul#nav li {     float:left;     width:30px; } ul#nav li a {     text-decoration:none;     background:#05609A;     color:#fff;     padding:5px; } ul#nav li a.active {     background:#B4F114; } .slide-image {     width:400px;     height:300px;     border:2px solid #05609A;     overflow:hidden; } .slide-image img{     } Head You can find jquery.innerfade.js in google . <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script src="jquery.innerfade.js" type="text/javascript"></script>  <script type="text/javascript">     $(document).ready(function(){         var slideArray = ["ansel_adams1.jpg", "ansel_adams2.jpg", "ansel_adams3.jpg"
Keep reading

slideToggle example in jquery

Simple Javacript and HTML sample code for Jquery Toggle. In this blog whatever we are putting all are working and tested code. Add below code in head tag Body Tag Code Ikhlaque Ahmed Advanced Search Clothing Electronics Clearance Only
Keep reading

How to select first div and change data of its.

Most of the time we need to select first div that time we are just thinking what need to do. But if you think it is very simple just follow below example. Any query reply this post or comments. <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script type="text/javascript">  //runs once page is loaded and ready to be manipulated     $(document).ready(function(){         $('.genre').first().delegate('.album-cover','click',function() {         var str = $(this).text();                str = parseInt(str) + 1;         $(this).clone().addClass('rock').appendTo('.genre:first').html(str);         });     });      </script> </head> <body>        <div class="genre">         <div class="album-cover">1</div>     </div>     <div class="genre
Keep reading

Onmouse hover event change color of textbox in jquery

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery test</title> <style> body {font-family:arial;} </style> <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script type="text/javascript">  //runs once page is loaded and ready to be manipulated     $(document).ready(function(){         $('#first-name').bind('focus', function(){             $(this).css('border','1px solid red');         });         $('#first-name').bind('blur', function(){             $(this).css('border','1px solid blue');         });                });      </script> </head> <body>        <input type="text" name="firstname" id="first-name" />     &
Keep reading

textarea limit code injquery

  Best example for limit of textarea and find count <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery test</title> <style> body {font-family:arial;} </style> <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script type="text/javascript">  //runs once page is loaded and ready to be manipulated     $(document).ready(function(){                var maxNum=100;                $('#status').bind({             keypress : function() {                 var inputText = $(this).val();                 var numChar = inputText.length;                 var charRemain = maxNum-numChar;                 if (numChar <= maxNum) {                     $('.counter').text(charRemain);                 }else if (numChar > maxNum){   
Keep reading

difference between window.onload() and $(document).ready()

window.onload() the main difference is that document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load.  $(document).ready() If you have used window.onload then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.
Keep reading

difference between remove() , hide(), empty.

empty It will remove all child element of selected div hide It will only hide from for. remove It will remove selected element from the form.
Keep reading

What is a different between $(this) and this in jQuery

$(document).ready( function (){      $( '#Valuediv' ).mouseout( function (){         alert($( this ).text());    }); }); $(document).ready( function (){      $( '#spnValue' ).mouseover( function (){         alert( this .innerText);    }); }); In first example $(this) is a jQuery object here you are using  power of jQuery and In Second example  ' this ' keyword, means you are using native JavaScript code.
Keep reading

How to find checkbox checked using jquery?

In Jquery is a very easy solution to check checkbox selected or not. For that, you have to first know the which HTML attributes we can use to check the checkbox selection.  We are done with following two methods. Method 1 if($('#checkbox1').is(':checked')){ //Your Code }else{ //Your Code } Method 2 if($('#checkbox2').attr('checked')){ //Your Code }else{ //your code }  We just started this developer diary for a beginner programmer. If anyone to be a part of this please feel free share with us your problem with solutions. So we can share with more needed coder.
Keep reading

how to hide and show content using jquery?

<script src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js” type=”text/javascript”></script> <script type=”text/javascript”> $( document ).ready(function(){     $("#btn").click(function () {     $("p").toggle("fast");   }); }); </script> <button id="btn">Click Me</button> <p>  Hello this ikhlaque ahmed admin of this blog.. Please follow more info visit on www.webin2.com </p>
Keep reading

how to disable submit button on form submit using Jquery?

Consider we have this HTML form <form id= "check" action= "url.php" method= "get" >  <input name= "username" /> <input id= "submit" type= "submit" /> </form> Here the jquery code to disable submit button  $( '#check' ).submit( function (){ $( 'input[type=submit]' , this ).attr( 'disabled' , 'disabled' ); });
Keep reading

Css trick for jquery menu?

jquerydown.html     <script src="js/jquery-1.3.1.min.js"></script>        <script src="js/Jquerydown.js"></script>         <ul class="down">             <li><a href="#">Cars</a>                 <ul class="sub_menu">                      <li><a href="#"BMW</a></li>                      <li><a href="#">Jaguar</a></li>                      <li><a href="#">Nissan</a></li>                      <li><a href="#">Mazda</a></li>                                     </ul>             </li>                                           </ul>             </div> Jquerydown.js $(function(){     $("ul.down li").hover(function(){             $(this).addClass("hover");         $('ul:first',this).c
Keep reading

Disable/enable a form element using jQuery?

There are two ways to disable/enable form elements. Set the 'disabled' attribute to true or false: // Disable #x $('#x').attr('disabled', true); // Enable #x $('#x').attr('disabled', false); Add or remove the 'disabled' attribute: // Disable #x $("#x").attr('disabled', 'disabled'); // Enable #x $("#x").removeAttr('disabled');
Keep reading

How to insert data using Ajax Jquery?

Image
Keep reading