Category Archives: jQuery

auto fill form field

name: <input id="de-name" type="text">
recomendation:	<input id="de-name" type="text">

/* auto field form field*/
jQuery(document).ready(function(){
	jQuery( "#de-name" ).keyup(function() {
		jQuery('#de-rec').val(jQuery('#de-name').val());
	});
});
Advertisements

owl carousel slider in multi lines

HTML

<div id="owl-demo" class="owl-carousel">
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" />
    </div>
    <div>
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" alt="" />
        <img class='lazyOwl' src="http://localhost/LichField/wp-content/uploads/2015/11/gallery.png" />
    </div>
    
</div>

STYLE

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}
#owl-demo .owl-item > div {
    padding: 0px 2px
}

JS

/* Gallery single */
jQuery(document).ready(function () {
   jQuery("#owl-demo").owlCarousel({
        navigation: true,
        pagination: true,
        lazyLoad: true,
		
		autoPlay: 3000, //Set AutoPlay to 3 seconds
     	items : 3,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
	});
});

set jquery toggele default as a hidden

<button class="submit" id="leavecomment">LEAVE A COMMENT</button>

custom.js

jQuery(document).ready(function(){
	
	var togglehide = jQuery(".comment-form");
  	jQuery(togglehide).hide();
  
		jQuery("#leavecomment").click(function(e){
			 	jQuery(togglehide).slideToggle('fast');
			 	e.preventDefault();
			});
});

Bootstrap carousel slider left to right slides direction

jQuery file


jQuery( document ).ready(function() {
jQuery('#myCarousel').carousel({
interval: false
});
setInterval(function(){jQuery('#myCarousel').carousel('prev'); }, 3000);
});

Display


<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<img src="<?=$base_URL?>images/Vehicle_wraps2/slide-1.png" alt="">
</div>
<div class="item" >
<img src="<?=$base_URL?>images/Vehicle_wraps2/slide-2.png" alt="">
</div>

</div>
<!-- Carousel nav -->

</div>

media uploader script

functions.php


function legal_framework_load_scripts() {
wp_enqueue_media();
wp_enqueue_script('mymedia-uploader', get_template_directory_uri() . '/js/mymedia-uploader.js', array('jquery'));
}
add_action('admin_enqueue_scripts', 'legal_framework_load_scripts');

mymedia-uploader.js


jQuery(document).ready( function(){
function media_upload( button_class) {
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
jQuery('body').on('click',button_class, function(e) {
var button_id ='#'+jQuery(this).attr('id');
/* console.log(button_id); */
var self = jQuery(button_id);
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = jQuery(button_id);
var id = button.attr('id').replace('_button',"");
_custom_media = true;
wp.media.editor.send.attachment = function(props, attachment){
if ( _custom_media  ) {
jQuery('.mytheme_media_url').val(attachment.url);
} else {
return _orig_send_attachment.apply( button_id, [props, attachment] );
}
}
wp.media.editor.open(button);
return false;
});
}
media_upload( '.mytheme_media_upload');
});

Scroll To DIV – Using Button ID

template-file.php


<button type="button" id="btnscrall" value="scrall">SCRALL</button>

default.js


jQuery("#btnscrall").click(function() {
jQuery('html, body').animate({
scrollTop: jQuery(".caseresult").offset().top
}, 2000);
});

Submit two form by one button and redirect with jQuery Ajax

&lt;/pre&gt;
&lt;form id=&quot;ajaxform_member&quot; action=&quot;&quot; method=&quot;post&quot;&gt;
&lt;table class=&quot;signup-tbl&quot;&gt;
&lt;tr&gt;
&lt;td&gt;&lt;label for=&quot;mname&quot;&gt;Name:&lt;/label&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; required=&quot;&quot; id=&quot;mname&quot; name=&quot;mname&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;label for=&quot;maddress&quot;&gt;Address:&lt;/label&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;maddress&quot; id=&quot;maddress&quot; required&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;label for=&quot;mphone_num&quot;&gt;Phone Number:&lt;/label&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;mphone_num&quot; id=&quot;mphone_num&quot; required&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;label for=&quot;memail&quot;&gt;Email:&lt;/label&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;email&quot; name=&quot;memail&quot; id=&quot;memail&quot; required&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;label for=&quot;muname&quot;&gt;User Name:&lt;/label&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;muname&quot; id=&quot;muname&quot; required&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;label for=&quot;mpass&quot;&gt;Password:&lt;/label&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=&quot;password&quot; name=&quot;mpass&quot; id=&quot;mpass&quot; required&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;input  class=&quot;signup-tbl-btn&quot; id=&quot;form-ajax-submit&quot; type=&quot;submit&quot; value=&quot;Membership Register&quot;  name=&quot;mregister&quot;&gt;
&lt;p class=&quot;status&quot;&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;form action=&quot;https://www.sandbox.paypal.com/cgi-bin/webscr&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;business&quot; value=&quot;raviradadiya.ommune-facilitator@gmail.com&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;cmd&quot; value=&quot;_xclick-subscriptions&quot; /&gt;
&lt;!-- Instant Payment Notification &amp; Return Page Details --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;notify_url&quot; value=&quot;http://localhost/JobInterviewGuide/?s2member_paypal_notify=1&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;cancel_return&quot; value=&quot;http://localhost/JobInterviewGuide/&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;return&quot; value=&quot;http://localhost/JobInterviewGuide/?s2member_paypal_return=1&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;rm&quot; value=&quot;2&quot; /&gt;
&lt;!-- Configures Basic Checkout Fields --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;lc&quot; value=&quot;&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;no_shipping&quot; value=&quot;1&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;no_note&quot; value=&quot;1&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;custom&quot; value=&quot;localhost&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;currency_code&quot; value=&quot;USD&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;page_style&quot; value=&quot;paypal&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;charset&quot; value=&quot;utf-8&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;item_name&quot; value=&quot;Bronze Member / description and pricing details here.&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;item_number&quot; value=&quot;1&quot; /&gt;
&lt;!-- Configures s2Member's Unique Invoice ID/Code  --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;invoice&quot; value=&quot;&lt;?php echo S2MEMBER_VALUE_FOR_PP_INV(); ?&gt;&quot; /&gt;
&lt;!-- Identifies/Updates An Existing User/Member (when/if applicable)  --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;on0&quot; value=&quot;&lt;?php echo S2MEMBER_CURRENT_USER_VALUE_FOR_PP_ON0; ?&gt;&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;os0&quot; value=&quot;&lt;?php echo S2MEMBER_CURRENT_USER_VALUE_FOR_PP_OS0; ?&gt;&quot; /&gt;
&lt;!-- Identifies The Customer's IP Address For Tracking --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;on1&quot; value=&quot;&lt;?php echo S2MEMBER_CURRENT_USER_VALUE_FOR_PP_ON1; ?&gt;&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;os1&quot; value=&quot;&lt;?php echo S2MEMBER_CURRENT_USER_VALUE_FOR_PP_OS1; ?&gt;&quot; /&gt;
&lt;!-- Controls Modify Behavior At PayPal Checkout --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;modify&quot; value=&quot;0&quot; /&gt;
&lt;!-- Customizes Prices, Payments &amp; Billing Cycle --&gt;
&lt;!--&lt;input type=&quot;hidden&quot; name=&quot;amount&quot; value=&quot;0.01&quot; /&gt;--&gt;
&lt;input type=&quot;hidden&quot; name=&quot;src&quot; value=&quot;1&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;srt&quot; value=&quot;&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;sra&quot; value=&quot;1&quot; /&gt;
&lt;!--&lt;input type=&quot;hidden&quot; name=&quot;a1&quot; value=&quot;0&quot; /&gt;--&gt;
&lt;!--&lt;input type=&quot;hidden&quot; name=&quot;p1&quot; value=&quot;0&quot; /&gt;--&gt;
&lt;!--&lt;input type=&quot;hidden&quot; name=&quot;t1&quot; value=&quot;D&quot; /&gt;--&gt;
&lt;input type=&quot;hidden&quot; name=&quot;a3&quot; value=&quot;0.01&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;p3&quot; value=&quot;1&quot; /&gt;
&lt;input type=&quot;hidden&quot; name=&quot;t3&quot; value=&quot;M&quot; /&gt;
&lt;!-- Displays The PayPal Image Button --&gt;
&lt;input class=&quot;paypal&quot;  type=&quot;submit&quot; src=&quot;https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif&quot; style=&quot;width:auto; height:auto; border:0;&quot; alt=&quot;PayPal&quot; /&gt;
&lt;/form&gt;
&lt;pre&gt;

ajax.signup.js

&lt;/pre&gt;
jQuery(document).ready(function($) {
// Perform AJAX send mail and create user on form submit
$('form#ajaxform_member').on('submit', function(e){
$('form#ajaxform_member p.status').show().text(ajax_signup_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_signup_object.ajaxurl,
data: {
'action': 'member', //calls wp_ajax_nopriv_ajaxsignup
'mname': $('form#ajaxform_member #mname').val(),
'maddress': $('form#ajaxform_member #maddress').val(),
'mphone_num': $('form#ajaxform_member #mphone_num').val(),
'memail': $('form#ajaxform_member #memail').val(),
'muname': $('form#ajaxform_member #muname').val(),
'mpass': $('form#ajaxform_member #mpass').val(),
},
success: function (response) {
//window.location.href='http://localhost/JobInterviewGuide/paypal.php';
}
});
e.preventDefault();
});
$(&quot;.paypal&quot;).click(function(){
alert(&quot;The paragraph was clicked.&quot;);
$(&quot;#form-ajax-submit&quot;).trigger(&quot;click&quot;);
//$(&quot;paypal&quot;).trigger(&quot;click&quot;);
});
});
&lt;pre&gt;
%d bloggers like this: