Movable div

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Movable div

Post by Tata » Mon May 29, 2017 2:07 pm

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. Or is there another safe way to have such DIV draggable?
And I can't find the solution for the code

Code: Select all

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
 $(function() {
$( ".switcher" ).draggable();
});    
</script>
<style>
.switcher{width: 250px; min-height: 70px; padding:1em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: purple; z-index: 10000; color: white; text-align: center;}
.switcher:hover{cursor: pointer;}
</style>
<div class="switcher">
          <?php echo themeswitcher();?>
</div>
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Mon May 29, 2017 3:01 pm

Probably solved.
1. Removed

Code: Select all

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2. Activated jQuerryUI
3. Changed .switcher to #switcher and class to id
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Movable div

Post by cmb » Mon May 29, 2017 3:06 pm

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.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Mon May 29, 2017 3:41 pm

cmb wrote:This creates a red square at the bottom of the page, which can be dragged around.
Well, it's really simple. And the red box is nicelly movable. But how to add the code into the div?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Movable div

Post by cmb » Mon May 29, 2017 3:55 pm

Tata wrote:Well, its really simple. And the red box is nicelly movable. But how to add the code into the div?
The main problem is that this code assumes that the closest positioned anchestor of the element that is going to be dragged is <body>. So if the themeswitcher widget should be draggable, you have to put it somewhere in the DOM where no anchestor is positioned (e.g. position:relative).

The rest should be simple. Just remove the second part of the script (line 34ff), and put in your template something like:

Code: Select all

<div class="switcher" onmousedown="drag(this, event)" style="position:absolute">
          <?php echo themeswitcher();?>
</div>
As soon as the drag.js is loaded, div.switcher can be moved around.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Mon May 29, 2017 4:37 pm

Super! Danke.
Ich meinte nur, dass - nachdem ich die scripts rausgenommen hatte und es wurden die bereits standard installierte jQuerry benutyt, sollte es nicht schaden.
Aber so ist es auch super. Nur ich muss jetyt den script in jeden Template reinkopieren.

Aber ich meine, dass es könnte auch direkt ins Plugin rein. Oder?
Ooopss! Nicht ganz. Der Box ist beweglich, aber der Plugin funkzioniert nicht.
Ich habe jetzt alles hochgeladen auf http://tata-templates.cmsimple.sk/. Nur in dem ersten Template ist es mit dem beweglichen Code. Die andere haben den Switcher statisch.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Mon May 29, 2017 5:48 pm

So.
Ist der onMouse event da, funkzioniert der Plugin nicht. Ist aber beweglich. Nimmt mann es weg, funzioniert der Plugin, ist aber statisch.
intro.zip
Ein ganz kleiner Template.
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Mon May 29, 2017 11:03 pm

Ich habe auf die Scripte verzichtet und lieber nur den Plugin bisschen gestylet. Sonst habe ich dayu gekommen, dass - sobald es durch ein Script gerufen war, erschien es doppelt.
Eine Sache ist aber unklar - die Webseite wird ohne der ersten Seite geöffne. Warum wohl?
GEFUNDEN:
Das auftaucht nur solange the themeswitcher aktiv ist.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Movable div

Post by cmb » Tue May 30, 2017 8:33 am

Tata wrote:Ich habe auf die Scripte verzichtet und lieber nur den Plugin bisschen gestylet. Sonst habe ich dayu gekommen, dass - sobald es durch ein Script gerufen war, erschien es doppelt.
Das könnte daran liegen, dass der nächste positionierte Vorfahre des Themeswitcher-Widget eben nicht <body> ist.
Tata wrote:Eine Sache ist aber unklar - die Webseite wird ohne der ersten Seite geöffne. Warum wohl?
GEFUNDEN:
Das auftaucht nur solange the themeswitcher aktiv ist.
Ein bekanntes Problem, das ich vermutlich nicht lösen kann.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Tue May 30, 2017 9:53 am

Damit kann man leben. Wie wäre es dann mit der Option den Switcher fix oder beweglich zu machen? Ich habe es in *.js versucht. Falls ich mit js umgehen könnte...
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply