<!DOCTYPE html>
<html>
<head>
<title>json with JQuery</title>
</head>
<body>
<select id="first">
<option value="all">All</option>
</select>
<select id="second">
<option value="all">All</option>
</select>
<select id="third">
<option value="all">All</option>
</select>
<select id="fourth">
<option value="all">All</option>
</select>
<select id="five">
<option value="all">All</option>
</select>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

var Countries = ["India","USA"];

var States = {
"India": ["Andhra Pradesh","Andaman and Nicobar Islands","Arunachal Pradesh","Assam","Bihar","Chandigarh","Chhattisgarh","Dadra and Nagar Haveli","Daman and Diu","Delhi","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Lakshadweep","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Pondicherry","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttar Pradesh","Uttaranchal","West Bengal"],

"USA": ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
};

var Districts = {
"Alabama": ["Nicobar","North and Middle Andaman","South Andaman"],

"Andhra Pradesh": ["East Godavari","West Godavari","Krishna","Guntur","Prakasam","Sri Potti Sri Ramulu Nellore","Srikakulam","Vizianagaram","and Visakhapatnam","Kurnool","Chittoor","YSR Kadapa and Anantapur"]
};

var Mandals = {

"Nicobar": ["Arong","Big Lapati","Chuckchucha","IAF Camp","Kakana","Kimois","Kinmai","Kinyuka","Malacca","Mus","Perka","Sawai","Small Lapati","Tamaloo","Tapoiming","Teetop"],

"East Godavari": ["Rajahmundry Urban","Kakinada Urban","Kakinada Rural","Rajahmundry Rural","Amalapuram","Tuni","Samalkota","Mandapeta","Pithapuram","Peddapuram","Ramachandrapuram","Rajanagaram","Kadiam","Thondangi","Ravulapalem","Thallarevu","Kothapalle","Jaggampeta","Korukonda","Prathipadu","Gollaprolu","Yeleswaram","Kothapeta","Karapa","Malikipuram","P.Gannavaram","Katrenikona","Kirlampudi","Alamuru","Sakhinetipalle","Seethanagaram","Pedapudi","Razole","Kajuluru","Anaparthy","Mamidikuduru","Biccavolu","Gokavaram","Mummidivaram","Allavaram"],

"Krishna": ["Machilipatnam","Penamaluru","Gudivada","Vijayawada Rural","Nuzvid","Jaggayyapeta","Ibrahimpatnam","Nandigama","Gannavaram","Bapulapadu","Kaikalur","Tiruvuru","Vuyyuru","Gampalagudem","Kanchikacherla","Kalidindi","Kankipadu","Mylavaram","Pedana","Mudinepalle","Agiripalle","Vatsavai","Chandarlapadu","Vissannapet","G.Konduru","Musunuru","Pamarru","Unguturu","Pamidimukkala","Challapalle","Chatrai","Movva","Penuganchiprolu","Gudlavalleru","Guduru","Veerullapadu","Kruthivennu","Mandavalli","A.Konduru","Nagayalanka","Bantumilli","Reddigudem","Koduru","Avanigadda","Ghantasala","Thotlavalluru","Nandivada","Mopidevi","Pedaparupudi"],

"Guntur": ["Tenali","Narasaraopet","Mangalagiri","Chilakaluripet H.O. Purushotha Patnam","Bapatla","Sattenapalle","Ponnur","Piduguralla","Macherla","Vinukonda","Repalle","Tadepalle","Dachepalle","Pedakakani","Chebrolu","Nadendla","Tadikonda","Amaravathi","Gurazala","Phirangipuram","Nekarikallu","Duggirala","Rompicherla","Cherukupalle H.O. Arumbaka","Medikonduru","Nizampatnam","Atchampet","Bollapalle","Kollipara","Edlapadu","Krosuru","Kollur","Thullur","Nuzendla","Machavaram","Karempudi","Karlapalem","Nagaram","Bhattiprolu","Pedakurapadu","Rentachintala","Prathipadu","Durgi","Veldurthi","Ipur","Tsundur","Vatticherukuru","Rajupalem","Amruthalur","Vemuru","Muppalla","Pedanandipadu","Kakumanu","Pittalavanipalem","Bellamkonda","Savalyapuram H.O. Kanamarlapudi"]
};

var Villages = {
"Arong": ["Arong","Big Lapati","Chuckchucha","IAF Camp","Kakana","Kimois","Kinmai","Kinyuka","Malacca","Mus","Perka","Sawai","Small Lapati","Tamaloo","Tapoiming","Teetop"],

"Rajahmundry Urban" : ["Rajahmundry Urban","Rajavolu","Torredu"],

"Machilipatnam" : ["Arisepalle","Bhogireddipalle","Borrapothupalem","Buddalapalem","Chilakalapudi"],
"Tenali" : ["Kolakaluru","Nandivelugu","Nelapadu","Pedaravuru"]

};

$.each(Countries, function(key, value) {
$('#first').append($("<option></option>").attr("value",value).text(value));
});

function changeSelectOption(firstId, secondId, jsonObj){
$(firstId).change(function() {
$(secondId).find('option').remove().end().append('<option value="All">All</option>').val('All');
$.each(jsonObj[$(this).val()], function(key, value) {
$(secondId)
.append($("<option></option>")
.attr("value",value)
.text(value));
});
});
}
changeSelectOption("#first", "#second", States);
changeSelectOption("#second", "#third", Districts);
changeSelectOption("#third", "#fourth", Mandals);
changeSelectOption("#fourth", "#five", Villages);

</script>
</body>
</html>

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

var sourceSwap = function () {
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;
   }
});});

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>');
}

/*-------------------*/

<select class="form-control" id="selecterId">
<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');
}
});

/*----- 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>

Web Templates Info

Pages

Tuesday, October 25, 2016

Multiple Select Fields Using Json and Jquery

Saturday, August 13, 2016

Bootstrap Jquery

Tabindex working with event.charcode

On mouse over image change

/----- on click menu active -----/ ( link )

Bootstrap side nav dropdown

Refresh/Reload web page only once

Match Media query with jquery

Equal heights for div's with jQuery

Pages

Tuesday, October 25, 2016

Multiple Select Fields Using Json and Jquery

Saturday, August 13, 2016

Bootstrap Jquery

Tabindex working with event.charcode

On mouse over image change

/*----- on click menu active -----*/ ( link )

Bootstrap side nav dropdown

Refresh/Reload web page only once

Match Media query with jquery

Equal heights for div's with jQuery

/----- on click menu active -----/ ( link )