CodeKhel

paste below code in header or footer  to apply on all pages else paste in particular pages. $(window).on('load',function(){ $("#header-wrap").hide();   $('body').addClass('header-collapsed');   $(".arrow-icon").toggleClass("open");     //leftsidebar collapsed or minisidebar $("body").addClass('sidebar-collapse'); })

<div class="col-md-3">   <div class="form-group" >     <label for=" " class="ProLabel1">Stage</label>     <div class="ProInput1">       <input type="radio" onclick="preshow()" name="prepost"    value="pre" >Pre Chargesheet       <input  type="radio" onclick="postshow()" name="prepost" value="post">Post Chargesheet     </div>   </div> </div> <script> $(function(){     $('input[name="prepost"]').click(function(){         var $radio = $(this);         // if this was previously checked         if ($radio.data('waschecked') == true)         {             $radio.prop('checked', false);             $radio.data('waschecked', false);         }   ...

To focus on first input box $(function(){ $("input")[0].focus(); }); To focus on second input box $(function(){ $("input")[3].focus(); }); To focus on a particular id of input box $(function(){ $("id1")[0].focus(); });

 $(document).ready(function(){     $('.modal').on('hidden.bs.modal', function (e) {       $(this)       .find(" input[type=text], textarea,select").val('').end()         .find("input[type=checkbox], input[type=radio]").prop("checked", "").end()         /*remove error field when modal close     */         .find(".has-error").removeClass("has-error").end()     .find(".has-success").removeClass("has-success").end()     .find(".FeRror").empty().end();         })     })

function resetData(){ $("#selectorId").find(".has-error").removeClass("has-error"); $("#selectorId").find(".has-success").removeClass("has-success"); $("#selectorId").find(".FeRror").empty(); } /////////////////////////// $('form[name="myform"] input:reset').click(function () {     $('form[name="myform"]')         .find(':radio, :checkbox').removeAttr('checked').end()         .find('textarea, :text, select').val('')           return false; }); //////////////////universe function/////////////// <button type="reset" class="btn btn-primary" onclick="resetDataCaseFrwrd(this)">Clear</button> function resetDataCaseFrwrd(obj){ $(obj).closest("form").find(".has-error").removeClass("has-error"); $(obj).closest("form").f...

 unhighlight : function(element,errorClass, validClass) {                         if ($(element).parent().hasClass('has-error')) {                           $(element).parent().addClass("has-success").removeClass("has-error");                           $(element).next('.FeRror').css('display','none');                         }                                              //console.log($(element).val());                                            //console.log($(element).val() == "");       ...

<form name="MovieSurvey" id="formId" action="page2.php" method="post">     <fieldset id="q8">         <legend class="Q8"></legend>         <label class="question">What are your favourite genres of movies?<span>*</span>         </label>         <div class="fieldset content">             <ul class="checkbox-grid">                 <li>                     <input type="checkbox" name="q8[]" value="Action">                     <label for="checkgenre[]">Action</label>                 </li>                 <li>            ...

<script type="text/javascript"> $(document).ready(function(){ $("#example").DataTable(); $("#example tbody").on("click","tr",function(e){ alert("clicked on tr"); var cell=$(e.target).closest('td'); if(cell.index()==5 ){ alert("Dont Run"); } else{alert("Run"); } }); }); \*\\\\\\\\\\\\\\\\\\\\\\\\\\Or you may use following also\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\ $(document).ready(function(){ $("#example").DataTable(); $("#example tbody").on("click","tr",function(e){ alert("clicked on tr"); var cell=$(e.target).closest('td'); if(cell.index()!= 5 ){  alert("Dont Run"); } }); }); </script> Download Demo Code

When user click on the menu, page is reloaded and at that time current-active-menu  removed from the anchor tag(<a>). Paste below Jquery code in your header or footer file. This script is working OK  for Admin LTE2  treeview(submenu) sidebar  ==>  /** add active class and stay opened when selected */  $(window).on('load', function(){                                                                   // remember we are using secure token in our url, so firstly                                                                         we have to split and filter the url as we want var addr1 =$(...

ReadMore and ReadLess Jquery Script ==> Tested   <style>  .morecontent span {     display: none; } .morelink {     display: block; }   </style>   <script>        $(document).ready(function() {     // Configure/customize these variables.     var showChar = 100;  // How many characters are shown by default     var ellipsestext = "...";     var moretext = "Show more >";     var lesstext = "Show less";          $('.more').each(function() {         var content = $(this).html();         if(content.length > showChar) {             var c = content.substr(0, showChar);             var h = content.substr(showChar, content.length - showChar);         ...

HTML==> <nav id="sidebar">              <ul class="list-unstyled components nav">                          <li><a href="about-project.jsp"><i class="glyphicon glyphicon-briefcase"></i>About project</a></li>             <li><a href="orgchart.jsp"><i class="fa fa-sitemap" aria-hidden="true"></i>Organisation chart</a></li>             <li><a href="profiledata"><i class="fa fa-users"></i>Prosecutor's                Profile</a>             </li>             <li><a href="links.jsp"><i class="fa fa-link" aria-hidden="true"></i> Link Portal</a></li>       ...

download

How to show the child div but kipping it's parent div hide. Technically it's impossible, but by using Jquery we can make child div's or  element's clone and then  can put it outer from that parent div. 'Look how we done it by the Jquery clone method.' HTML==>  <div class="Div1"> </div>  <div class="container" style="display:none;">       <div class="ApImage">          <p>this is the test div</p>      </div> </div> JQuery==> <script>    $(document).ready(function(){    var fieldShow = JQuery(".ApImage").clone();    fieldShow.appendTo(".Div1"); }); </script>

somewhere in the project we have some images and not have anchor tag as parent. And now we want that on click of that image, image should open in new tab.Point out that image may be repeated twice or many more.  For more clearance just  understand the following code.==> CSS==> <style type="text/css">     .ApImage{float:left; width: 100%; border: 2px dotted #f00; margin-bottom: 10px;}     .apPic{display: inline-block; width: 100%; height: auto;} </style> HTML==>  <div class="container">       <div class="ApImage">           <img class="img-responsive apPic" alt="arch_image" src="https://images.adsttc.com/media/images/55f8/107f/9644/1e1f/b100/003e/large_jpg/dubai_board_i_flattened-psd.jpg?1442320488" />       </div>       <div class="ApImage">           <img class="img-responsive apPic" alt...

Sometimes we confused, which function should we use between prop(); and attr(); function. we can understand it by the following example==> HTML==> <div class="container">     <div id="div1"> </div>     <div id="div2"> </div>     <div id="div3"> </div>      <div id="div4"> </div>     </br>     <input type="text"  id="textId" name="input1" readonly="readonly"  autocomplete="autocomplete"  autofocus  />   </div> JQuery==> <script type="text/javascript">     $(document).ready(function(){       $("#div1").html($("#textId").attr("name")+'</br>');       $("#div2").html($("#textId").prop('readonly')+'</br>')          $("#div3").html($("#textId").attr('readonly')+...

Sometimes you have too much content in your page, so you need a button there which help you to move/ scroll / return to top/bottom of that page. Here we are implementing the bottom to top button with the help of Css and Jquery. HTML==> <a  id="return-to-top" data-toggle="tooltip" title="bottom to top"><span class="glyphicon glyphicon-chevron-up"></span></a> <div class="container-fluid" style="padding:0;">   <div class="well" style="=float:left; width:100%; height:1500px; background:orange; color:#fff;"> Scroll down to test the scroll.</div> JQuery==> <script>   /* scroll/return to top button  */   $(document).ready(function(){        $(window).scroll(function(){            if ($(this).scrollTop() > 200) {                $('#return-to-top').fadeIn();            ...

This post will help you to get value from p element and conditionally change the background color of that element if have value more than 20. HTML==> <p class="changebg">1234567891011</p> <p class="changebg">1</p> <p class="changebg">60</p> JQuery==> <script type="text/javascript">   $(document).ready(function(){     $(".changebg").each(function(){   var count =parseInt($(this).text().trim());   if(count>20){       $(this).css('background-color','#f00');     }     else{       $(this).css('background-color','#ff0');   } }) }); For complete code reference  and Demo, download file from the below link provided.

HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>     <head>         <title></title>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>          -->          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>         <script type="text/javascript" src="jquery.doubleScroll.js"></script>         <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/j...