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

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>

Thursday, 6 August 2015

Add Jquery Datepicker 6 Month Plus From Current Date Example

Hello,

Some time you want to add that you can display date from current  to 6 month any other month
and other are disable than i have do in my example. you can set maxDate parameter in you
datepicker. if you want to disable current before all date then set minDate:'0'  you can check
below example i think it can help you. remove all parameter than it will display simple datepicker.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <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>
 
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate:'0',maxDate: '+6m' });
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"/></p>



</body>
</html>

Please check that example and see it it can use full.

Tuesday, 9 June 2015

Email Already Exit Using Jquery And Php

Hello All,

I am Simple Learn How to check email already exit. I am create code and check if

email already exit then you cannot submit  and also also validation of email.

I am give the code for that you can check it and use it.

you have to create to file

1)email.php
2)check.php

in your email.php wriite this code

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
   $("#myform").submit(function(){
 
       if(!emailok)
       {
        alert('check your email');
        return false;
       }
   
    });
$('#email').blur(function(){
   alert($('#email').val());
    $.ajax({
        type:"post",
        data:"email="+$('#email').val(),
        url:"check.php",
        beforeSend:function(){
            $("#email_info").html("checking email...");
        },
        success:function(data){
         
            if(data == "invalid"){
                $("#email_info").html("check your Email");
           
       
            emailok = false;
            }else if(data !="0"){
                  $("#email_info").html("email already exit");
             
            }else{
            emailok = true;
            $("#email_info").html("email ok");
            }
         
         
        }
     
     
     
    });
 
    });
});
</script>
<form id="myform" method="post">
<input type="text" id="email" name="email"/>
<input type="submit" />
</form>
<div id="email_info"></div>


second file is check.php

add this code

<?php
 $dbhost = 'localhost';
   $dbuser = 'root';
   $dbpass = '';
   $conn = mysql_connect($dbhost, $dbuser, $dbpass);
   if(! $conn )
   {
     die('Could not connect: ' . mysql_error());
   }

 
   mysql_select_db('blog',$conn);
 
   $email = $_POST['email'];
 
   if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
 
   $sql =  mysql_query('select email from email where email="'.$email.'"' );
 
   $result = mysql_fetch_array($sql);
 
 
 
    echo $num = mysql_num_rows($sql);
 }else{
 
    echo "invalid";
 }
 
 
 
 
 
 
   mysql_close($conn);
?>

table code

--
-- Table structure for table `email`
--

CREATE TABLE IF NOT EXISTS `email` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(200) NOT NULL,
  `password` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `email`
--

INSERT INTO `email` (`id`, `email`, `password`) VALUES
(1, 'test@gmail.com', 'test'),
(2, 'teset@gmail.com', 'test');

Friday, 5 June 2015

Convert String To Title Case With Jquery And Title Case Microsoft Office

Hello All,


This My learn how to change title case using jquery. I am also Learn that how to
change title case in MsOffice.

When I have Text  TO HAVE A CLEAR AND FOCUSSED CONTENT  in MsOfiice
I am want to change it into To Have A Clear And Focussed Content. I have no Idea 
about that. I am also don't what to say in MsOffice that's I want to make code in jquery.

I have change manually but  I thought if I have many of text that I do code. I also Find instruction

in Msoffice.

It That


  1. Select the text you want to alter.
  2. Press Shift+F3. Word changes the case of the selected text.
  3. Continue pressing Shift+F3 until the case is the way you want it.

When First i select text TO HAVE A CLEAR AND FOCUSSED CONTENT and press shift+f3
it make it Small. after again press Shift+f3. Then Get this text To Have A Clear And Focussed Content.

So I think When Get code Also using Jquery then  I Will Put here and try some one
who can khow developing.



<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    var text = $('.capitalize').text();
    
    var ti = toTitleCase(text);

      $('.capitalize').empty();
      $('.capitalize').append(ti);
    function toTitleCase(str)
{
    return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

});
</script>
<div class='capitalize'>
    TO HAVE A CLEAR AND FOCUSSED CONTENT
</div>

in div you can put your text and check in your browser you can get output.