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

Use Ternary Operator in Php

Hello

I am Here Create Some Example How to use Ternary operator in php.

Ternary Operator use as simple if and else condition

$bool_val = 5;

echo ($bool_val <= 5) ? 'true' : 'false';.

it result is true.

if $bool_val = 6. then out put will be different. it false.

before ? it's like if condition  and : else condition.

For Check this

<?php
$age = 18;
    $agestr = ($age < 18) ? 'child' : 'adult';

it same like this

<?php
      if ($age < 16) {
        $agestr = 'child';
    } else {
        $agestr = 'adult';
    }
 

?>

here

another example


        $valid = false;
    $lang = 'french';
    $x = $valid ? ($lang === 'french' ? 'oui' : 'yes') : ($lang === 'french' ? 'non' : 'no');
 
    echo $x;

like this

if($valid){
   
    if($lang === 'french')
    {
        $x='oui';
    }else{
        $x = 'yes';
    }
} else{
   
      if($lang === 'french')
    {
        $x='non';
    }else{
        $x = 'no';
    }
   
}
echo $x;




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>

Sunday 16 August 2015

Insert Post Data FrontEnd side with Custom Field and Validation in Wordpress

Hello,

First create template file in in your wordpress theme.

<?php /* Template Name: Account*/ ?>

after go to pages in wordpress create page in  your page and set template Account in wordpress.

after go to your post when you added insert data in frond end side. go to screen option
and checked custom fields.

here I am create email address,first name,last name,and phone.

you can also inset data in texonomy.

<?php /* Template Name: Account */

get_header(); ?>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#appoment_date').datepicker({
        dateFormat : 'yy-mm-dd'
    });
    jQuery("#appmoment_form").validate({
   
        // Specify the validation rules
        rules: {
         
            f_name: "required",
            l_name: "required",
            email: {
                required: true,
                email: true
               
            },
            time_appoment:"required",
            c_email:{
               
                 equalTo: '#email'
            },
            appoment_date:{
                 required: true,
                date: true
            },
            phone:"required",
             center_term: {
                required: true,
            },
            casetype: {
                required: true,
            }
         
         
        },
       
        // Specify the validation error messages
        messages: {
            f_name: "Please enter your first name",
            l_name: "Please enter your last name",
            email: "Please enter a valid email address",
            appoment_date:{
                required:"Please enter date",
                date:"Please validate date"
            },
            phone:"Please enter Phone Number",
            center_term:"Please select the center",
            casetype:"Please Select Reson for visist",
            c_email:"Please Conform Email Address"
        },
       
        submitHandler: function(form) {
            form.submit();
        }
    });
    jQuery('#appoment_date').change(function () {alert('changed');
    if (document.getElementById("appoment_date").value === "") {
                document.getElementById("time_appoment").disabled='true';
    } else {
    document.getElementById("time_appoment").disabled='';
 
  }

  });
});
</script>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
// Start the loop.
        /*
while ( have_posts() ) : the_post();

// Include the page content template.
get_template_part( 'content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

// End the loop.
endwhile;*/
?>
       
        <form method="post" id="appmoment_form">
       
        <?php $terms = $categories = get_terms( 'your-custom-texonomy', 'orderby=count&hide_empty=0' ); ?>
        <select name="center_term" id="center_term">
        <option value="">Select a Center</option>
      <?php   foreach ( $terms as $term ) { ?>
        <option value="<?php echo $term->name ?>"><?php echo $term->name ?></option>
        <?php } ?>
     
        </select>
       
       
      <input type="text" id="appoment_date" name="appoment_date" placeholder="Select a date" />
     
      <select name="time_appoment" id="time_appoment" disabled="disabled">
      <option>Select a Available Time</option>
      <option value="12PM to 1 AM">12PM to 1 AM</option>
      <option value="">1PM to 2 AM</option>
      <option value="">2PM to 3 AM</option>
      <option>3PM to 4 AM</option>
      <option>4PM to 5 AM</option>
      <option>5PM to 6 AM</option>
      <option>6PM to 7 AM</option>
      <option>7PM to 8 AM</option>
      <option>8PM to 9 AM</option>
      </select>
      <input type="text" name="f_name" id="f_name" placeholder="First Name" />
      <input type="text" name="l_name" id="l_name" placeholder="Last Name" />
      <input type="text" name="email" id="email" placeholder="Email Address" />
      <input type="text" name="c_email" id="" placeholder="Conform Email Address" />
      <input type="text" name="phone" id="phone" placeholder="Phone" />
      <?php $texonomys1 = $categories = get_terms( 'your-custom-texonomy', 'orderby=count&hide_empty=0' ); ?>
      <select name="casetype" id="casetype">
      <option value="">Reason for Visit</option>
      <?php   foreach ( $texonomys1 as $texonomy1 ) { ?>
       <option value="<?php echo $texonomy1->name ?>"><?php echo $texonomy1->name ?></option>
       <?php } ?>
      </select>
      <input type="submit" name="submit" />
        </form>
        <?php
       if (isset( $_POST['submit'] ) ) {
// create post object with the form values
                    $appoment_date =    $_POST['appoment_date'];
                   
                    echo $appoment_date;
                 
                   
                    $firstname = $_POST['f_name'];
                    $lastname = $_POST['l_name'];
                    $email_address = $_POST['email'];
                    $phone = $_POST['phone'];
                    $term = $_POST['center_term'];
                    $texonomy1 = $_POST['casetype'];

        $my_cptpost_args = array(
           
            'post_title' => 'test',
            'post_status'   => 'publish',
            'post_type' => "pgs_appointments",
            'post_date' => $appoment_date,
            'tax_input'    => array( 'your-custom-texonomy' => array( $texonomy1 ),'your-custom-texonomy' => array( $term ) ) //here insert two texonomy data.
           
           
        );
        $email_address = sanitize_email($email_address);
        $first_name = sanitize_meta( 'first_name', $first_name, 'user' );
        $lastname = sanitize_meta( 'lastname', $lastname, 'user' );
        $email_address = sanitize_meta( 'email_address', $email_address, 'user' );
        $phone = sanitize_meta( 'phone', $phone, 'user' );

// insert the post into the database
            $cpt_id = wp_insert_post($my_cptpost_args, $wp_error );
         add_post_meta($cpt_id, 'first_name', $first_name, true);//here insert two custom field data.
         add_post_meta($cpt_id, 'email_address', $email_address, true);//here insert two custom field data.
         add_post_meta($cpt_id, 'lastname', $lastname, true); //here insert two custom field data..
         add_post_meta($cpt_id, 'phone', $phone, true);//here insert two custom field data.
       
           
        }
        ?>
   
</main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_footer(); ?>


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.