Toggle input checkboxes clicking their parent area

/in , , /by

Without JavaScript:

Thanks to japanfever

Cursor waiting and not pointer events while waiting for a server answer and/or data processing

/in , , /by

Keep in mind that you cannot change your cursor if you avoid pointer events, to do it properly set the cursor property in the body and the pointer-cursor property in all its descendants.

Scrollable table with fixed header

/in , /by

Instead of using absolute positions, containers and so on you can use CSS Grid to set header and body.

Select elements by dragging a box

/in , , /by

You can select elements easily drawing a box with your mouse without using jQuery UI or third party plugins. Just handle 2 mouse events and check if at least one point of each element is within your box area.

Notice, that we are using a third event (as guidance) simply to draw the area.

In my first implementation, it was available to select any element by surrounding any of its corners or a minimum area inside it, but due to its complexity and most of the used scenarios, I decided to change the selection criteria to the center point with all elements same size.

Short tricks of HTML, CSS and JavaScript

/in , , /by

Dear fellas, I’d like to share with you ^^ an article about tricks and basic concepts in HTML, CSS and JS. A list of How Tos for everyday use with easy and declarative approaches. Hope you like it (just with the header image I became a level 20 paladin)

Short tricks of HTML, CSS and JavaScript on Medium.