Tag Archive for: selection

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.

Dealing with zooms and mouse dragging selections

/in , , /by

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.

Infinite previous and next selection

/in , , /by

Select each element in a selection loop. If you go forward as soon as you finish the list of elements you will start selecting from the beginning and the same if you go in opposite direction.

Don’t forget to use nextElementSibling and previousElementSibling (DOM Elements) instead of nextSibling and previousSibling (DOM Objects). A DOM Object can be anything: comments, insolated text, line breaks, etc. In our example nextSibling would have worked if we had set all our HTML Elements together without anything between then:

<ul><li></li><li></li></ul>