Drei Slider koppeln/entkoppeln

[dadoc]

Guten Morgen,
ich suche und grübele nun schon eine ganze Weile herum, erfolglos. Vielleicht kann mir ja jemand aufs Pferd helfen?
Drei Rollläden mit HM-Aktoren, drei Slider in ftui, um sie individuell zu steuern, einen weiteren, um sie gemeinsam (über structure) zu steuern. Letzteren möchte ich mir sparen, indem ich einen Button einbaue, mit dem ich die drei Slider koppeln kann, so dass - wenn man einen betätigt - die beiden anderen (respektive die zugehörigen Aktoren) sich genauso verhalten.
In ftui müsste also das Device der drei Slider dynamisch je nach Button-Wert vom jeweiligen Aktor auf die structure wechseln.
Geht das? Außer komplizierten Dummy-Notify-UserReadings-setreading-Konstruktionen ist mir bislang nichts eingefallen.
Danke & Grüße
Martin

[Vaddi]

Hey, funktionieren könnte das ganze.
Je nachdem, wie dein ftui setup aussieht, wird das ganze mehr oder weniger kompliziert.

[dadoc]

Hmm Vaddi... was genau soll ich jetzt aus Deiner Antwort schließen?

[Vaddi]

Mich würde der Aufbau deiner Seiten interessieren. Nutzt du Pagebuttons?
Du könntest natürlich auch deine HTML hier mal hochladen, bzw den part mit den Slidern.

[dadoc]

So, endlich wieder vor Ort.
Die Einbindung der Slider ist eigentlich ganz normal, bis auf die Nutzung von Ekis CSS-Erweiterungen für Hintergrund- und Rolllädengrafiken, die aber nichts mit dem Thema der Kopplung zu tun haben sollten (class= blind blindview*)
Pagebutton nutze ich nicht, aber Pagetabs.
Class retro ist für meinen geriffelten Button.

Code Auswählen Erweitern

<li data-row="3" data-col="2" data-sizex="2" data-sizey="3" class="semitransparent">
    <header class="large semitransparent">T&Uuml;R</header>
  <div data-type="slider"
    data-handle-diameter="25"
data-device="Rolladen_WZ_Tuer"
    data-color="#969696"
    data-height="25"
    class="blind blindviewWZTuer retro">
</div>
</li> 
    <li data-row="3" data-col="4" data-sizex="3" data-sizey="3" class="semitransparent">
<header class="large semitransparent">LINKS</header>
  <div data-type="slider"
    data-handle-diameter="25"
data-device="Rolladen_WZ_links"
    data-color="#969696"
    data-height="25"
    class="blind blindviewWZlinks retro">
</div>
</li> 
    <li data-row="3" data-col="7" data-sizex="4" data-sizey="3" class="semitransparent">
<header class="large semitransparent">RECHTS</header>
   <div data-type="slider"
    data-handle-diameter="25"
data-device="Rolladen_WZ_rechts"
    data-color="#969696"
    data-height="25"
    class="blind blindviewWZrechts retro">
</div>
</li>
    <li data-row="3" data-col="11" data-sizex="1" data-sizey="3" class="semitransparent">
<header class="large semitransparent">3</header>
  <div data-type="slider"
    data-handle-diameter="15"
data-device="Rolllaeden_WZ_structure"
    data-color="#969696"
    data-height="mini"
    class="retro">
</div>
</li>
Grüße
Martin

[Vaddi]

Das ganze ist mit einigen Anpassungen möglich.
In wie weit mein folgender Code bei dir passt, kann ich nicht sagen.
Es kann sein, dass du da noch einige Anpassungen vornehmen musst.

Folgendes in deine index.html vor dem </body>

Code Auswählen Erweitern

<script>
function ChangeSlider() {
    var sl1 = document.getElementById('slider1')
var sl2 = document.getElementById('slider2')
  if (sl1.style.visibility === "hidden") {
        sl1.style.visibility = "visible";
sl2.style.visibility = "hidden";
} else {
        sl1.style.visibility = "hidden";
sl2.style.visibility = "visible";
sl2.style.margin-left = "121px";
    }
}
</script>

Dein obiger Code muss so geändert werden:

Code Auswählen Erweitern

<li data-row="3" data-col="2" data-sizex="2" data-sizey="3" class="semitransparent">
    <header class="large semitransparent">T&Uuml;R</header>
  <div id="slider1" data-type="slider"
    data-handle-diameter="25"
data-device="Rolladen_WZ_Tuer"
    data-color="#969696"
    data-height="25"
    class="blind blindviewWZTuer retro">
</div>
  <div id="slider2" style="visibility:hidden; position:absolute; margin-top: -120px;" data-type="slider"
    data-handle-diameter="15"
data-device="Rolllaeden_WZ_structure"
    data-color="#969696"
    data-height="mini"
    class="retro">
</div>
</li>
    <li data-row="3" data-col="4" data-sizex="3" data-sizey="3" class="semitransparent">
<header class="large semitransparent">LINKS</header>
  <div data-type="slider"
    data-handle-diameter="25"
data-device="Rolladen_WZ_links"
    data-color="#969696"
    data-height="25"
    class="blind blindviewWZlinks retro">
</div>
</li>
    <li data-row="3" data-col="7" data-sizex="4" data-sizey="3" class="semitransparent">
<header class="large semitransparent">RECHTS</header>
   <div data-type="slider"
    data-handle-diameter="25"
data-device="Rolladen_WZ_rechts"
    data-color="#969696"
    data-height="25"
    class="blind blindviewWZrechts retro">
</div>
</li>
    <li data-row="3" data-col="11" data-sizex="1" data-sizey="3" class="semitransparent">
<header class="large semitransparent">3</header>
  <div data-type="slider"
    data-handle-diameter="15"
data-device="Rolllaeden_WZ_structure"
    data-color="#969696"
    data-height="mini"
    class="retro">
</div>
</li>

Anschließend musst du noch einen push button irgendwo rein packen, der zwischen den Slidern hin und her
schaltet. Es wird dabei nur der erste Slider gegen einen "Universal" Slider ausgetauscht.

Code Auswählen Erweitern

<div data-type="push" onclick="ChangeSlider()"></div>

Ich hatte versucht, das ganze mit display: none; und display: block; zu lösen, allerdings kommt FTUI damit nicht
klar und hat die alten Sliderwerte immer überschrieben, darum das ganze mit visibility und den Positionsanpassungen.

Wie gesagt kann es sein, dass du die margin-Werte anpassen musst.
Bei mir funktioniert das ganze ohne Probleme.

Gruß
Vaddi

[dadoc]

Bielen Dank Vaddi,
Wenn ich das Script in die index.html packe, tut sich nichts in Sachen Umschalten bzw. koppeln (ich nutze wie gesagt Pagetab).
Wenn ich es in die Unterseite in den Head-Bereich packe, ditto. Wenn ich es dort kn den Body-Bereich packe, kommt ein Fehler:

jquery.min.js:2
SyntaxError: Left hand side of operator "=" must be a reference

Grüße
Martin

[Vaddi]

Hey,
ich habe mir eine Testumgebung aufgebaut, welche auch Pagetab nutzt.
Das Script muss definitiv in die index.html rein am besten direkt vor dem </body> tag.

Kann es sein, dass dir das Umschalten nicht auffällt? Gib deinem

Code Auswählen Erweitern

<div id="slider2" style="visibility:hidden; position:absolute; margin-top: -120px;" data-type="slider"
mal eine andere Farbe.

[dadoc]

Ich hatte dem Alle-Slider einen anderen Handle gegeben, insofern müsste das auffallen.
Wo genau hast Du denn das Script eingefügt? Weil,  wie gesagt, wenn ich es in der Unterseite zwischen <body> und </body> einfüge, gibt es besagten Jason-Error
Jetzt habe ichs mal (statt mit iPad) im Desktop-Chrome getestet. Egal ob das Script im Header oder body der index.html oder im Header der oben.html eingefügt wird:

ERROR: #oben.html:1 ReferenceError: ChangeSlider is not defined

[Vaddi]

Ups ... tut mir leid, da ist mir ein Fehler unterlaufen.
Bitte das folgende script nehmen und es muss definitiv in die index.html in den body tag

Code Auswählen Erweitern

<script>
function ChangeSlider() {
    var sl1 = document.getElementById('slider1')
var sl2 = document.getElementById('slider2')
  if (sl1.style.visibility === "hidden") {
        sl1.style.visibility = "visible";
sl2.style.visibility = "hidden";
} else {
        sl1.style.visibility = "hidden";
sl2.style.visibility = "visible";
    }
}
</script>

Den HTML Code habe ich auch nochmal ein wenig abgeändert, da musst du nur den Slider mit id="slider2" anpassen.

Code Auswählen Erweitern

  <div id="slider2" style="visibility:hidden; margin-top: -120px;" data-type="slider"
    data-handle-diameter="15"
data-device="Rolllaeden_WZ_structure"
    data-color="#969696"
    data-height="mini"
    class="retro">
</div>

[dadoc]

Ups ... tut mir leid, da ist mir ein Fehler unterlaufen.
Bitte das folgende script nehmen und es muss definitiv in die index.html in den body tag

Du meinst vermutlich nicht in, sondern zwischen <body> und </body>?
Ändert aber nichts, die visible/not visible-Umschaltung mit dem Push Button bewirkt anscheinend nichts.
Kann gerade wieder nur mit iOs Safari testen, muss mir das morgen mal ohne die css-Erweiterungen ansehen.
Grüße
Martin

[Vaddi]

Richtig, zwischen <body> und </body>, am besten direkt vor </body>.
Ich hab es jetzt gerade nochmal in Firefox und Chrome getestet, funktioniert.