How is jQuery code distributed between different versions of a responsive layout?

Question

JavaScript

Good afternoon.

I'm learning adaptive layout. As for css, everything is very clear and there were no questions, but jQuery in the adaptive layout does not give me peace. There is an object, for example. On the desktop, several events are hung on the object, but on mobile phones, these events should no longer fire. How to act correctly in such cases? Is it really possible to hang an onresize event on the window and set a variable when a certain point passes between the desktop version and the mobile one? Those. events on desktop and mobile should be different. How to do it right - I don’t know yet, but I will always have time to put together crutches, but this will not give progress.

The second question is the transfer of objects in the DOM. It so happened that in the desktop and mobile versions, one object is located in completely different places. Is there a practice when using JS we drag a piece of code back and forth?

I will be very grateful for your answers. I hope for understanding and lack of agra :-)

Answer 1

one.

On the desktop, several events are hung on the object, but on mobile phones, these events should no longer fire.

All right. We write the data to the global and check the sizes when the event is called.

h = windows.height
w = windows.width

$(window).resize(function() {
   h = windows.height;
   w = windows.width;
});

2.

It so happened that in the desktop and mobile versions, one object is located in completely different places.

If you are looking for a DOM element from the root of the tree and it has a unique name, then it doesn't matter, it all depends on how much you will iterate over the DOM elements. At the expense of binding events, I wrote in paragraph 1, depending on the size - you can bind different events.
3. If you have a wild desire to separate not only SIZES (you mention desktop and mobile device, but they can have the same screen sizes), then you can classify the device using matthewhudson.me/projects/device.js