Inset CSS property is messing our WordPress plugin which has draggable elements with jQuery
To our elements which are draggable instead of top and left properties, these are assigned: https://developer.mozilla.org/en-US/docs/Web/CSS/inset This is an experimental feature only supported by Firefox.
The problem is we have to save the whole HTML document. And it is saved with INSET css which means when someone opens it in google everything crashes. Like the whole seating chart is messed up.
How can we disable INSET option from showing at all and experimenting our plugin?
We use jQuery draggable function.
example code:
$(this).draggable({
grid: [grid_size * window.tc_seat_zoom_level, grid_size * window.tc_seat_zoom_level],
handle: $(this).find('.tc-seat-group .tc-heading'),
start: function (event, ui) {
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
var newLeft = (ui.originalPosition.left + changeLeft) / window.tc_seat_zoom_level; // adjust new left by our zoomScale
var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
var newTop = (ui.originalPosition.top + changeTop) / window.tc_seat_zoom_level; // adjust new top by our zoomScale
ui.position.left = newLeft;
ui.position.top = newTop;
}
});
Thanks
To our elements which are draggable instead of top and left properties, these are assigned:
https://developer.mozilla.org/en-US/docs/Web/CSS/inset
This is an experimental feature only supported by Firefox.
The problem is we have to save the whole HTML document. And it is saved with INSET css which means when someone opens it in google everything crashes. Like the whole seating chart is messed up.
How can we disable INSET option from showing at all and experimenting our plugin?
We use jQuery draggable function.
example code:
$(this).draggable({
grid: [grid_size * window.tc_seat_zoom_level, grid_size * window.tc_seat_zoom_level],
handle: $(this).find('.tc-seat-group .tc-heading'),
start: function (event, ui) {
ui.position.left = 0;
ui.position.top = 0;
},
drag: function (event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
var newLeft = (ui.originalPosition.left + changeLeft) / window.tc_seat_zoom_level; // adjust new left by our zoomScale
var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
var newTop = (ui.originalPosition.top + changeTop) / window.tc_seat_zoom_level; // adjust new top by our zoomScale
ui.position.left = newLeft;
ui.position.top = newTop;
}
});
Thanks