This article provides a hack to slide or drag any kind of slider or dragabble element (which is dependent on jQuery) programatically. This code snippet is going to be a normal jQuery code which will manipulate the position of the element itself.
var targetElement = $('#myElement'); //use your own selector to select the element var mouseMoveEvent = $.Event('mousemove'); mouseMoveEvent.pageX = 0; //put your own logic to set the value mouseMoveEvent.pageY = 0; //put your own logic to set the value $(targetElement).trigger('mousedown'); $('body').trigger(mouseMoveEvent); $(targetElement).trigger('mouseup');
Explaining the code
Firstly, we are creating a
mousemove event explicitly. The event need to have two parameters.
pageY, both represent the new X and Y coordinate of your element. I’m setting both the values to zero. You need to put your own logic to determine a value and then set it to
pageY. Remember they are going to be the position with respect to the window and not the element.
After that I’m triggering a
mousedown event; followed by my created
mousemove and finally ending up with
mouseup. This is similar to clicking on the element, dragging and leaving the mouse left button.
Still having issues?
If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.