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

Let we want to change the menu position by default from the   t op:101px ,     but when you scroll the mouse greater than the 50px of window height, menu top position should be change to top:0px;   .  so for that we have coded here : HTML=>  <div class="subAboutHeader">   <h2>About The Page</h2>   </div> JS=> window.onscroll = function() {posChange()}; function posChange (){ if(window.pageYOffset > 50){ $('.subAboutHeader').css({"top" : "0px"}); } else{ $('.subAboutHeader').css({"top" : "101px"}); } }

Sometimes JS/ Jquery doesn't work in the modal when you  call it  on a button by onclick() or any other method. i.e.==> <a href="#" onclick=" getViewFIRDetail ("8165007160050","8165007160050") ">8165007160050</a> if we are displaying modal on   getViewFIRDetail method/function, the jQuery script will not work properly. for work properly do it===> $('#modalId').on('shown.bs.modal', function () { `enter code here` } ----------------------------- but remember when you call  modal on a button by data-target, the script will work fine, i.e.==> < button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</ button >    - - on displaying modal by this method will work fine 

<html>   <head>     <style>       #Progress_Status {         display: block;         position: relative;         width: 100%;         height: 35px;         background-color: #ddd;         margin: auto;         text-align: center;       }       #myprogressBar {         position: absolute;         left: 0;         width: 1%;         height: 35px;         background: #4CAF50;         text-align: center;         line-height: 32px;         color: black;         margin: auto;               }     </style>   </head> ...

HTML==> <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> </head> <body> <div class="panel-group" id="accordion1">     <div class="panel panel-default">         <div class="panel-heading">             <h3 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" dat...

what happen is that you have 2 div with the class  panel-group  one inside the other so when you click in the second  panel-group  you fire the event two times witch cause the problem. so we added one more class " .inner " with second panel-group.  So Now it will not create an issue. <!DOCTYPE html> <html lang="en"> <head>i   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> /* CSS==> */ <style>     .panel-group .panel {         border-radius: 0;...