driver.js
driver.js copied to clipboard
Problem when element position changes after popover opens
In my application has a sidebar with button for toggle width (hide or show). When add step in this button, and user click in this button, the stage position crash.
Exists idea for fix this or options in current version for fix this?
See this simulation:
This is because the red circle changes position when clicked.
Since, Thank you.
I saw that we have driver.refresh ()
, which reloads the current step.
I made a click and mouseover event on the element to fire driver.refresh ()
. It worked.
Is there any better way to do this, something native, for example? I'm feeling that the way I did it is a problem.
I am using the code below to refresh the overlay position with a small delay (here 500ms). This allows the clicked element to handle any of its own logic and move into a new position.
The user can keep interacting with the highlighted element using mouse clicks and the overlay and popover will follow (with a small delay of 500ms).
const DRIVERJS_REFRESH_DELAY_ms = 500;
driver = new Driver( {
onHighlighted: function (el) {
// set up event handler to catch clicks on the highlighted element:
$(el.getNode()).on(
"mousedown.mydriverjs", function (ev) {
// Need to call driver.refresh() with a delay to allow element to handle it's own events
// and move itself into new position
window.setTimeout(function () { driver.refresh(); }, DRIVERJS_REFRESH_DELAY_ms);
}
);
},
onDeselected: function (el) {
$(el.getNode()).off("mousedown.mydriverjs"); // deregister event handler from onHighlighted
}
}
Note:
- This code uses jQuery to register and deregister event handlers, but of course one could also use plain JS
addEventListener()
/removeEventListener()
- If the user can interact in other ways with the highlighted element, e.g. key presses, one would have to hook into those events as well.
You can use refresh
method as suggested.
We also just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.