How to not print columns on display while printing on paper

Many of you may or may not be aware of a javascript code that is capable of printing page content.

We had created a report which looked something similar to the one shown below.
  

Notice that there are two columns that display "No" in orange colour. We want to print the report, but we do not want the "NO" columns to be printed on paper.

Hiding columns from a table using jQuery

jQuery has a simple command which can hide any number of cells based on their class names. That command to hide a class is given below.

$('.className').hide();

This command was given in the jQuery code, to be called when the print command was called.

Let us assume that we gave the classname "noprint" to all those cells in those two columns, which we do not want to print.

In the code loop, we added an additional classname called "noprint" to the content, like so.

 If you see, the  class "noprint" has been added. Now, when I give the command 

All cells that need to be hidden, have to be given the classname "noprint".

$('.noprint').hide();

All those cells that have noprint class in them are hidden from view.

We are using "class" and not "id" because of obvious reasons, the reasons being the "id" can appear only once in an entire page.

Printing using the system dialogue from web application

Now, the Print command may be used to call the system's print dialogue and get our page printed. See below for the code.




Solved.

mdbootstrap css and the invisible uncolored button

mdbootstrap css not working as expected

This document can otherwise be called btn-success vs btn_success Bootstrap css. This is because, a simple oversight resulted in a confusion that left our imagination flying at the speed of a mythical spaceship.

Recently, we were working on a page, where certain page elements were to be painted dynamically in the course of the program.

CSS not updating cell as expected

When the program was run, the color of the cell did not change. On analysis, we found the css class to be present in the code. But, the change did not reflect when the page was rendered. It was quite a confusing situation indeed.

But, after many rounds of analysis, we found out the problem to be an innocuous "_" symbol. Instead of "-" it was found to be an underscore "_".

btn-success explained

To put it simply, the class that we called was btn_success,  whereas what we should have called or referred to would have been "btn-success".

Notice that the character "_" in place of "-". Though they seem similar, it is easy to overlook them when they are part of a larger group of words, in this case, a program.

We are recording it here so it may be useful to another set of desperate souls who want color in their mdbootstrap css.

btn-success In a nutshell

btn-success is a bootstrap class, which highlights the cell green. If you use btn_success instead of btn-success, your cell will not be highlighted in green.

Usage of btn-success

 

In the above example, a ? is displayed with in a button, which has the background color green.

Learning HTML Online, Fast and FREE

A FREE Online Course for Web Development

Yes! It is true. Though, it was a serendipitous discovery. There aren't many sites that offer you the best quality training on the web. And that too, for no cost.

A run through of the syllabus and the course structure has not failed to amaze us. Such is the smooth and easy flow of the lessons, which will take the student through all the aspects of the course.

FreeCodeCamp is my first choice if you want to learn a new subject, such as web development.

According to their website, they are a community that helps you learn to code, then get experience by contributing to open source projects used by nonprofits.

Established in 2014, freeCodeCamp has helped over 14,000 people get jobs or get better offers. They have helped over 30 non-profit organizations with their web sites too.

For the student, in addition to the course content, they also have a Youtube channel, which contains classroom sessions, which can be utilized by the student to improve their techniques.

You can follow them on twitter, facebook, Subreddit and 

Their LinkedIn University page is here

So, if you are looking to learn JavaScript, jQuery, HTML5 and web development online for FREE, freecodecamp is where you need to go.