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>

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.

Monday 27 July 2015

Order By Custom Field Using Meta Key In Wordpress

Hello

Order By Custom Field Using Meta Key In Wordpress

In some case you can to get post value using meta box in order by ascending order and descending order

<?php

$dancequery = array('post_type'=> 'dance',
'tax_query' => array(
array('taxonomy' => 'hip_hop','field' => 'id','terms' =>'hip_hop',),
),
'posts_per_page'=>12,
'post_status' => 'publish',
'paged' => $paged ,
'meta_key' => 'price',
'orderby' => 'meta_value_num',
'order' => 'DESC'
);
query_posts( $dancequery );

?>

if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>




  • check this type code. price yon can add your meta key create in post.
    i am also give example with taxonomy you can get value form particular taxonomy and particular
    meta key order by i have meta key price.

    it's working proper check out.

    Monday 20 July 2015

    How To Create Wordpress Theme

    Hello

    Here I want Create Example of Wordpress theme.

    You want to create your own wordpress theme then you can know create basic file.

    1)header.php
    2)footer.php
    3)style.css //Most Impotant
    4)index.php
    5)sidebar.php //optional
    6)functions.php // optional

    this 6 file needed for custom theme in Wordpress

     I am Create Wordpress Theme My Own I give Example for that you can change and
    and create your own.

    1) header.php

    <html>
    <head>
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <a id="logo"href="<?php echo site_url(); ?>"><h1><?php bloginfo('name'); ?></h1></a>

    <img id="header_image" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
    </div>
    <nav>

      <?php wp_nav_menu(); ?>

    </nav>

    2)footer.php

    <div id="footer">
    <h1>FOOTER</h1>
    <?php if (  dynamic_sidebar( 'widgetized-area' ) ) : ?>
    <?php endif; ?>
    </div>
    </div>
    </body>
    </html>

    3)sidebar.php

    <div id="sidebar">
    <?php if (  dynamic_sidebar( 'footer-id' ) ) : ?>
    <?php endif; ?>
    </div>

    4) index.php

    <?php get_header(); ?>
    <div id="main">
    <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr> <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
    </div>
    <div id="delimiter">
    </div>
    <?php get_footer(); ?>

    5)functions.php

    <?php
    $args = array(
    'width'         => 980,
    'height'        => 198,
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    );
    add_theme_support( 'custom-header', $args );


    function register_my_menu() {
      register_nav_menu('header-menu',__( 'Header Menu' ));
    }
    add_action( 'init', 'register_my_menu' );

    if (function_exists('register_sidebar')) {

    register_sidebar(array(
    'name' => 'Widgetized Area',
    'id'   => 'widgetized-area',
    'description'   => 'This is a widgetized area.',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>'
    ));
       
        register_sidebar(array(
    'name' => 'Footer',
    'id'   => 'footer-id',
    'description'   => 'This is a widgetized area for Footer.',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>'
    ));

    }
    ?>


    6)style.css

    body { text-align: center; }
    #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
    #header { border: 2px #a2a2a2 solid; width:1196px; height:296px;}
    #content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
    #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
    #delimiter { clear: both; }
    #footer { border: 2px #a2a2a2 solid;width:1196px; height:296px; }
    .title { font-size: 11pt; font-family: verdana; font-weight: bold; }
    #logo{
        float: left;
        position: absolute;
        color: #fff;
    }
    #header_image{
        width:100%;
        height:100%;
    }
    .menu-menu-1-container li {
        display: inline-block;
        margin: 10px;
    }
    .widget_nav_menu li{
        display: block;
    }
    .widget_categories li{
        list-style: none;
    }
    #footer .widget_nav_menu{
        float: left;
    }
    #footer .widget_categories{
        float: none;
    }

    In functions.php file I create code for Add Menu:- register_my_menu FUNCTION
    CREATE WIGET ARE FOR SIDEBAR AND FOOTER ->register_sidebar FUNCTION
    AND ADD NEW HEADER FOR add_theme_support ADDED IN FUNCTIONS.PHP

    SIDEBAR I AM ADDED FOOTER WIDGET IN WIDGET AREA.
    FOOTER I AM ADDED Widgetized Area SIDEBAR


    Wednesday 1 July 2015

    Get Post Title or Post Permalink using Post Name in Wordpress

    Hello

    You can get post title and permalink any one you want from post it easy to get this.

    I have one example post that can be useful that.

    you can also also use in search. and simple any where in wordpress.

    Simple Get Wordpress.

    $city_name = array("Bab Ezzouar","Babol","Babruysk","Bago City");

    foreach($city_name as $city){
     echo $city;
    $posts = get_posts(array('name' => $city, 'post_type' => 'your-postname-here','post_status'=>'publish'));



    foreach ($posts as $post) {
      echo $title = get_the_title($post->ID);
      echo    $permalink = get_permalink($post->ID);
       

        break; //use this to limit to a single result
    }
    }

    check out your wordpress. cityname enter your post name and post type check out result


    Monday 22 June 2015

    How To Add Taxonomy In Multiple Post In Wordpress

    Hello

    Some Time Same Taxonomy use in multiple post. for example onw taxonomy like music

    I Want to use multiple post like WordPress default post,musician,or another post.

    I have Solution for that check below code

    <?php
    register_taxonomy('music',array('musician','post','page'), array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'query_var' => true,
        'rewrite' => array( 'slug' => 'music' ),
      ));
    ?>

    here  music is your taxonomy name. in your array add your post i have added post,musician,page etc

    this code add to your theme in function.php or plugin file.

    that can be worked