Detecting a jQuery Collision – Part I
The requirements of those running online stores are very diverse. As regards product settings, usually the majority of Magento built-in features can meet expectations of a typical webstore administrator. However, sometimes it is necessary to implement additional functionalities that deviate a little from the standard ones.
One example may be the option of configuring the product's look by a user. Such situation occurs most frequently when selling T-shirts or mugs with applied graphic or materials with prints that can be modified by the user, on the assumption that we offer ready-made templates or provide an option of uploading images. In order to have an original product, buyers often want to be able to set the layout of the print’s content manually. For this purpose it’s necessary to create a functionality enabling the potential buyer to introduce desired changes.
In order for the user to have a free choice, we should implement/add a simple product configurator that can be operated either using a mouse (and a tablet) or using a keypad. If we choose the second solution (i.e. the keypad), which is for various reasons often more attractive to ‘desktop’ users, sooner or later the developer will face the issue of a collision on a surface.
As you will soon see, detecting collisions is not complicated, since it generally boils down to dynamically checking coordinates of subsequent
The aim of this article is creating a small application enabling the user to control a block moving within a selected field that will contain static objects that block the motion. The pack with all the files can be found here:
At the moment hardware acceleration is launched, among others, by:
WebGL 3D Drawing,
CSS3 3D transforms.
For our purposes, we will adapt the CSS3 3D transforms mechanism. Additionally, we will make use of HTML5 and jQuery (even though jQuery is not one of the fastest libraries, we will use it due to the fact that it is most common among web developers).
Step I – HTML5
Application responsible for detecting collisions will consist of four files:
jquery.min.js (current version of jQuery)
The index.html content is presented below:
We will skip information on the HTML5 alone, since it falls outside of the scope of our considerations.
For us, the most interesting fragment of the HTML document is the section with ‘collisions-area-wrapper’ class where all activities will take place, that is motion and collisions:
The ‘Collisions-area-wrapper’ section is a container storing all objects (
Description of particular classes of block elements is provided below:
obj – every object within the section ‘collisions-area-wrapper’ and taking part in collisions,
obj-in-motion – movable object that can be moved using keypad cursors,
static – immovable objects (in general),
elements from obj-1 to obj-5 – subsequent immovable
Step II – CSS
You can find the content of the styles.css file below:
Actually, there isn’t a lot to discuss here – if you’re interested in the subject of collisions, CSS is surely not a mystery to you. You only need to pay attention to selectors with the following classes: ‘collisions-area-wrapper’, ‘obj’ and ‘obj-in-motion’. We gave a relative position to the .collisions-area-wrapper section so that all divs with ‘obj’ class could be positioned absolutely. Thus the elements contained in the .collisions-area-wrapper section that have position: absolute will be positioned in relation to its [section’s] edge instead of the edge of another superior covering container (by default it is the browser’s window).
At this moment, the following question should arise in your head: why do we need position: absolute and position: relative, since our aim is to use 3D transformation instead of the attributes top, bottom, left, right…? Well, the answer is simple: transform3d refers to its own element’s coordinate system and therefore in case of using only transform3d we wouldn’t have any common reference point for our .obj objects, which in turn would result in a mess in the coordinates. We need a global system linking all
We’ll discuss other methods of detecting collisions in the next part of this article, so stay tuned.