Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Remove sorting arrows icons from header and clone header row in jQuery Data Tables

Use following CSS code to remove sort arrows icon they display in the headers to indicate sorting options

/* Remove sorting arrows in jQuery Data Tables */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead th.sorting_desc:before {
    background: none;
    content:none;
}


Use following CSS code to remove sort arrows(ascending and descending order icons) from duplicate header rows or custom column based filter row.

/* Remove sorting arrows from cloned header filleter row from jQuery Data Tables */
table.dataTable thead tr:nth-child(2) th.sorting,
table.dataTable thead tr:nth-child(2) th.sorting_asc,
table.dataTable thead tr:nth-child(2) th.sorting_desc,
table.dataTable thead tr:nth-child(2) th.sorting_desc:after,
table.dataTable thead tr:nth-child(2) th.sorting_desc:before {
    background: none;
    content:none;
}

Bootstrap popup model events fires when model state closed/closing or displayed/displaying state

Following are some Bootstrap events fires when bootstrap model closes or opens.

All modal events are fired at the modal itself (i.e. at the <div class="modal">).                  

Events            

show.bs.modal          

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
$("#sampleModal").on("show.bs.modal", function () {
    //The modal will be displayed now
});

shown.bs.modal       

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
$("#sampleModal").on("shown.bs.modal", function () {
    //DO EVENTS when the modal has been made visible
    //user (will wait for CSS transitions to complete)
});

 

hide.bs.modal

This event is fired immediately when the hide instance method has been called.

hidden.bs.modal       

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
$("#bsModel").off("hidden.bs.modal").on("hidden.bs.modal", function (e) {
  e.preventDefault();
 //DO EVENTS when the modal has been made visible
 //user (will wait for CSS transitions to complete)
 
 }) 

CSS absolute lengths measurement units

CSS has several different measurement units for properties "length" values, such as width, margin, padding, font-size(i.e.  15px, 0.5em, 2cm etc)

There are two types of absolute and relative

Absolute Lengths

The absolute length units are fixed, and a length expressed in any of these will appear as exactly that size, like cm,mm,in,px,pt,pc

Code snippets,

CSS code samples with cm,mm,in,px,pt,pc measurement units.

nav {
    line-height: 2cm;
}
 
.detials-section {
    /*in screen pixel minimum width here 200mm equal to 755px */
    min-width: 200mm;
    /* margin bottom is around half inch */
    margin-bottom: 0.5in;
    /*1pt equal to 1.3px, here font is 12px */
    font-size: 9pt;
}
 
h1 {
    /*picas (1pc = 12 pt) */
    font-size: 1.5pc;
}
 
span
{
    font-size:12px;
}