Retro-Slider mit Skala und rechteckigem Schiebeknopf

[eki]

Kannst Du mal Deine Sicht hier als Bild posten (alles unterhalb des slider divs aufgeklappt).

[dadoc]

So?

[eki]

Das schaut für mich so aus, als ob das fhem-tablet-ui-user.css gar nicht genutzt wird (die Klassen sind richtig gesetzt etc). Kannst Du mal schauen ob und in welcher Reihenfolge Du die css files in Deinem Header einbindest? Es müsste auf jeden Fall das fhem-tablet-ui-user.css nach dem fhem-tablet-ui.css eingebunden werden.

[dadoc]

Hmm... ich nutze ja Pagetab, da sind die css in der index.html definiert:

Code Auswählen Erweitern

    <link rel="apple-touch-icon" href="/fhem/tablet/custom-icon.png" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

<!-- <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" /> -->


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user-mixerxxx.css" />< -->
<!-- <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>
Müsste aber passen?
Und wie gesagt: Wenn ich irgendetwas anderes in /fhem/tablet/css/fhem-tablet-ui-user.css ändere - etwa den Code für den Retro-Button

Code Auswählen Erweitern

.vertical .range-handle {
    left: -17px !important;
}

.range-handle {
  width: 35px !important;
  height: 15px !important;
  border-radius: 3px !important;
  background-color: black;
  background-image: linear-gradient(180deg, white,black);
  background-size: 2px 2px;
}
einfüge, ändert sich das in der ftui-Anzeige sofort, d.h. der Handle wird vom runden zum rechteckig-geriffelten Modell.

[eki]

Was passiert denn, wenn Du folgendes simples HTML File öffnest?

[dadoc]

Das:

[eki]

Dann ist da irgenwas mit den Pfaden nicht richtig. Wie sieht es denn mit einem File mit relativen Pfaden aus (angehängt)?

[dadoc]

Genau so. Kommentiere ich dagegen

Code Auswählen Erweitern

.vertical .range-handle {
    left: -17px !important;
}

.range-handle {
  width: 35px !important;
  height: 15px !important;
  border-radius: 3px !important;
  background-color: black;
  background-image: linear-gradient(180deg, white,black);
  background-size: 2px 2px;
ein, sieht es so aus.

[dadoc]

So, ich habe jetzt mal ein frisches ftui installiert und nur:
- index.html
- menu.html
- unten.html (die Seite mit dem Slider)
- die Bilder
- die fhem-tablet-ui-user.css
reinkopiert.
Das Ergebnis ist unverändert. Kann eigentlich auch nichts mit dem pagetab-Aufbau zu tun haben, denn ich habe mal den ganzen Head direkt in die unten.html gepackt -> dasselbe, genauso wie mit deinen Test-HTMls.
Bin vorerst mal mit meinem Latein am Ende...

[eki]

Könntest Du diese "Minimalinstallation" mal hier als zip posten (mit allen Dateien). Dann kann ich das bei mir mal aufspielen und versuchen nachzuvollziehen.

[dadoc]

Da ist sie:

[eki]

Mir ist aufgefallen, dass Du die '>' in den Selektoren immer noch enthalten hast. Darüber hinaus gibt es eine zweites Problem, das wohl erst mit 2.7.2. hineingekommen ist.

Kannst Du bitte mal mit den angehängten Anpassungen ausprobieren.

[dadoc]

Mir ist aufgefallen, dass Du die '>' in den Selektoren immer noch enthalten hast.

Nicht immer noch, sondern wieder, nachdem ich feststellte, dass das Entfernen das Problem nicht gelöst hatte.

Kannst Du bitte mal mit den angehängten Anpassungen ausprobieren.

Super - damit scheints zu gehen! Ich kann momentan aber nur am Desktop-Bildschirm testen, nicht auf dem iPad - mach ich heute Abend. Am Desktop sind die ftui-Slider generell oft sehr holprig.
Vielen Dank & viele Grüße
Martin

[dadoc]

Moyn,
Das ,,Sliden" geht soweit prima. Einziges Problem: beim ersten Aufruf der betreffenden Pagetab-Seite nach längerer Nicht-Benutzung werden trotz geöffneter Läden geschlossene angezeigt, und zwar sowohl für die grafischen Slider als auch für einen normalen, der die drei Läden als Structure steuert.
Einmal zu einer andrren Seite gewechselt und wieder zurück, stimmt die Anzeige. Muss mir die Slider-Definition wohl noch mal anschauen.
Grüße
Martin

[dadoc]

Guten Morgen,
Nun bin ich dabei, die (foto)grafische Rolladenanzeige durchgängig mit Fotos des jeweils realen Ausblicks unzusetzen - phantastische Sache das!
Das einzige verbleibende Problemchen ist, dass auch geöffnete Rollläden beim Aufruf der Seite zunächst als geschlossen angezeigt werden. Dreht man das iPad einmal kurz vom Quer- ins Hochformat, korrigiert sich die Anzeige sofort.
Woran könnte es liegen, dass die Ansicht nicht gleich beim ersten Aufruf korrekt dargestellt wird - css-Problem, ftui-Slider-Problem oder mein Fehler?
Grüße
Martin