Tuesday, October 25, 2016

Multiple Select Fields Using Json and Jquery

<!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>

Saturday, August 13, 2016

Bootstrap Jquery

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

<style>
.v_menu_details:not(.initial) {
display: none;
}
</style>