Tata wrote:I try to use the plugin themeswitcher on a webpage presenting many templates. It basically works. But on pages using e.g. the flexslider, the flexslider disappears. I am not familiar with using jQuerry and there seems to be the problem.
The problem is that you're manually including jQuery, and that conflicts with Flexslider. See
https://cmsimpleforum.com/viewtopic.php?f=29&t=4201 for a way to use jQuery so that there are (usually) conflicts with other components using jQuery.
Tata wrote:Or is there another safe way to have such DIV draggable?
Well, there are plenty of possibilities; using jQuery is okay, but IMO using jQueryUI just for some simple dragging is overkill (consider the large amount of JS and CSS that has to be downloaded and
processed on each page request). Actually, such simple dragging of absolutely positioned elements which are anchored to the body isn't hard to accomplish even with native JS. For instance, you can try the following script:
Code: Select all
/**
* Simplified version of drag() from
* "JavaScript: The Definitive Guide" by David Flanagan
*/
function drag(element, event) {
var startX = event.clientX + window.pageXOffset;
var startY = event.clientY + window.pageYOffset;
var origX = element.offsetLeft;
var origY = element.offsetTop;
var deltaX = startX - origX;
var deltaY = startY - origY;
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
event.stopPropagation();
event.preventDefault();
function moveHandler(e) {
element.style.left = (e.clientX + window.pageXOffset - deltaX) + "px";
element.style.top = (e.clientY + window.pageYOffset - deltaY) + "px";
e.stopPropagation();
}
function upHandler(e) {
document.removeEventListener("mousemove", moveHandler, true);
document.removeEventListener("mouseup", upHandler, true);
e.stopPropagation();
}
}
/**
* Create red square to drag aroung
*/
document.addEventListener("DOMContentLoaded", function () {
var div = document.createElement("div");
div.style.width = "40px";
div.style.height = "40px";
div.style.backgroundColor = "red";
div.style.position = "absolute";
div.onmousedown = function (e) {
drag(this, e);
};
document.body.appendChild(div);
});
This creates a red square at the bottom of the page, which can be dragged around.