Ankündigung

Einklappen
Keine Ankündigung bisher.

Scrollen - Wipen - Touchen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Scrollen - Wipen - Touchen

    Hallo zusammen,
    xxAPI2 ist so ein gelungenes Projekt, so dass ich jetzt auch anfangen möchte, meine "alte" API1-basierte Visu zu verjüngen ...
    Was macht man also? Man testet, probiert dieses und jenes - und generiert Fragen über Fragen. Und die will ich versuchen, hier mal loszuwerden:

    1) Wie geht ihr denn mit Content um in euren Visus, die nicht in den zur Verfügung stehenden Platz passen? Gerade bei Visu für Smartphone wird's doch schnell sehr eng ...
    Habe daher mal versucht (sehr dilletantisch) XXMODUL zu kopieren und ein XXSCROLLMODUL draus zu machen - einziger Zusatz ist die letzte Zeile mit dem "overflow"Zusatzzeile XXMODUL.JPG
    Tut natürlich nicht. Frage: gibt's eine Möglichkeit, Inhalt im Modul zu scrollen (Maus) bzw. zu wipen (Touch), wenn die eingelesene Seite größer ist als das Modul?

    2) XXMODULCLICK funktioniert wohl nur mit statischem Text. Würde es nicht die Möglichkeiten drastisch erhöhen, wenn XXMODULCLICK mit dynamischen Textfeldern funktionieren würde? Kann natürlich nicht abschätzen, wie aufwändig das wäre.
    Also in etwa sowas: Dyn-Textfeld.JPG

    So, ich denke, das soll erst mal reichen - wichtig wäre mir bei der Neukonzeption meiner Visu ein Ansatz, wie ich eben mehr Inhalt verarbeiten kann als auf einmal dargestellt wird. Natürlich geht's immer über viele Seiten - aber das wäre ja in Zeiten von Touchen & Wipen nicht unbedingt State of the Art (wohl einfach auch Geschmacksache) :-)

    Danke erstmal und viele Grüße
    Tom

    #2
    Punkt 1. height ist auf die Größe des items gesetzt. Da kann natürlich nix scrollen. Probier mal bei height 100%

    Punkt 2. muss ich gucken
    Nils

    aktuelle Bausteine:
    BusAufsicht - ServiceCheck - Pushover - HS-Insight

    Kommentar


      #3
      Probiert mit 100% - dann baut er die Seite gar nicht mehr auf, zeigt den Text "XXSCROLLMODUL" an (löst das Modul also nicht auf) - Fehler wird keiner angezeigt. Mit oarg.item.height funktioniert die Seite dann wieder (wird halt unten abgeschnitten) - nochmal versucht mit 100% : das gleiche Spiel, zeigt Text XXSCROLLMODUL ...

      Kommentar


        #4
        Hab das mal so auf die schnelle im Browser ausprobiert die Werte mittels F12 zu ändern.
        Also Height auf 100% und overflow-Scroll, dabei entsteht auch erstmal ein Srollbalken den will ja wohl keiner haben, das könnte man wohl auch noch mittels iscroll lösen, wie es auch bei den Listenpopups ist lösen, aber dann würde auch keine vertikalen Slider mehr funktionieren.

        Ich weiß daher nicht ob das so eine tolle Idee ist.
        Nils

        aktuelle Bausteine:
        BusAufsicht - ServiceCheck - Pushover - HS-Insight

        Kommentar


          #5
          Stimmt - Idee nicht so toll mit Balken an der Seite ...
          Vielleicht dann doch zwei Seiten - wobei natürlich der Seitenwechsel via "Wegwischen" cooler wäre als der Druck auf einen Button :-)
          Ich hab' ja ne funktionierende Visu und kann daher weiter experimentieren - ist auch nötig, da ich den Scrollbalken trotz 100% und overflow-y nicht hinbekommen habe.
          Dummerweise krieg' ich im Browswer F12 viel Code angezeigt - nur nicht den von meiner custom.js - ist aber da und wird ausgeführt. Scheint was anderes noch nicht ganz zu stimmen.

          Hab' da noch ne andere "Komplikation" in meinen Versuchen: hab' zum Üben und reinfinden ins Thema mal ein XXMYSWITCH versucht: sieht so aus (das farbige Teil ;-): Switch sichtbar.JPG Erinnert etwas an Gira's neues Design - mir gefällt's aber ...
          Beim Drücken auf eine der drei Kacheln kommt jeweils ein Popup - funktioniert alles prima - bis auf eine "Kleinigkeit": nach dem Schließen des Popup ist mein schöner Switch dann weg. Sie dann so aus: Switch weg.JPG
          Beim nächsten Popup ist der Switch dann wieder da. Gleiches Wechselspiel passiert auch beim Betätigen des Switch selbst. Er funktioniert und führt die Funktion aus (Licht an/aus). Dann verschwindet auch er nach Ausführung. Kommt dann beim nächsten Pupup wieder.
          Das wäre der Code dazu - weitestgehend aus der xxapi2.js rauskopiert:
          Code:
          hs.functions.element_loader([
              "own/toggles.min.js",
              "own/toggles.css",
              "own/toggles-styles.css"
              ]
              );
          
          "use strict";
          xxAPI.functions.XXMYSWITCH = function ( oarg ) {
              debug(2,"XXMYSWITCH",oarg);
              if (oarg.item.action_id != 9) {
                  debug(1,"XXMYSWITCH needs Action 'Werteingabe'",oarg);
                  return;
              }
              oarg.item.text = "";    
              oarg.item.value = parseInt(oarg.args[1] || 0);
              if (oarg.item.xxapi.hasOwnProperty("myswitch")) {
                  oarg.item.xxapi.myswitch.toggle(oarg.item.value);
              } else {
                  oarg.item.click = false;
                  oarg.item.customcss = {
                      "background-color"  : "transparent",
                      "pointer-events"    : "auto",
                      "overflow"          : "initial"
                  }
              }
              if($.isEmptyObject(oarg.item.info)) {
                  debug(4,"XXMYSWITCH no item info " + oarg.item.uid,oarg);
                  oarg.item.item_callback = function() {
                      oarg.iscallback = true;
                      xxAPI.functions.XXMYSWITCH( oarg );
                  }
                  return;
              }
              if(!oarg.item.xxapi.hasOwnProperty("myswitch")) {
                  oarg.item.xxapi.myswitch_options = {
                      "width" : oarg.item.width,
                      "height": oarg.item.height,
                      "text"  : { on: "I", off: "O" },
                      "on"    : oarg.item.value
                  };
                  oarg.item.xxapi.myswitch = $("<div />", {
                      "class" : "toggle toggle-orange"
                  });
                  oarg.item.xxapi.myswitch.toggles(oarg.item.xxapi.myswitch_options);
                  oarg.item.xxapi.myswitch.on('toggle',function(e, active) {
                      oarg.item.value = oarg.item.info._val = active;
                      hs.functions.do_valset( oarg );
                  });
              }
              if(oarg.iscallback) {
                  oarg.item.object.html(oarg.item.xxapi.myswitch);
              } else {
                  oarg.item.html = oarg.item.xxapi.myswitch;
              }
          }
          Das mit der Farbe und dem Text ist noch nicht gut gelöst - sollte aus dem Gira Experten kommen - ist ja zum üben und ich bin Anfänger ...
          Geholt hab' ich mir den Code von simontabor.com/toggles/ falls sich jemand dafür interessiert. War und ist als kleine Aufgabenstellung gedacht, um ins Thema reinzukommen.
          Falls das jetzt aufändig wird, lass es - ist nicht wichtig. Wenn du auf einen Blick siehst, woran's liegt, wäre ein kleiner Hinweis sehr nett :-)

          Schöne Grüße
          Tom

          Kommentar


            #6
            Zitat von windy75 Beitrag anzeigen
            2) XXMODULCLICK funktioniert wohl nur mit statischem Text. Würde es nicht die Möglichkeiten drastisch erhöhen, wenn XXMODULCLICK mit dynamischen Textfeldern funktionieren würde? Kann natürlich nicht abschätzen, wie aufwändig das wäre.
            Also beim auf den Code schauen, finde ich das es eigentlich auch funktionieren sollte.
            Kannst du evtl mal das debugging anschalten(strg+shift+x), level 3. und mal sehen(F12 -> Konsole) was da ausgeführt wird.
            Nils

            aktuelle Bausteine:
            BusAufsicht - ServiceCheck - Pushover - HS-Insight

            Kommentar


              #7
              Hier die Daten vom Debugger - hoffe, das war das, was Du sehen wolltest:
              Code:
              [start] xxAPI² load
              xxapi2.js (Zeile 1502)
              [start] HTML5 Manifest active
              xxapi2.js (Zeile 1502)
              [start] load libraries
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/fastclick.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/xml2json.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.md5.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.simplemodal.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/position-calculator.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/iscroll.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.lazyload.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.nouislider.min.css
              xxapi2.js (Zeile 1502)
              [start] add [link] libs/jquery.nouislider.min.css
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.nouislider.pips.min.css
              xxapi2.js (Zeile 1502)
              [start] add [link] libs/jquery.nouislider.pips.min.css
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.nouislider.all.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/jquery.knob.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/xxapi.css
              xxapi2.js (Zeile 1502)
              [start] add [link] libs/xxapi.css
              xxapi2.js (Zeile 1502)
              [start] element_loader loading libs/theme.css
              xxapi2.js (Zeile 1502)
              [start] add [link] libs/theme.css
              xxapi2.js (Zeile 1502)
              [start] loaded [link] libs_jquery_nouislider_min_css: &lt;link id="libs_jquery_nouislider_min_css" rel="stylesheet" type="text/css" href="libs/jquery.nouislider.min.css"&gt;
              xxapi2.js (Zeile 1504)
              [start] loaded [link] libs_jquery_nouislider_pips_min_css: &lt;link id="libs_jquery_nouislider_pips_min_css" rel="stylesheet" type="text/css" href="libs/jquery.nouislider.pips.min.css"&gt;
              xxapi2.js (Zeile 1504)
              [start] loaded [link] libs_xxapi_css: &lt;link id="libs_xxapi_css" rel="stylesheet" type="text/css" href="libs/xxapi.css"&gt;
              xxapi2.js (Zeile 1504)
              [start] loaded [link] libs_theme_css: &lt;link id="libs_theme_css" rel="stylesheet" type="text/css" href="libs/theme.css"&gt;
              xxapi2.js (Zeile 1504)
              element_loader callback is called
              xxapi2.js (Zeile 1502)
              [start] fix base
              xxapi2.js (Zeile 1502)
              [start] fix base done
              xxapi2.js (Zeile 1502)
              [start] element_loader loading custom.css
              xxapi2.js (Zeile 1502)
              [start] add [link] custom.css
              xxapi2.js (Zeile 1502)
              [start] element_loader loading custom.js
              xxapi2.js (Zeile 1502)
              [start] loaded [link] custom_css: &lt;link id="custom_css" rel="stylesheet" type="text/css" href="custom.css"&gt;
              xxapi2.js (Zeile 1504)
              [start] element_loader loading own/toggles.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading own/toggles.css
              xxapi2.js (Zeile 1502)
              [start] add [link] own/toggles.css
              xxapi2.js (Zeile 1502)
              [start] element_loader loading own/toggles-styles.css
              xxapi2.js (Zeile 1502)
              [start] add [link] own/toggles-styles.css
              xxapi2.js (Zeile 1502)
              [start] element_loader loading own/jquery.easytabs.min.js
              xxapi2.js (Zeile 1502)
              [start] element_loader loading own/myeasytabs.css
              xxapi2.js (Zeile 1502)
              [start] add [link] own/myeasytabs.css
              xxapi2.js (Zeile 1502)
              element_loader callback is called
              xxapi2.js (Zeile 1502)
              [start] hsclient
              xxapi2.js (Zeile 1502)
              [start] loaded [link] own_toggles_css: &lt;link id="own_toggles_css" rel="stylesheet" type="text/css" href="own/toggles.css"&gt;
              xxapi2.js (Zeile 1504)
              [start] loaded [link] own_toggles-styles_css: &lt;link id="own_toggles-styles_css" rel="stylesheet" type="text/css" href="own/toggles-styles.css"&gt;
              xxapi2.js (Zeile 1504)
              [start] loaded [link] own_myeasytabs_css: &lt;link id="own_myeasytabs_css" rel="stylesheet" type="text/css" href="own/myeasytabs.css"&gt;
              xxapi2.js (Zeile 1504)
              element_loader callback is called
              xxapi2.js (Zeile 1502)
              Session_width: undefined/1780
              xxapi2.js (Zeile 1502)
              xxAPI Check: (VISU_PAGE_191_TXT_1) XXSCRIPT*: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXSCRIPT
              xxapi2.js (Zeile 1502)
              xxAPI Check: (VISU_PAGE_191_TXT_2) XXMARK*FL-FKT-EG-AZ: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMARK: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (VISU_PAGE_191_TXT_3) XXMARK*FL-Raum: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMARK: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (VISU_PAGE_191_TXT_4) XXMARK*FL-Funktionen: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMARK: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (VISU_PAGE_192_TXT_5) XXMODUL*LINKS: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMODUL: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (VISU_PAGE_192_TXT_10) XXMODUL*RECHTS: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMODUL: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              Session_width: 602/1920
              xxapi2.js (Zeile 1502)
              Session_width: 1270/1920
              xxapi2.js (Zeile 1502)
              xxAPI Check: (MODUL_RECHTS_PAGE_194_ICO_1) XXPAGE*: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXPAGE: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXPAGE inside Modul ignored: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              discard item MODUL_LINKS_PAGE_193_ICO_1 outside visu: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (MODUL_LINKS_PAGE_193_TXT_2) XXSCROLLMODUL*FUNKTIONEN: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXSCROLLMODUL: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (MODUL_LINKS_PAGE_193_TXT_6) XXMODULCLICK*FUNKTIONEN*FL-Funktion: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMODULCLICK: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              Session_width: 602/1920
              xxapi2.js (Zeile 1502)
              discard item MODUL_FUNKTIONEN_PAGE_200_ICO_25 outside visu: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              xxAPI Check: (MODUL_FUNKTIONEN_PAGE_200_TXT_33) XXMODULCLICK**FUNKTIONEN*FL-Raum: Object { json={...},  session={...},  page={...},  mehr...}
              xxapi2.js (Zeile 1504)
              XXMODULCLICK: Object { json={...},  session={...},  page={...},  mehr...}
              Hier nochmal der untere Ausschnitt als Screenshot - vielleicht besser zu lesen:


              Die ID des dyn. Textelementes ist MODUL_LINKS_PAGE_193_TXT_6
              Der Befehl im Textfeld lautet XXMODULCLICK*FUNKTIONEN*dyn.Zielseite
              Im HTML-Code wird das aufgelöst zu <span>FUNKTIONEN</span>
              Daher auch dieser Magenta-Text "FUNKTIONEN" - siehe mein Kachel-Screenshot weiter oben. Er interpretiert also dieses Kommando XXMODULCLICK schon, nur eben falsch ;-)

              Kommentar


                #8
                Falls das - außer mir Vollpfosten - noch jemand nicht bemerkt haben sollte: XXMODULCLICK funktioniert prächtig mit dyn. Textelementen - nur dann natürlich nicht, wenn man die Funktion nicht korrekt anwendet (es fehlte das 2. "Sternchen") ... Mea culpa, Nils ...

                Mit dem Scrollen bin ich noch am rumprobieren - mein oben beschriebener Ansatz kann nicht funktionieren, weil der HS im HTML noch "Zwischen-div's" einbaut - und scrollen eines einzelnen Child-Elementes ist natürlich schwierig ...

                Sorry nochmal!
                Tom

                Kommentar


                  #9
                  Hallo allerseits!

                  Nachdem ich jetzt endlich auch mal den Umstieg auf xxapi2 gewagt habe und echt begeistert von den Funktionen bin, versuche ich nun auch gerade, ein scrollbares Modul umzusetzen (vor allem auf smartphone für meine Zwecke sehr sinnvoll) Was bei mir funktioniert hat:

                  dem ersten div-element innerhalb des moduls per css "overflow-y:scroll" zuzuweisen.

                  Leider funktioniert das aber auf ios-Geräten nicht, weil ja das 1-Finger-Panning deaktiviert ist. Rubberbanding nervt mich zwar auch, aber damit könnte ich leben, wenn ich dafür Modulpositionen scrollen könnte. Das hier ist ein netter Ansatz, den ich die Tage mal testen möchte:

                  http://stackoverflow.com/questions/1...screen-web-app

                  was sich mir jetzt aber noch nicht ganz erschließt ist der Zusammenhang mit den vertikalen Slidern... Die funktionieren generell nicht in scrollbaren Bereichen auf ios?

                  Denn auf der Examples-Seite des noui-sliders lässt sich auf meinem iphone trotz Scrollbarkeit alles super bedienen. Ich wollte da nur gerne nochmal nachfragen, bevor ich am code herumstümpere um meine gewünschte Optik umzusetzen und mir dabei dann die Funktionalität zerschieße.

                  Gruß, Johannes

                  Kommentar


                    #10
                    Hallo darf man fragen wie du das mit dem Switch genau angegangen bis? Versuch schon seit Wochen das hinzubekommen.
                    Läuft das jetzt bei dir ohne das der Switch verschwindet?


                    Lg Andy

                    Kommentar


                      #11
                      Hallo Andy,
                      der Switsch läuft (fast) prima inzwischen - nach einem Update von Chrome wird er jetzt aber etwas "verhunzt" (tut aber) - habe das aber noch nicht im Detail analysiert - wenig Zeit im Moment und ich muss mich da auch erst wieder reindenken ...
                      Auch die Farbe des Switches zieht er sich noch nicht aus dem HS-Experten - wird hart codiert (also auch noch nicht optimal gelöst).
                      Hier nochmal der Code - ich meine, gegenüber oben (04.09.2016) hab' ich nur eine Kleinigkeit korrigieren müssen, damit es tut.

                      Code:
                      /*
                          * XXMYMSWITCH - simontabor.com/toggles/
                      */
                      
                      xxAPI.functions.XXMYSWITCH = function ( oarg ) {
                          debug(2,"XXMYSWITCH",oarg);
                          if (oarg.item.action_id != 9) {
                              debug(1,"XXMYSWITCH needs Action 'Werteingabe'",oarg);
                              return;
                          }
                          oarg.item.text = "";    
                          oarg.item.value = parseInt(oarg.args[1] || 0);
                          if (oarg.item.xxapi.hasOwnProperty("myswitch")) {
                              debug(3, "myswitch has own Property", oarg);
                              oarg.item.xxapi.myswitch.toggles({
                                  "text":   { on: "I", off: "O" },
                                  "on":     oarg.item.value
                              });
                          } else {
                              oarg.item.click = false;
                              oarg.item.customcss = {
                                  "background-color"  : "transparent",
                                  "pointer-events"    : "auto",
                                  "overflow"          : "initial"
                              }
                          }
                      
                          if($.isEmptyObject(oarg.item.info)) {
                              debug(4,"XXMYSWITCH no item info " + oarg.item.uid,oarg);
                              oarg.item.item_callback = function() {
                                  oarg.iscallback = true;
                                  xxAPI.functions.XXMYSWITCH( oarg );
                              }
                              return;
                          }
                      
                          if (!oarg.item.xxapi.hasOwnProperty("myswitch")) {
                              debug(3, "myswitch has not own Property", oarg);
                              oarg.item.xxapi.myswitch_options = {
                                  "width" : oarg.item.width,
                                  "height": oarg.item.height,
                                  "text"  : { on: "I", off: "O" },
                                  "on"    : oarg.item.value
                              };
                      
                              var _text2 = oarg.item.info._txt2 || "";
                              var _color;
                              if (_text2.match(/^XXOPTIONS\*/)) {
                                  _color = _text2.substring(10);
                              };
                      
                              switch (_color) {
                                  case "green": oarg.item.xxapi.myswitch = $("&lt;div /&gt;", {
                                      "class": "toggle toggle-green"
                                  }); break;
                                  default: oarg.item.xxapi.myswitch = $("&lt;div /&gt;", {
                                           "class" : "toggle toggle-orange"
                                  });
                              }
                      
                              oarg.item.xxapi.myswitch.toggles(oarg.item.xxapi.myswitch_options);
                      
                              oarg.item.xxapi.myswitch.on('toggle',function(e, active) {
                                  oarg.item.value = oarg.item.info._val = active;
                                  hs.functions.do_valset( oarg );
                              });
                          }
                      
                          if(oarg.iscallback) {
                              oarg.item.object.html(oarg.item.xxapi.myswitch);
                          } else {
                              oarg.item.html = oarg.item.xxapi.myswitch;
                          }
                      }
                      Und die Farben (brauche orange und grün) habe ich wie gesagt hart codiert im CSS-File und natürlich oben im Code:

                      Code:
                      .toggle-orange .toggle-slide,
                      .toggle-green .toggle-slide {
                        border-radius: 9999px;
                        box-shadow: 0 0 0 1px #999;
                      }
                      .toggle-orange .toggle-on,
                      .toggle-orange .toggle-off,
                      .toggle-green .toggle-on,
                      .toggle-green .toggle-off {
                        font-size: 24px;
                        font-weight: bold;
                        font-family: Calibri;
                      }
                      .toggle-orange .toggle-on,
                      .toggle-orange .toggle-select .toggle-inner .active {
                        background: #f69300;
                        text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
                        color: #ffffff;
                      }
                      .toggle-green .toggle-on,
                      .toggle-green .toggle-select .toggle-inner .active {
                        background: #a5ca00;
                        text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
                        color: #ffffff;
                      }
                      .toggle-orange .toggle-off,
                      .toggle-orange .toggle-select .toggle-on,
                      .toggle-green .toggle-off,
                      .toggle-green .toggle-select .toggle-on {
                        color: #a0a0a0;
                        text-shadow: 0 1px rgba(255, 255, 255, 0.2);
                        background: #d2d2d2;
                      }
                      .toggle-orange .toggle-blob,
                      .toggle-green .toggle-blob {
                        border-radius: 50px;
                        background: #f5f5f5;
                        box-shadow: 1px 1px 2px #888;
                      }
                      Farbe orange macht er standardmäßig - grün mit XXOPTIONS*green

                      Falls noch Fragen sind, gerne wieder melden - manchmal dauert's hat ein wenig, bis ich dann reagiere - Zeit sollte man halt mehr haben (stimmt's, Nils ...).
                      Falls Du das weiter entwickelt bekommst (Farben aus dem Experten ziehen) bzw. rausfindest, warum die Grafik seit neuestem so verhunzt wird, gerne auch posten.

                      Viele Erfolg und viele Grüße
                      Tom

                      Kommentar


                        #12
                        Hallo Tom Danke für die Antwort.
                        Zeit sollte man wirklich mehr haben...
                        Habe das ganze nochmal getestet. Mit Verhunzt meinst du in ungefähr so?

                        Unbenannt.png

                        Gibt es dafür eine Lösung?


                        LG Andy

                        Kommentar


                          #13
                          ... naja - ganz so schlimm sieht das bei mir nicht aus - aber ich vermute schon, dass die Ursache dieselbe ist (die Bildchen ähneln sich schon :-) ) ...
                          Bei mir sieht das zunächst so aus (also beim Starten).
                          SwitchOK.JPG
                          Wird der Schalter betätigt, dann so:
                          SwitchNOK.JPGSwitchNOK2.JPG
                          Da dieser Switch zunächst Monate-lang einwandfrei funktioniert hat und erst nach einem Update von Chrome mit diesen Spielchen angefangen hat, vermute ich schon, dass das an dem Code des toggles liegt. Irgendwas interpretiert der Browser nun anders als zuvor. Müsste sich der Autor drum kümmern - eigentlich ...
                          Interessanterweise funktioniert das ganze aber mit Firefox. Mit Firefox habe ich nach einem Update dafür ein anderes Problem: im Vollbild-Modus (F11) bleiben die Scrollbalken sichtbar - auch das hatte zuvor einwandfrei funktioniert (also schönes Vollbild ohne störende (und unnötige) Scrollbalken.
                          Versuch's mal mit Firefox - wäre interessant, ob das bei dir dann auch funktioniert.
                          Wenn ich eine Lösung finden sollte, würde ich das hier reinstellen - komme aber im Moment einfach nicht dazu ...
                          Viele Grüße
                          Tom

                          Kommentar


                            #14
                            Hy Tom. Habe das gerade nochmal mit dem Firefox probiert. Leider das selbe Ergebniss.


                            Den Switch hast du über ein Text element mit (XXMYSWITCH*) geaddet?


                            Mfg Andy

                            Kommentar


                              #15
                              Hallo Andy,
                              schon merkwürdig, dass das mit dem Firefox auch nicht tut ... Frage: die xxAPI2 tun aber grundsätzlich schon? Nur das mit dem Switch (Einbinden eigener Funktionen) macht Probleme? Und Du denkst dran, dass auch der Browser-Cache gelöscht werden muss, wenn Du was am xxAPI-Code geändert hast und den auf den HS hochlädst.
                              Zum XXMYSWITCH: das ist ein dynamisches Text-Element (analog der in der xxAPI vorhandenen Elemente knob und slider):
                              DynText.JPG
                              Der "Link" zur Funktion im Code läuft dann über "Optionaler Präfix".
                              Die Kopplung mit den GAs läuft dann analog knob/slider über die Textsteuerung/Werteingabe:
                              DynText2.JPGDynText3.JPG
                              Textsteuerung: Zustand beim Anzeigen / Werteingabe: neuer Zustand beim Schalten.

                              Ich hatte mich seinerzeit sehr eng an den von Nils zur Verfügung gestellten Templates "Slider" und "Knob" orientiert und daraus eben "meinen" Switch" gebaut.Tun bei Dir die Slider bzw. der Knob?

                              Viele Grüße und schöne Feiertage und viel Erfolg bei der Fehlersuche!
                              Tom

                              Kommentar

                              Lädt...
                              X