Clearing a File Input

For clearing input field, we can use .replaceWith() Event to resolve the clear

HTML

Clear Input

jQuery

// Referneces
var clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    var control = $("#control");
    control.replaceWith( control.val('').clone( true ) );
});

.replaceWith() –  A function that returns content with which to replace the set of matched elements.

For Multiple time work – The control variable has to be reinitialized inside the click callback function.

Output
//jsfiddle.net/ravinthranath/b3mqr95x/embedded/js,html,css,result/dark/

Advertisements

Forcing Browser to Print Background Graphics

The Most browser doesn’t have an option to print the background graphics through via CSS but –webkit– browser have the option.

The Webkit-Only Solution

The simplest solution is using the -webkit-print-color-adjust style. it works for both background colors and background images. All you need to do is add this style to the element that has the background that you want to print:

-webkit-print-color-adjust: exact;


* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}

The downside here is that this will only work in Chrome 26+ and Safari 6+ and it will never work on the body tag.

Make a user friendly data tables for enterprise applications view

Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.

Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.

Resource to check the variety of tables:
https://uxdesign.cc/design-better-data-tables-4ecc99d23356

Continue reading “Make a user friendly data tables for enterprise applications view”

Avoid saving images in .webp format instead of .png/.jpg in Google Chrome

For Google Chrome browser :
You may have noticed that images on select websites, many Google properties like Google Play, for example, display images in Google’s web format and not a standard format like JPG or PNG.

Extension: WebP
A new image format called ‘.WebP’ has evolved over time and is currently developed by Google, that provides lossless and lossy compression for images on the web.

Converted to lossless
Google reports that images converted to lossless webp are 26% smaller in size compared to PNGs, whereas lossy webp images are 25-34% smaller in size compared to JPEGs.

Continue reading “Avoid saving images in .webp format instead of .png/.jpg in Google Chrome”

how to view svg files in windows explorer instead of internet explorer icon

First, you need to have the SVG viewer extension installed.

Step 1 : You will need to know if you have the 32 or 64-bit version of Windows for this extension

Step 2 : Download the extension here

Step 3 : Double click to install the downloaded extension

Step 4 : reboot your computer and see the actual .svg icons in your windows explorer

Note: Tested in Windows 10 pr, working fine..

Complete guidance of CSS:nth-child Works

The :nth-child() CSS pseudo-class matches one or more elements based on their position among a group of siblings.

/* Selects every fourth element among any group of siblings */
:nth-child(4n) {  color: Red;}

// Select ODD element like 1,3,5,...
:nth-child(odd) {    background: red;}

// Select Even element like 0,2,4,...
:nth-child(even) {    background: blue;}

// Select 7th child
:nth-child(7) {    background: blue;}

// Select All But The First Five
:nth-child(n+6) { background: green; }

//Select Only The First Five
:nth-child(-n+5) { color: green; }

//Select Every Fourth, Starting At The First
:nth-child(4n-7) { /* or 4n+1 */ color: green; }

// Select the Second to Last Element
:nth-last-child(2) { color: green; }

Example: nth-child(4n):

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12

:nth-child() is compatible in Chrome, Firefox, and IE9+

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13
4 9 17 20 16 18
5 11 21 24 20 23

For More Guidance, Please check below:

https://css-tricks.com/useful-nth-child-recipies/ (width Examples)

https://css-tricks.com/how-nth-child-works/

http://nthmaster.com/ (Mater in nth Child pseudo-class )

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

https://css-tricks.com/almanac/selectors/n/nth-child/