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>


5 comments: