Tag Archive for: mouse

How to disable and/or remap buttons on your mouse

Use the program xev through grep to show only ButtonPress events.

xev | grep -A2 ButtonPress

Create a file called .Xmodmap

micro ~/.Xmodmap

Inside the file disable and/or remap buttons you detected with xev

! Remap button 1 to 8 and disable button 8 and 9.
pointer = 8 2 3 4 5 6 7 0 0

Check it.

xmodmap ~/.Xmodmap

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

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.

Select elements by dragging a box

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.

Dealing with zooms and mouse dragging selections

There is a nice CSS property to change any zoom you want and it is called with the same name (zoom), however it doesn’t work well at the same time with mouse dragging selections because of the references and the different implementations around browsers. What you can used instead is another familiar CSS property together with a reference. We are talking about scaling with the transform property and setting up its origin.