Tabindex working with event.charcode
<input type="text" required="required" id="PhoneNumber" name="PhoneNumber" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
$('input').on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 9) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
On mouse over image change
<span class="imgwrap"><img class="himg" data-alt-src="images/icon_1_h.png" src="images/icon_1.png" ></span>
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$(' img.himg').hover(sourceSwap, sourceSwap);
})
/*----- on click menu active -----*/ ( link )
jQuery(function ($) { $("ul.nav a").click(function(e) {
var link = $(this);
var item = link.parent("li");
if (item.hasClass("active")) {
item.removeClass("active").children("a").removeClass("active");
} else {
item.addClass("active").children("a").addClass("active");
}
if (item.children("ul").length > 0) {
var href = link.attr("href");
link.attr("href", "#");
setTimeout(function () {
link.attr("href", href);
}, 300);
e.preventDefault();
}
}).each(function() {
var link = $(this);
if (link.get(0).href === location.href) {
link.addClass("active").parents("li").addClass("active");
// link.addClass("active").parents("li").addClass("active").closest('ul.collapse').addClass('in'); /* For show drop-down also*/
return false;
}
});});
var link = $(this);
var item = link.parent("li");
if (item.hasClass("active")) {
item.removeClass("active").children("a").removeClass("active");
} else {
item.addClass("active").children("a").addClass("active");
}
if (item.children("ul").length > 0) {
var href = link.attr("href");
link.attr("href", "#");
setTimeout(function () {
link.attr("href", href);
}, 300);
e.preventDefault();
}
}).each(function() {
var link = $(this);
if (link.get(0).href === location.href) {
link.addClass("active").parents("li").addClass("active");
// link.addClass("active").parents("li").addClass("active").closest('ul.collapse').addClass('in'); /* For show drop-down also*/
return false;
}
});});
Bootstrap side nav dropdown
$('.side-nav li.dropdown').click(function(e){
// e.preventDefault();
$(this).siblings().find('.in').removeClass('in');
});
Refresh/Reload web page only once
window.onload = function () {if (! localStorage.justOnce) {
localStorage.setItem("justOnce", "true");
window.location.reload();
}
}
Match Media query with jquery
if (window.matchMedia('(min-width: 768px)').matches) {
// write your code
}else{
// write your code
}
Equal heights for div's with jQuery
$(document).ready(function(){
// Select and loop the container element of the elements you want to equalise
$('.container').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$('.column', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$('.column',this).height(highestBox);
});
});
/*---- fullcalnder for modal windows ----*/
$('#profileModal').on('shown.bs.modal', function () {
$("#calendar, #calendar2").fullCalendar('render');
});
$("#calendar, #calendar2").fullCalendar('render');
/*---- Select Select option with show content ----*/
<select name="addinvoicerid" class="addinvoicerid">
</select>
addinvoiceArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
for (var i = 0; i < addinvoiceArray.length; i++) {
$(".addinvoicerid").append('<option value=' + addinvoiceArray[i]+ '_' +[i]+ '>' + addinvoiceArray[i] + '</option>');
}
/*-------------------*/
<option value="a" selected>A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<div class="selectdescwrap">
<div class="selectdesc" id="a">A Content</div>
<div class="selectdesc" id="b">B Content</div>
<div class="selectdesc" id="c">C Content</div>
<div class="selectdesc" id="d">C Content</div>
</div> $(document).ready(function(){
$(function() {
$('.selectdescwrap .selectdesc:first-child').show().siblings().hide();
$('#selecterId').change(function(){
$('.selectdesc').hide();
$('#' + $(this).val()).show();
});
});
});
/*---- Clone or Append div with content ----*/
$(document).ready(function(){
$('.adddiv').click(function(){
$(".appenddiv:first").clone(0).appendTo(".appendwrap");
});
});
----------( OR )-----
$(document).ready(function(){
$('.addlink').click(function(){
$(".linkvideosappend:first").clone(0).appendTo(".linkvideos");
$('.linkvideos .addlink').text('x');
$('.linkvideos .addlink').addClass('removelink').removeClass('addlink');
$('.removelink').click(function(){
$(this).closest('.linkvideosappend').hide();
});
});
});
----------( OR )-----
$('.appenddivwrap .appenddiv .removelence').hide();
$(document).on('click','.addlink',function() {
$(".appenddiv:first").clone(0).appendTo($(this)).closest(".appenddivwrap");
$('.addlink .appenddiv .addlink').show();
$('.removelence').click(function(){
$(this).closest('.appenddiv').remove();
});
});
/*---- wordpress sidebar menu show/ hide submenu with arrow----*/
$('ul.children').toggleClass("out");
$('.page_item_has_children').addClass("fa-minus");
$('.page_item_has_children').click(function(e){
$(this).toggleClass("fa-plus");
$(this).children('ul.children').toggleClass("in");
$(this).siblings().children('ul.children').removeClass("in");
e.preventDefault();
event.stopPropagation();
});
/*---- css ---*/
.fa-minus, .fa-plus { float: right; }
.fa-minus::before {content:'\f0da'; font-family:'FontAwesome';float: right; margin:5px 8px; color: #fff; font-size:18px}
.fa-plus::before {content:'\f0d7'; font-family:'FontAwesome';float: right; margin:5px 8px; color: #fff;font-size:18px}
/*----bootstrap sidebar menu --*/
var $myGroup = $('#sidenavwrap');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
/*---- Widndow or Document auto height with resize ----*/
// set window height
$(window).load(function(){
var H = $( window ).height()-100;
$('.pagewrapbg').css('height', H);
});
$(window).trigger('resize');
// set window height
$(window).load(function(){
function setHeight() {
windowHeight = $(window).innerHeight()-80;
$('.modelbody').css('max-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
/*---- tabs show ----*/
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
/*---- Select field select option show/hide ----*/
$("select#onetimecon").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="3"){
$("#others_onetime").show();
}
else{
$("#others_onetime").hide();
}
});
}).change();
/*---- Checkbox check, uncheck show/hide ----*/
$("#tv_select").hide();
$('input#tv').click(function(){
if (this.checked) {
$("#tv_select").show();
} else {
$("#tv_select").hide();
}
});
// attribute type
$('input.termcond').click(function(){
if (this.checked) {
$("input.orderbtn").removeAttr("disabled");
$('input.orderbtn').removeClass('disabl');
} else {
$("input.orderbtn").attr("disabled", true);
$('input.orderbtn').addClass('disabl');
}
});
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="3"){
$("#others_onetime").show();
}
else{
$("#others_onetime").hide();
}
});
}).change();
/*---- Checkbox check, uncheck show/hide ----*/
$("#tv_select").hide();
$('input#tv').click(function(){
if (this.checked) {
$("#tv_select").show();
} else {
$("#tv_select").hide();
}
});
// attribute type
$('input.termcond').click(function(){
if (this.checked) {
$("input.orderbtn").removeAttr("disabled");
$('input.orderbtn').removeClass('disabl');
} else {
$("input.orderbtn").attr("disabled", true);
$('input.orderbtn').addClass('disabl');
}
});
/*----- Lightbox image gallery ------*/
$('.modalbtn').click(function(){
$('.modal-body').empty();
var title = $(this).closest('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('.modal-body, .modal-body img').css({'text-align':'center', 'margin':'0 auto'});
$('#PhotoModal').modal({show:true});
});
/*------ Single Page Template -------*/
$(".v_menu_link").click(function () {
var data_id = $(this).data('id');
$(this).parent().addClass('active').siblings().removeClass('active');
$('.v_menu_details').each(function() {
var el = $(this);
if(el.attr('id') == data_id)
el.show();
else
el.hide();
});
});
<div class="v_menu">
<ul>
<li class="active"><a href="#" class="v_menu_link" data-id="v_menu_link1"> <i class="fa fa-user"></i> About Me </a> </li>
<li><a href="#" class="v_menu_link" data-id="v_menu_link2"> <i class="fa fa-cogs"></i> Services</a> </li>
</ul>
</div>
<div class="v_menu_details initial" id="v_menu_link1">
<p> Sampl Content</p>
</div>
<div class="v_menu_details initial" id="v_menu_link1">
<p> Sampl Content</p>
</div>
<style>
.v_menu_details:not(.initial) {
display: none;
}
</style>
