Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Tuesday, 8 August 2017

File upload show progress bar ajax without formdata and php

File upload show progress bar ajax without formdata and php

ajax file



 <script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  
             
              <script type="application/javascript">
      $(document).on("change", "#myfile", function() {
 
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  var array_ext = ['zip','pdf','jpg', 'png', 'gif', 'bmp', 'jpeg', 'GIF', 'JPG', 'PNG', 'doc', 'txt', 'docx', 'pdf', 'xls', 'xlsx','zip'];
  if(jQuery.inArray( ext, array_ext ) !== -1){


    var file_data = $("#myfile").prop("files")[0];   // Getting the properties of file from file field
    var form_data = new FormData();                  // Creating object of FormData class
    form_data.append("myfile", file_data)              // Appending parameter named file with properties of file_field to form_data
    //form_data.append("user_id", 123)                 // Adding extra parameters to form_data
    $.ajax({
                    url: "upload_avatar.php",
                  //  dataType: 'script',
xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total;
                                    percentComplete = parseInt(percentComplete * 100);
                                    $('.myprogress').text(percentComplete + '%');
                                    $('.myprogress').css('width', percentComplete + '%');
                                }
                            }, false);
console.log(xhr);
                            return xhr;
                        },
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,                         // Setting the data attribute of ajax with file_data
                    type: 'post',
success: function(res){
//alert(res);
  // $('.myprogress').text(0 + '%');
                            //        $('.myprogress').css('width', 0 + '%');
}
           })
  
  }else{
   alert('Not valid file');
  $("#myfile").val('');
  return false;
}
    })

  </script>
    <input id="myfile" type="file" name="myfile" />
    <input type="hidden" value="" name="image_file_path">
    <!--<button id="upload" value="Upload" >Upload</button>-->
     <div class="form-group">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>

                        <div class="msg"></div>
                    </div>
   
    upload_avatar.php

 
<?php

error_reporting(0);
if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {

    $path = "uploads/"; //set your folder path
if(!is_dir($path)){
mkdir($path,0777,true);
}
    //set the valid file extensions
    $valid_formats = array("jpg", "png", "gif", "bmp", "jpeg", "GIF", "JPG", "PNG", "doc", "txt", "docx", "pdf", "xls", "xlsx","zip"); //add the formats you want to upload

    $name = $_FILES['myfile']['name']; //get the name of the file
   
    $size = $_FILES['myfile']['size']; //get the size of the file
//$name= uniqid()."test";
    if (strlen($name)) { //check if the file is selected or cancelled after pressing the browse button.
        list($txt, $ext) = explode(".", $name); //extract the name and extension of the file
        if (in_array($ext, $valid_formats)) { //if the file is valid go on.
           // if ($size < 2098888) { // check if the file size is more than 2 mb
                $file_name = uniqid()."test"; //get the file name
                $tmp = $_FILES['myfile']['tmp_name'];
                if (move_uploaded_file($tmp, $path . $file_name.'.'.$ext)) { //check if it the file move successfully.


                //    echo "File uploaded successfully!!";
                } else {
                    echo "failed";
                }
          //  } else {
              //  echo "File size max 2 MB";
            //}
        } else {
            echo "Invalid file format..";
        }
    } else {
        echo "Please select a file..!";
    }
$data['message'] = "asdads";
echo json_encode($data);
    exit;
}   

Friday, 4 August 2017

Check all with datatables pagination

Check all with datatables pagination

Here example of   Check all with datatables pagination
<body>
<script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="application/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="application/javascript">
$(document).ready(function(e) {
   
var oTable = $('#seller_table').DataTable({"bSort":false, responsive: true});

   // var allPages = oTable.cells( ).nodes( ); // Remove comment if you want select all datatable value

    $('body').on("click","#selectAll",function () {
alert();
        if ($(this).hasClass('allChecked')) {
            $('#seller_table').find('input[type="checkbox"]').prop('checked', false);
//$(allPages).find('input[type="checkbox"]').prop('checked', false); // Remove comment if you want select all datatable value
        } else {
            $('#seller_table').find('input[type="checkbox"]').prop('checked', true);
//$(allPages).find('input[type="checkbox"]').prop('checked', true); // Remove comment if you want select all datatable value
        }
        $(this).toggleClass('allChecked');
    })

$("#delete_new_area").click(function(){
var check_all = [];
$(".new_area_value").each(function(index, element) {
           
if(this.checked){
check_all.push($(this).val());
}
        });


if(check_all.length>0){

// here your code for check value;
}
});

$('#seller_table').on('page.dt', function () {

     $('#selectAll').toggleClass('allChecked');
$('#seller_table').find('input[type="checkbox"]').prop('checked', false);
} );

});



</script>
<table id="seller_table" class="table responsive  table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="seller_table_info">
  <thead>
    <tr role="row">
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 130px;"> <button type="button" id="selectAll" class="main btn btn-primary "> <span class="sub"></span> Select </button></th>
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 280px;">Email</th>
      <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 608px;">Area</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="4" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>11416 NE 91ST ST </td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="5" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>11416 NE 91ST ST </td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="6" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>11416 NE 91ST ST </td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="9" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>Asheville%2C+NC%2C+United+States</td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="10" type="checkbox"></td>
      <td>test@yopmail.com</td>
      <td>Ashburn, VA, United States</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="14" type="checkbox"></td>
      <td>-NA-</td>
      <td>Los Angeles, CA, United States</td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="16" type="checkbox"></td>
      <td>-NA-</td>
      <td>Lower Parel, Mumbai, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="17" type="checkbox"></td>
      <td>myinformation@gmail.com</td>
      <td>Lower Parel, Mumbai, Maharashtra, India</td>
    </tr>
    <tr role="row" class="odd">
      <td><input class="new_area_value" value="20" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test Area, Yerawada, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
    <tr role="row" class="even">
      <td><input class="new_area_value" value="21" type="checkbox"></td>
      <td>-NA-</td>
      <td>Test, Janta Road, Dattawadi, Pune, Maharashtra, India</td>
    </tr>
  </tbody>
</table>
</body>

Monday, 12 December 2016

jquery autocomplete widget example in codeigniter

jquery autocomplete widget example in codeigniter 


// Controller code


public function product_autocomplted(){
$term = $this->input->get('term',true);

$product_autocomplted_q = $this->db->query("SELECT mstproducts.ProductName,mstproducts.ProductID,trnproductimg.Img from mstproducts JOIN trnproductimg on trnproductimg.ProductID = mstproducts.ProductID WHERE mstproducts.ProductName like '%$term%' group by mstproducts.ProductID");
//echo $this->db->last_query();
$i=0;
$data = array();
$count  = $product_autocomplted_q->num_rows();

if($count >0 ){

foreach ($product_autocomplted_q->result_array() as $row){
$data['data'][$i]['lable'] = $row['ProductName'];
$data['data'][$i]['value'] = $row['ProductID'];
$data['data'][$i]['desc'] = $row['Img'];
$i++;

}

}
       
       
        view => html file
         <style>
  .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }
  </style>

  <script>
  jQuery( function() {

var url = "<?php echo base_url(); ?>common/product_autocomplted";


    jQuery( "#search_pp_products,#seach_product_2_pp_products" ).autocomplete({

      source: url,
  //source:project,
      minLength: 2,
      select: function( event, ui ) {


jQuery('body').on("click",".ui-menu-item",function(){



var productid = jQuery(this).find('.ggyy').attr('href');
var productname = jQuery(this).find('.ggyyy').text();
productname = productname.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-')

window.location = "<?php echo base_url(); ?>product-details/"+productname+"/"+productid;

});

return false;

  

      }

    } )

  .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

var html = '';


jQuery.each(item, function(i) {






html =  jQuery( "<li>" )
  .append( "<div class='row'> <div class='col-xs-3'><img id='theImg' src='http://pajjama.in/ProductImg/"+item[i].desc+"'/></div>")
               .append( "<div class='col-xs-9 ggyyy'><a>" + item[i].lable +"</a></div></div><a style='display:none' class='ggyy' href='"+item[i].value+"' ></a>")
               .appendTo( ul );;

 
});
//alert(html)


return html;


             
            }

  } );
  </script>
 
 
  <div class="search-cart ui-widget">



      <input id="search_pp_products" name="q" placeholder="Search" type="text">
     
 

     



      <button type="button" ><i class="fa fa-search"></i></button>



    </div>

Sunday, 27 November 2016

Get geo location using javascript in destop and leptop or computer


Get geo location using javascript in destop and leptop or computer



 <p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getAddress);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";}
    }
function getAddress(position){

  var lat = position.coords.latitude;
  var lon = position.coords.longitude;

  //grab address via Google API using your position
  var apiurl = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lon+'&sensor=true';


  //make the Ajax request
  var xhr = new XMLHttpRequest();

  xhr.open("GET", apiurl);
  xhr.onload = function() {
  var result = JSON.parse(xhr.responseText)

    //if we make a successful request and it returns an address
  if(this.status==200){
  //get formatted address from https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding
  //var result = JSON.parse(xhr.responseText).contents.results[0].formatted_address;
  console.log(result.results[0]['formatted_address']);
alert(result.results[0]['formatted_address']);
      } else {
      //send some general error
     
      }

  }

  xhr.send();
               
}
</script>

Get geo location using javascript in destop and leptop or computer

Tuesday, 15 November 2016

jquery replace all single or double quotes

hello Here simple example of replace single and doble quotes using jquery replace function.

we can use jquery replace function to replace single and double quotes.

example below

jquery replace all single or double quotes

we can pass two parameter to replace single quotes in string

//replace all single quotes
var myStr = myStr.replace(/'/g, '');

//replace all double quotes
var myStr = myStr.replace(/"/g, '');

//or abit of fun, replace single quotes with double quotes
var myStr = myStr.replace(/'/g, '"');

//or vice versa, replace double quotes with single quotes
var myStr = myStr.replace(/"/g, ''');

jquery replace all single or double quotes

Monday, 3 October 2016

ajax image upload with form data in jquery and php

ajax image upload with form data in jquery and php


Hello Here example how to image upload using ajax using php.

and also know how to another value in ajax request.

ajax image upload with form data in jquery and php. please check below example to pass ajax data pass in jquery.

ajax image upload with form data in jquery and php

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="application/javascript">
$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();

        var formData = new FormData();
var text = $('input[type=text]').val();

formData.append('image', $('input[type=file]')[0].files[0]);
formData.append('test', text);


        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
$('#imageUploadForm')[0].reset();
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});
</script>
<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <input type="file" id="ImageBrowse"  name="image" size="30"/>
     <input type="text" id="text"  value="nice man" name="text" size="30"/>
    <input type="submit" name="upload" value="Upload" />
   
</form>
<?php
if(isset($_FILES['image'])){
if(!is_dir('ajax_image')){
mkdir('ajax_image');
}
echo "GET TEXT BOX VALUE = ".$_POST['test'];
$path = $_FILES['image']['tmp_name'];
$new = "ajax_image/".uniqid().$_FILES['image']['name'];
move_uploaded_file($path,$new);
}
 ?>

ajax image upload with form data in jquery and php

Thursday, 5 May 2016

Create simple capcha in php with jquery validation

Create simple capcha in php with jquery validation

Create capcha code need three files

capcha.php
form.php
check-capcha.php

capcha.php

download font arial.ttf addded in fonts folder http://www5.miele.nl/apps/vg/nl/miele/mielea02.nsf/0e87ea0c369c2704c12568ac005c1831/07583f73269e053ac1257274003344e0?OpenDocument


<?php

session_start();

$string = '';

for ($i = 0; $i < 5; $i++) {
    // this numbers refer to numbers of the ascii table (lower case)
    $string .= chr(rand(97, 122));
}

 $_SESSION['random_code'] = $string;

 $data['code'] = $string;
$dir = 'fonts/';

if(!is_dir($dir)){
mkdir($dir);
}

$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 200, 100, 90); // red
$white = imagecolorallocate($image, 255, 255, 255);

imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir."arial.ttf", $_SESSION['random_code']);

$save= "test.png";
  imagepng($image,$save);
  ob_start();
    imagedestroy($image);
echo json_encode($data);
?>

 form.php

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<script type="application/javascript">
$(document).ready(function(e) {

$('#test').validate({
rules:{
capcha:{required: true,
remote: {
                    url: "check-capcha.php",
                    type: "post",
data:{hiddencapcha:function(){return $('#hidden_capcha').val()}}
                 }
}
},
messages:{
capcha:{
remote:"invalid capcha"
}
}
});
$.ajax({
url: "capcha.php",
success: function( result ) {
var newd = JSON.parse(result);

$('input[name=hidden_capcha]').val(newd.code);


$('#capchas').attr('src',"test.png?"+ new Date().getTime());
},error: function(){ alert(result)}
});
   
$('#generate_capcha').click(function(){

$.ajax({
url: "capcha.php",
success: function( result ) {
var newd = JSON.parse(result);

$('input[name=hidden_capcha]').val(newd.code);

$('#capchas').attr('src',"test.png?"+ new Date().getTime());
},error: function(){ alert(result)}
});
});

});

</script>

<form name="test" id="test">

<span id="capchas_images"><img id="capchas" src="test.png" /></span> <a href="javascript:void(0)" id="generate_capcha">Refresh</a>
<input type="text" name="capcha" />
<input type="hidden" name="hidden_capcha" id="hidden_capcha" />
</form>

check-capch.php

<?php


if($_POST['capcha']==$_POST['hiddencapcha'])
{
echo "true";
}else{
echo "false";
    }
?>

Tuesday, 26 April 2016

Read More link in blog in php and Wordpress using Jquery


Read More link  in blog in php and Wordpress using Jquery

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="application/javascript">
jQuery(document).ready(function($) {



jQuery(document).on("click","a.less",function(event){

var href = jQuery(this).text();
if(href=="read more..."){

var moretext =jQuery(this).parent().parent().find('input[name=more]').val();
jQuery(this).parent().html(moretext);
}

if(href=="less"){

var lesstext =jQuery(this).parent().parent().find('input[name=less]').val();
jQuery(this).parent().html(lesstext);

}
return false;
event.preventDefault();

});
});
</script>
<?php

$string="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
?>
<div class="product_text">
                 
                   
<?php   $string = strip_tags($string)." <a class='less' href='javascript:void(0)'>less</a>";
$substr = substr($string, 0, strpos(wordwrap($string, 250), "\n"))." <a class='less' href='javascript:void(0)'>read more...</a>";
?>
                <input type="hidden" name="less" value="<?php echo $substr; ?>" />
                <input type="hidden" name="more" value="<?php echo $string; ?>" />

<?php

echo '<p class="readMore">'.$substr."</p>";


?>


                  
                  </div>

Thursday, 21 April 2016

jquery Star rating plugin with php

 jquery Star rating plugin with php



 <script src="https://code.jquery.com/jquery-2.2.3.js"></script>
 <script type="application/javascript">
 $(document).ready(function(e) {
   $.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

$(function() {
    $('span.stars').stars();
});
});
 </script>



 <style>
  span.stars, span.stars span {
    display: block;
    background: url(images/stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}
</style>

<!--  You can get avarage rating using php query get here where 3.5 -->

 <span class="stars">3.5</span>
 use this image for start rating
 https://drive.google.com/file/d/0BwNaFGxzigBud25jaG1XaWlfU0k/view?usp=sharing

Thursday, 10 March 2016

add smooth scrolling using jquery in menu

Hello Here example Add Smooth scroll menu in menu

simple add this js in your page. check it it. it working file

but you need to add jquery.easing.min.js in your header after jquery

jQuery(function() {
    jQuery('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = jQuery(this.hash);
        target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          jQuery('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });

Saturday, 30 January 2016

File or Image Upload Validation using Jquery Validation

File or Image Upload Validation using Jquery Validation Example

$("#form1").validate({

        rules: {
        
categoryBanner:{

filesize:1048576
},
        },
messages: { categoryBanner: "File must be JPG, GIF or PNG, less than 1MB" },


        highlight: function(element) {
            $(element).css({
                "background-color": "rgba(60, 141, 188, 0.52)",
                "border-color": "red"
            });
        },
        unhighlight: function(element) {
            $(element).css({
                "background-color": "",
                "border-color": ""
            });
        }

    });

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (in bytes)
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param)
});

<input type="file" name="categoryBanner" />
<input type="submit" name="submit"/>

Friday, 18 December 2015

validation method added in jquery like selectbox validation,date formate(dd-mm-yyyy),price(decimal value),phone number,highlight error.

highlight error in jquery validation

validation method added in jquery like selectbox validation,date formate(dd-mm-yyyy),price(decimal value),phone number,highlight error.


selectbox value set option value 0 then set valueNotEquals:"0"
date formate set dateFormat: true and it validation of dd-mm-yyyy formate
price we can to set as decimal  float_number: true
phone if we want to set +91-10degits then set   indiaPhone: true

if you want no highlight you error then it can be added this method


        highlight: function(element) {
            $(element).css({
                "background-color": "rgba(60, 141, 188, 0.52)",
                "border-color": "red"
            });
        },
        unhighlight: function(element) {
            $(element).css({
                "background-color": "",
                "border-color": ""
            });
           
            here added on error color and border you can chanage here to highlight your textbox or any else input

 $('#test').validate({

        rules: {
            coupon_code: {
                required: true
            },
            price: {
                required: true,
                maxlength: 10,
                float_number: true
            },
            vendorname: {
                valueNotEquals: "0"
            },          
            startdate: {
                dateFormat: true
            },
             phone1: {
                indiaPhone: true,
                maxlength: 13
            },
            enddate: {
                dateFormat: true
            },
        },


        highlight: function(element) {
            $(element).css({
                "background-color": "rgba(60, 141, 188, 0.52)",
                "border-color": "red"
            });
        },
        unhighlight: function(element) {
            $(element).css({
                "background-color": "",
                "border-color": ""
            });
        }

    });




});


/** validation for Selectbox */


$.validator.addMethod("valueNotEquals", function(value, element, arg) {
    return arg != value;
}, "Please Select Value");



/** validation for Phone Number  in textbox */

$.validator.addMethod("indiaPhone", function(value, element, arg) {

    var filter = /^[0-9-+]+$/;
    var phone = filter.test(value)


    return arg = phone;


}, "Plese Enter Number");

/** validation for decimal value in textbox */

$.validator.addMethod("float_number", function(value, element, arg) {

    var filter = /^\d{0,8}(\.\d{1,2})?$/;
    var float_number = filter.test(value)


    return arg = float_number;


}, "please Enter Valid Number");


/** date validation for dd-mm-yyyy */

$.validator.addMethod("dateFormat",
    function(value, element, arg) {
        var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;

        var validate = dateformat.test(value);


        return arg = validate;

    },
    "Please Enter a date in the format dd-mm-yyyy.");

Monday, 7 December 2015

Checked Checkbox Value Using Class In Jquey


Here Full Example

How TO Get All Checkbox value Using It's class

Checked Checkbox Value Using Class In Jquey


We can use on change event for every checkbox and getting value of it class.
use push to collect value check it.

<!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>Checkbox Value Example</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="application/javascript">
function getValueUsingClass(){
   /* declare an checkbox array */
   var chkArray = [];
  
   /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
   $(".chk:checked").each(function() {
   chkArray.push($(this).val());
   });
  
   /* we join the array separated by the comma */
   var selected;
   selected = chkArray.join(',') + ",";
  
   /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
   if(selected.length > 1){
   alert("You have selected " + selected);
  
  
   }else{
   alert("Please at least one of the checkbox");
   }
   }
</script>
<body>
<input type="checkbox" class="chk" name="test" value="checked1" onchange="getValueUsingClass()"  />checked1
<input type="checkbox" class="chk" name="test" value="checked2"  onchange="getValueUsingClass()"  />checked2
<input type="checkbox" class="chk" name="test" value="checked3" onchange="getValueUsingClass()"  />checked3
<input type="checkbox" class="chk" name="test" value="checked4" onchange="getValueUsingClass()"  />checked4
<input type="checkbox" class="chk" name="test" value="checked5" onchange="getValueUsingClass()"  />checked5
<input type="checkbox" class="chk" name="test" value="checked6" onchange="getValueUsingClass()"  />checked6
<input type="checkbox" class="chk" name="test" value="checked7" onchange="getValueUsingClass()"  />checked7
</body>
</html>

Thursday, 3 December 2015

Making radio buttons look like buttons and getting radio and label value



Hello

Making radio buttons look like buttons and getting radio and label value

if getting label value then please replace this css

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
    height:100%;
    width:100%;
}

to

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
   }
<script>

$(document).ready(function(e) {


// Get Value Using Label
$('.hour').click(function(){
//alert('hi');

var lable_value = $(this).attr('month');

alert(lable_value);

});

//Get Value using Radio Button

$('input[name="hours"]:radio').click(function(){


radio_value = $(this).val();

alert(radio_value);
});
       
    });
</script>


<ul class="donate-now">
<li>
    <input type="radio" name="hours" value="1" >
    <label class='hour' for="hour" month='hour'>hour</label>
</li>
<li>
    <input type="radio" name="hours" value="4" >
    <label class='hour' for="4hour"  month='4hour'>4hour</label>
</li>
<li>
    <input type="radio" name="hours" value="8" >
    <label class='hour' for="8hour"  month='8hour'>8hour</label>
</li>
<li>
    <input type="radio" name="hours" value="24" >
    <label class='hour' for="24hour"  month='3days'>24hour</label>
</li>

<li>
    <input type="radio" name="hours" value="3" >
    <label class='hour' for="3days"  month='3days'>3days</label>
</li>

<li>
    <input type="radio" name="hours" value="all" >
    <label class='hour' for="all"  month='all'>all</label>
</li>

</ul>

<style>
.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
height:100%;
width:100%;
}

.donate-now input[type="radio"]:checked + label,
.Checked + label {
    background:yellow;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC;
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}
</style>

Tuesday, 3 November 2015

Get Country State and City using JavaScript ajax and php

Hello

Here Example Of set your country,state,city using javascript ajax and php

Country State City Dropdown Using Ajax. ... In the onChage event of the country drop down we have called showhint() function of the javascript and also get current state of city using show_city();

Full Code

--
-- Table structure for table `city`
--

CREATE TABLE `city` (
  `id` int(11) NOT NULL auto_increment,
  `cid` int(11) NOT NULL,
  `sid` int(11) NOT NULL,
  `city_name` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`id`, `cid`, `sid`, `city_name`) VALUES
(1, 1, 1, 'ahmedabad'),
(2, 1, 1, 'rajkot'),
(3, 2, 3, 'afarica city 1'),
(4, 2, 4, 'afarica city 2');

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE `country` (
  `id` int(11) NOT NULL auto_increment,
  `countryname` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`id`, `countryname`) VALUES
(1, 'india'),
(2, 'africa');

-- --------------------------------------------------------

--
-- Table structure for table `state`
--

CREATE TABLE `state` (
  `id` int(11) NOT NULL auto_increment,
  `cid` int(11) NOT NULL,
  `s_name` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `state`
--

INSERT INTO `state` (`id`, `cid`, `s_name`) VALUES
(1, 1, 'gujrat'),
(2, 1, 'bihar'),
(3, 2, 'afarica state1'),
(4, 2, 'afarica state 2');

all_date.php file

<script>
function showHint(str) {

    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {


                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "getstate.php?q=" + str, true);
        xmlhttp.send();
    }

}

function showCity(str) {


    if (str.length == 0) {
        document.getElementById("txtCity").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {


                document.getElementById("txtCity").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "getcity.php?q=" + str, true);
        xmlhttp.send();
    }

}

</script>

<?php

mysql_connect("localhost","root","");

mysql_select_db('test_country');

$get_country = mysql_query("select * from country");



?>
<label> country</label>

<select name="country" onchange="showHint(this.value)" >
<option value="0" >select country</option>
<?php
while($row_country = mysql_fetch_assoc($get_country)){ ?>


<option value="<?php echo $row_country['id']; ?>"/>
<?php echo $row_country['countryname'];  ?>
</option>


<?php
}
?>
</select>
<select name="state" id="txtHint" onchange="showCity(this.value)" >
</select>

<select name="city" id="txtCity">
</select>
</br>

getstate.php file

<option value="0" >select state</option>
<?php
mysql_connect("localhost","root","");

mysql_select_db('test_country');

$q=$_GET['q'];

echo $select_state= mysql_query("select * from state where cid=".$q);

while($result_state= mysql_fetch_array($select_state)){ ?>

<option value="<?php echo $result_state['id']; ?>"><?php echo $result_state['s_name']; ?></option>

<?php }
?>

getcity.php file

<option value="0" >select City</option>
<?php
mysql_connect("localhost","root","");

mysql_select_db('test_country');

$q=$_GET['q'];

echo $select_state= mysql_query("select * from city where sid=".$q);

while($result_state= mysql_fetch_array($select_state)){ ?>

<option value="<?php echo $result_state['id']; ?>"><?php echo $result_state['city_name']; ?></option>

<?php }
?>

Sunday, 30 August 2015

Jquery Popup Not Display If Use Visit Site

Hello

Here Example Of how to create simple popup using jquery. but new things that if you have to add
functionality if user visited site  then not display popup. if user in site then i can be see popup.

For this simple example how to create popup with jquery and if have to add functionality to only one
time see the popup and it will display after some time. here 5 second time out session.

Please check Below Code.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

$(document).ready(function(){
   
   
     var popup = getCookie("newpopup");
     alert(popup);
   
    if(popup == null || popup == undefined || popup == ""){
     setTimeout(function () {
           
          $.cookie('newpopup',"true");
            $(".popup").show();
          }, 5000);
    }else{
        $(".popup").hide();
    }
    $(".close_button").click(function(){
        $(".popup").hide();
    });
   
   
});

</script>
<style>
.popup {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 99999999;
}
</style>

<div>
<div class="popup" style="display: none;">

    <div class="popupbox">
    <div class="close_button"><a href="javascript:void(0)">Close</a></div>
<h1>This is our popup</h1>
<ul>
<li><a href="https://twitter.com/" >twitter</a></li>
<li><a href="https://www.facebook.com/" >twitter</a></li>
<li><a href="https://in.pinterest.com/" >facebook</a></li>
<li><a href="https://instagram.com/">instagram</a></li>
</ul>
</div>
</div>
</div>

Friday, 28 August 2015

How To Set Interval Two Image FadeIn and FadeOut Jquery

Hello

If You want to set two image in and first image come out and another image come in same place
in fadein and fadeOut Effect. I am Create Example for that.

Please Check that this code.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
 var cnt = 0;
setInterval(function(){
   
   
       
         //var tmp = jQuery('ul li img');
       $('ul li img:eq('+cnt+')').fadeOut('fast', function(){
       cnt ==1 ? cnt=0:cnt++;
  $('ul li img:eq('+cnt+')').fadeIn('slow');
 
});
    },4000);
 

 
</script>
<style>
ul {
    list-style: none;
}


</style>

<ul>
<li>
<img src="Gold-jewellery-jewel-henry-designs-terabass.jpg" width="500" height="500" />
</li>

<li>
<img src="e_original.jpg" width="500" height="500" style="display: none;" />
</li>
</ul>



Monday, 24 August 2015

Sliding divs using Next Previous button using jQuery

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
    <script type="">
    $(document).ready(function(){
       
      $(".alldivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".alldivs div:visible").next().length != 0)
            $(".alldivs div:visible").next().show().prev().hide('slide', {direction: 'left'}, 1000);
        else {
            $(".alldivs div:visible").hide('slide', {direction: 'left'}, 1000);
            $(".alldivs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".alldivs div:visible").prev().length != 0)
            $(".alldivs div:visible").prev().show().next().hide('slide', {direction: 'left'}, 1000);
        else {
            $(".alldivs div:visible").hide('slide', {direction: 'left'}, 1000);
            $(".alldivs div:last").show();
        }
        return false;
    });
       
       

   
});
    </script>
</head>

<body>

Sliding divs using Next Previous button using jQuery
<div class="alldivs">
     <div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

</body>
</html>

FadeIn FadeOut divs using Next Previous button using jQuery

Hello,

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
    <script type="">
    $(document).ready(function(){
       
        $(".alldivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".alldivs div:visible").next().length != 0)
            $(".alldivs div:visible").next().fadeIn(1000).prev().fadeOut(1000);
        else {
            $(".alldivs div:visible").fadeOut(1000);
            $(".alldivs div:first").fadeIn(1000);
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".alldivs div:visible").prev().length != 0)
            $(".alldivs div:visible").prev().fadeIn().next().fadeOut(1000);
        else {
            $(".alldivs div:visible").fadeOut(1000);
            $(".alldivs div:last").fadeIn(1000);
        }
        return false;
    });
       
       

   
});
    </script>
</head>

<body>

FadeIn FadeOut divs using Next Previous button using jQuery
<div class="alldivs">
     <div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

</body>
</html>

Show Hide divs using Next Previous Button using Jquery

Hello,

You want to Make Show And Hide Your div content using jquery. Next and Previous.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
    <script type="">
    $(document).ready(function(){
       
        $(".alldivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".alldivs div:visible").next().length != 0)
            $(".alldivs div:visible").next().show().prev().hide();
        else {
            $(".alldivs div:visible").hide();
            $(".alldivs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".alldivs div:visible").prev().length != 0)
            $(".alldivs div:visible").prev().show().next().hide();
        else {
            $(".alldivs div:visible").hide();
            $(".alldivs div:last").show();
        }
        return false;
    });
       
       

   
});
    </script>
</head>

<body>

show hide divs using Next Previous button using jQuery
<div class="alldivs">
     <div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

</body>
</html>