jQuery

jQuery

//Start and End Dates with Datepicker jQuery
http://jsfiddle.net/enriqg9/4m2Xp/

<p>From: <input type="text" class="datepicker" id="from"></p>
<p>To: <input type="text" class="datepicker" id="to"></p>

$(function() {
    $( "#from" ).datepicker({
         onSelect: function () {
             var newDate = $(this).datepicker('getDate'); 
             newDate.setDate(newDate.getDate()+7); 
             $('#to').datepicker('setDate', newDate);
         }
    });
    
    $( "#to" ).datepicker();
  });
  
  
//issue came in https://www.richbeganyphoto.com/
<script>
jQuery(document).ready(function(){
    jQuery("#filters li:first a").attr("id","view_all");
    jQuery("#view_all").click(function(){
        jQuery('#stage').find('.fancybox').css("display", "block");
    });
});
</script>

/* Detecting Mobile Devices with JavaScript START */

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};


To check to see if the user is on any of the supported mobile devices:

if( isMobile.any() ) alert('Mobile');
To check to see if the user is on a specific mobile device:

if( isMobile.iOS() ) alert('iOS');

/* Detecting Mobile Devices with JavaScript END */

/* Ajax in jquery */
Panda.on('success', function(cardToken) {
    var id=document.getElementById('proid').value;
    var chid=document.getElementById('chid').value;
    var price=document.getElementById('price').value;
    var level=document.getElementById('level').value;
    jQuery.ajax({
             type: "POST",
             url: '<?php echo esc_url( home_url( '/' ) ); ?>token_rec.php',
             data: {'form': jQuery("#panda_cc_form").serialize(), 'cardtoken': cardToken,'id':id,'chid':chid,'price':price,'level':level},
             success: function(msg) {
                     jQuery('.succ_msg').show();
                     setTimeout(function(){ location.href=document.documentURI; }, 2000);
             }
          });
    });
    
   
//Validate email address using jQuery

Email Address: <input type='text' id='txtEmail'/><br/>
Phone: <input type='text' id='txtphone'/><br/>
<input type='submit' id='btnValidate' Value='Validate Email' />


$(document).ready(function(e) {
    $('#txtEmail').change(function() {
        var sEmail = $('#txtEmail').val();
        if ($.trim(sEmail).length == 0) {
            alert('Please enter valid email address');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            alert('Email is valid');
        }
        else {
            alert('Invalid Email Address');
            e.preventDefault();
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}


// jquery overlay popup start
<div class="oneclick-cs">
                            <a id="Overly" class="overly">click</a>
                        </div>

<div id="ogrooModel" class="modalbox ogroobox" >
                <div class="dialog">
                    <button  title="Close" onClick="overlay()"  class="closebutton" id="close">close</button>
                    <div style="min-height: 150px;">
                        <p>this is test subdet</p>
                    </div>
                </div>
            </div>
            

jQuery(document).on( "click", '.oneclick-cs>.overly', function(e){
    jQuery('.modalbox').show();
});

jQuery(document).on( "click", '.closebutton', function(e){
     jQuery('.modalbox').hide();
});


.oneclick-cs{
  float:none;
  margin:auto;
  text-align:center
}
.oneclick-cs>.overly{
  width:300px;
  height:80px;
  font-size:25px;
  cursor:pointer
}
.modalbox {
    min-width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(81, 51, 51, 0.5);
    z-index: 99999;
    pointer-events: auto;
    display:none;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}
.modalbox >.dialog {
    max-width: 100%;
    position: relative;
    top: 10px;
    margin: 5% 10%;
    padding: 5px 20px 13px 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 10px #000000;
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    display: block;
    pointer-events: auto;
}

.closebutton {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .6;
    z-index: 9999;
  cursor:pointer;
}

/**/

.footer-product .button{display:none !important;}
.footer-product #Overly:before {
    content: "\e90c";
    font-family: 'xstore-icons' !important;
    font-size: 16px;
    font-weight: normal;
    height: 1.2857rem;
    margin-right: 8px;
    line-height: 20px;
    display: inline-block;
    position: relative;
    top: 3px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  color:#ffffff;
}

.dialog input{
    width: 100%;
    margin: 10px 0px;
}
#onclick_checkout{
    background: #d3d3d3;
    padding: 5px;
}

//jquery overlay popup end


++++++++++++++++++++++++++++++++++++++++++++++++++++++
Restrict character lenght in a textarea
$( "#change_dep_remark" ).keydown(function(e) {
	var key = event.keyCode;
	if ($(this).val().length != 0) {
		var char_left = 150 - $(this).val().length;
		$('.max_word').html(char_left);
		if (key !== 8 && key !== 46) {
			if ($(this).val().length > 149 ){
				e.preventDefault();
			}
		}
	} else {console.log('2');
		$('.max_word').html('150');
	}
});
++++++++++++++++++++++++++++

Ajax

$.ajax({
    url: "<?php echo base_url(); ?>userpanel/UserRegistration/fetch_state",
    method: "POST",
    data: {country_id: country_id},
    success: function (data)
    {
        $('#state').html(data+'<option value="0">Other</option>');
        $('#city').html('<option value="">Select District</option>');
    }
});
++++++++++++++++++++++++++++++++++++++++++++++++++++++

Simple popup jquery

<script>
    jQuery(document).ready(function(){
    jQuery(document).on("click",".openpopup",function(){
                 jQuery(".popmain").show();
           });
           
           jQuery(document).on("click",".closepopup",function(){
                 jQuery(".popmain").hide();
           });
      });
</script>

<style>
      .popmain{display:none;position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; background:rgba(0,0,0,0.6);}
      .popin{margin-left:auto; margin-right:auto; width:40%; background:#fff; padding:30px; margin-top:5%; display:table;}
      .popin .lwa-form{display:block !important;}
      .closepopup {float: right;padding: 5px 10px;background: #d3d3d3;color: green;}
</style>

<div class="oneclick-cs">
		                            <a id="openpopup" class="openpopup">click</a>
		                        </div>
								<div class="popmain">
									<button  title="Close" class="closepopup" id="close">close</button>
							        <div class="popin">
							            <?php echo do_shortcode('[lwa]');?>
							        </div>
							    </div>

Simple tab

<script>
function openTab(tabName) {
    var i;
    var x = document.getElementsByClassName("clag-tab");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";
}
</script>
<div class="clag-bar">
  <button class="clag-bar-item clag-button" onclick="openTab('january')">Januar</button>
  <button class="clag-bar-item clag-button" onclick="openTab('february')">Februar</button>
</div>
<div class="clag-tab" id="january" style="display: block;">dddddd
</div>
<div class="clag-tab" id="february" style="display: none;">dddght gfg
</div>