My Information: Jquery

Showing posts with label Jquery. Show all posts

Wednesday 1 November 2017

only number or letter input in textbox using jquery example

you can set using this id and class name

this example for if you want to input onlu number or letter other you can not enter this

Please check this example

Tuesday 24 October 2017

Google Translate using javascript english to french without select value from dropdown on page load

Saturday 16 September 2017

Create parking using jquery ui draggable and droppable

<!doctype html>
<html lang="en">
<head>
<title>Society Parking</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="parking.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="application/javascript">
$( init );

function init() {

// Ajax Loader
$(document).bind("ajaxStart.mine", function() {

$('.se-pre-con').css("display","block");
});

$(document).bind("ajaxStop.mine", function() {

$('.se-pre-con').css("display","none");
});
// End Ajax Loader

// User draggable event
$(".ui-draggable").draggable({ cursor: "crosshair", revert: "invalid"});

// User droppable event
$("#cardSlots div").droppable({ accept: ".ui-draggable",
           drop: function(event, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);


    if($( this ).hasClass('over')==false){
$(".ui-draggable").draggable({ cursor: "crosshair", revert: "invalid"}); // drop element can drag it
$(this).addClass("over"); // drop box add over class

// this code remove prvious element (last drop element data)
if($(ui.draggable).attr('previousid')!=undefined){

var previousid = "#"+$(ui.draggable).attr('previousid');

$(previousid).removeClass("over");

var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind = $(previousid).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
var top_p = $(ui.draggable).css('top');
//alert(top_p);
var flag = "1";

/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,flag:flag},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}
});*/

}
// Ends

// this for delete previous element data
var ids = $(this).attr('id'); // get id
$(ui.draggable).attr('previousid',ids); // set id

     ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );

// this code insert current parking element

var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind = $(this).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
   var top_p = $(ui.draggable).css('top');
var park_drop = ids;

/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,park_drop:park_drop},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}

});*/
//ends

}else{

$(".ui-draggable").draggable({ cursor: "crosshair", revert: true});

$("#cardPile").droppable({ accept: ".ui-draggable", drop: function(event, ui) {
console.log("drop");

var dropped = ui.draggable;
var droppedOn = $(this);
//$(dropped).detach().css("position","relative").appendTo(droppedOn);
$(dropped).removeAttr('style');
$(dropped).css("position","relative");
var imageUrl = $(dropped).attr('data-image');
$(dropped).css('background-image', 'url(' + imageUrl + ')');
$(dropped).css(' background-repeat', 'no-repeat');
$(dropped).css('background-size', '55px 86px');
var left_posion = $(this).attr('data-left_pos');
   var top_posion = $(this).attr('data-top_pos');

   if(left_posion!=''&&top_posion!=''){
    $(this).css('left', left_posion);
$(this).css('top', top_posion);
}

if($(ui.draggable).attr('previousid')!=undefined){

var previousid = "#"+$(ui.draggable).attr('previousid');

$(previousid).removeClass("over");

var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind = $(previousid).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
var top_p = $(ui.draggable).css('top');
//alert(top_p);
var flag = "1";

/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,flag:flag},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}
});*/

}

},

});

}


                },
over: function(event, ui) {},

                  out: function(event, ui) {}
                     });

// this code after set data in parking the goto prvious position (set for user display list)
$("#cardPile").droppable({ accept: ".ui-draggable", drop: function(event, ui) {
console.log('drop sucess');

var dropped = ui.draggable;
var droppedOn = $(this);

$(dropped).removeAttr('style');

$(dropped).css("position","relative");

var imageUrl = $(dropped).attr('data-image');
$(dropped).css('background-image', 'url(' + imageUrl + ')');
$(dropped).css(' background-repeat', 'no-repeat');
$(dropped).css('background-size', '55px 86px');

if($(ui.draggable).attr('previousid')!=undefined){

var previousid = "#"+$(ui.draggable).attr('previousid');

$(previousid).removeClass("over");

var member = $(ui.draggable).attr('data-userid');
var flat = $(ui.draggable).attr('data-flat');
var hidden_blockid = $(ui.draggable).attr('data-block');
var hidden_parkind = $(previousid).attr('data-parkid');
var left_p = $(ui.draggable).css('left');
var top_p = $(ui.draggable).css('top');
//alert(top_p);
var flag = "1";

/*$.ajax({
url:"",
type:"POST",
data:{member:member,flat:flat,hidden_blockid:hidden_blockid,hidden_parkind:hidden_parkind,left_p:left_p,top_p,top_p,flag:flag},
success: function(res){
var t = $.parseJSON(res);
//alert(t['message']);

}
});*/

}

$(ui.draggable).removeAttr('previousid');

}

});

// set background image to all userlist box
$(".profileimg").each(function(index, element) {
var imageUrl =   $(this).attr('data-image');
$(this).css('background-image', 'url(' + imageUrl + ')');
$(this).css(' background-repeat', 'no-repeat');
$(this).css('background-size', '55px 86px');

var left_posion = $(this).attr('data-left_pos');
var top_posion = $(this).attr('data-top_pos');

if(left_posion!=''&&top_posion!=''){
$(this).css('left', left_posion);
$(this).css('top', top_posion);
}
            });

}
</script>
<div id="loader" class="se-pre-con"></div>
<div id="wrapper">



<div id="cardPile">
        <div data-left_pos="" data-top_pos="" data-userid="11" data-flat="1" data-block="1" id="card11" data-image="thumb_59b7e0eeb0b6125-dsc-4806-copy-1490189640.jpg" class="ui-draggable profileimg"> </div>
        <div previousid=droppable24 data-left_pos="192px" data-top_pos="236px" data-userid="17" data-flat="1" data-block="1" id="card17" data-image="thumb_59b7e135e97524331AD0C00000578-4784672-image-m-2_1502551607375.jpg" class="ui-draggable profileimg"> </div>
        <div previousid=droppable23 data-left_pos="56px" data-top_pos="236px" data-userid="18" data-flat="1" data-block="1" id="card18" data-image="thumb_59b7e0175dc18Salman-Khan_55.jpg" class="ui-draggable profileimg"> </div>
      </div>
<div id="cardSlots" style="width:910px;">
        <div class="ui-droppable cardSlots " id="droppable6" data-parkid="6"   >a1011</div>
        <div class="ui-droppable cardSlots " id="droppable7" data-parkid="7"   >a101</div>
        <div class="ui-droppable cardSlots " id="droppable8" data-parkid="8"   >708</div>
        <div class="ui-droppable cardSlots " id="droppable10" data-parkid="10"   >701</div>
        <div class="ui-droppable cardSlots " id="droppable11" data-parkid="11"   >702</div>
        <div class="ui-droppable cardSlots " id="droppable12" data-parkid="12"   >703</div>
        <div class="ui-droppable cardSlots " id="droppable13" data-parkid="13"   >704</div>
        <div class="ui-droppable cardSlots " id="droppable14" data-parkid="14"   >705</div>
        <div class="ui-droppable cardSlots " id="droppable15" data-parkid="15"   >706</div>
        <div class="ui-droppable cardSlots " id="droppable16" data-parkid="16"   >7014</div>
        <div class="ui-droppable cardSlots " id="droppable17" data-parkid="17"   >707</div>
        <div class="ui-droppable cardSlots " id="droppable18" data-parkid="18"   >709</div>
        <div class="ui-droppable cardSlots " id="droppable19" data-parkid="19"   >7011</div>
        <div class="ui-droppable cardSlots " id="droppable20" data-parkid="20"   >7012</div>
        <div class="ui-droppable cardSlots " id="droppable21" data-parkid="21"   >501</div>
        <div class="ui-droppable cardSlots " id="droppable22" data-parkid="22"   >503</div>
        <div class="ui-droppable cardSlots over" id="droppable23" data-parkid="23"   >504</div>
        <div class="ui-droppable cardSlots over" id="droppable24" data-parkid="24"   >505</div>
        <div class="ui-droppable cardSlots " id="droppable25" data-parkid="25"   >506</div>
        <div class="ui-droppable cardSlots " id="droppable26" data-parkid="26"   >507</div>
        <div class="ui-droppable cardSlots " id="droppable27" data-parkid="27"   >508</div>
        <div class="ui-droppable cardSlots " id="droppable28" data-parkid="28"   >509</div>
        <div class="ui-droppable cardSlots " id="droppable29" data-parkid="29"   >5010</div>
        <div class="ui-droppable cardSlots " id="droppable30" data-parkid="30"   >101</div>
        <div class="ui-droppable cardSlots " id="droppable31" data-parkid="31"   >102</div>
        <div class="ui-droppable cardSlots " id="droppable32" data-parkid="32"   >103</div>
        <div class="ui-droppable cardSlots " id="droppable33" data-parkid="33"   >104</div>
        <div class="ui-droppable cardSlots " id="droppable34" data-parkid="34"   >105</div>
        <div class="ui-droppable cardSlots " id="droppable35" data-parkid="35"   >107</div>
        <div class="ui-droppable cardSlots " id="droppable36" data-parkid="36"   >108</div>
        <div class="ui-droppable cardSlots " id="droppable37" data-parkid="37"   >109</div>
        <div class="ui-droppable cardSlots " id="droppable38" data-parkid="38"   >110</div>
        <div class="ui-droppable cardSlots " id="droppable39" data-parkid="39"   >111</div>
        <div class="ui-droppable cardSlots " id="droppable40" data-parkid="40"   >113</div>
        <div class="ui-droppable cardSlots " id="droppable41" data-parkid="41"   >114</div>
        <div class="ui-droppable cardSlots " id="droppable42" data-parkid="42"   >301</div>
        <div class="ui-droppable cardSlots " id="droppable43" data-parkid="43"   >222</div>

</div>

</div>

free download code

Tuesday 8 August 2017

File upload show progress bar ajax without formdata and php

ajax file

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

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

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

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

ajax image upload with form data in jquery and php

Thursday 5 May 2016

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

Thursday 21 April 2016

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>

Pages

Wednesday 1 November 2017

only number or letter input in textbox using jquery example

Tuesday 24 October 2017

Google Translate using javascript english to french without select value from dropdown on page load

Saturday 16 September 2017

Create parking using jquery ui draggable and droppable

Tuesday 8 August 2017

File upload show progress bar ajax without formdata and php

Friday 4 August 2017

Check all with datatables pagination

Monday 12 December 2016

jquery autocomplete widget example in codeigniter

Sunday 27 November 2016

Tuesday 15 November 2016

Monday 3 October 2016

ajax image upload with form data in jquery and php

Thursday 5 May 2016

Create simple capcha in php with jquery validation

Tuesday 26 April 2016

Read More link in blog in php and Wordpress using Jquery

Thursday 21 April 2016

jquery Star rating plugin with php

Thursday 10 March 2016

Saturday 30 January 2016

Friday 18 December 2015

Monday 7 December 2015

Checked Checkbox Value Using Class In Jquey

Thursday 3 December 2015

Tuesday 3 November 2015

Sunday 30 August 2015

Friday 28 August 2015