defer Javascript in google site audit - lighthouse

Passing the google site audit - defer Javascript in google site audit - lighthouse

<script src="demo_defer.js" defer></script>

This is a script that will not run until after the page has loaded:

Definition and Usage
The defer attribute is a boolean attribute.

When present, it specifies that the script is executed when the page has finished parsing.

Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

Note: There are several ways an external script can be executed:

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
If async is not present and defer is present: The script is executed when the page has finished parsing

If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

Active class to current page link

To highlight the current page add an active or another class name to the link when the linked page is opened using java script.

  <script>
$(".navbar-nav a").filter(function(){
    return this.href == location.href.replace(/#.*/, "");
}).addClass("active");
  </script>

bootstrap 4 get remaining height of parent div

bootstrap 4 get remaining height of parent div

       <div class="row h-100 flex-column">
        <div class="row">
          <div>
            <div>ROWccccccccccc 1</div>
          </div>
        </div>
        <div class="row justify-content-center align-items-center bg-blue flex-grow-1">
          <div class="text-white">ROWcccccccccccccc 2</div>
        </div>
      </div>

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray">grgrgrg</div>
  </div>
</div>

Link - https://codepen.io/anon/pen/RyQvmW?editors=1100

Bootstap 4 hide md and below - Hide in medium screen and below

Reference URL

https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4

Show/hide for breakpoint and down:

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down (n/a 3.x) = d-none (same as hidden)

Show/hide for breakpoint and up:

• hidden-xs-up = d-none (same as hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (n/a 3.x) = d-block d-xl-none
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (n/a 3.x) = d-none d-xl-block

Fix JQuery Plugin issue in Asp.net Update Panel

When you are using asp.net and using Jquery plugins JQuery UI Sliders these Jquery controls and scripts are not working in Update panel after a form submit postbacks.

Solution : document ready will fire only once, not during partial postbacks. You need to call some functions after each partial post back is happend

<script type="text/javascript">
    Sys.Application.add_load(function() {<!--JQUERY CODE GOES HERE-->});
</script>