Pit: Buttontext mittig zentrieren

Hallo Forum,

in meinem fiddle-Beispiel werden die Buttontexte + und - , die neben dem Zeitslider stehen (nachdem man ins Datumfield geklcikt hat), mittig dargestellt.

Leider werden sie in meinem "Produktivscript" links-oben-bündig dargestellt, obwohl ich keinerlei css-Einfluss auf die Buttons oder Jquery UI genommen habe.

  1. Frage: Wie kann das überhaupt sein, dass es im fiddle und im Produktivscript unterschiedlich dargestellt wird? Das würde doch definitiv für Einfluss meiner css-Dateien sprechen?

  2. Frage: Wie kann ich das Plus und Minus im Produktivscript zwingend mittig darstellen ohne gleich Einfluss auf alle anderen UI-Buttons zu nehmen?

Pit

  1. Hallo Pit,

    1. Frage: Wie kann das überhaupt sein, dass es im fiddle und im Produktivscript unterschiedlich dargestellt wird?

    Wie kann es sein, dass es bei dir im Fiddle überhaupt angezeigt wird? Welcher Browser?

    Gruss
    Henry

    1. Hallo Henry,

      Wie kann es sein, dass es bei dir im Fiddle überhaupt angezeigt wird? Welcher Browser?

      FF 58.0.1 (64-Bit), ich rufe den fiddle über http auf.

      Pit

      1. Hallo Pit,

        FF 58.0.1 (64-Bit), ich rufe den fiddle über http auf.

        "TypeError: $(...).datetimepicker is not a function"

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Hallo Matthias,

          "TypeError: $(...).datetimepicker is not a function"

          Bei mir läufts einwandfrei, jedenfalls im FF, im Chrome nicht. Was ist das denn schon wieder? 😕

          Pit

          1. Hallo Pit,

            Bei mir läufts einwandfrei, jedenfalls im FF, im Chrome nicht. Was ist das denn schon wieder? 😕

            Bei mir nicht im FF. Warum hast du eigentlich immer noch nicht das Script selbst eingebunden?

            Btw. @alle warum zeigt FF bei http eigentlich nicht die komplette URL an. Empfinde ich schon als ziemlichen Informationsverlust.

            Gruss
            Henry

            1. Hallo Henry,

              Bei mir nicht im FF. Warum hast du eigentlich immer noch nicht das Script selbst eingebunden?

              Das habe ich. Da sind inzwischen 4 externe Ressourcen eingebunden.

              Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.

              Pit

              1. Hallo Pit,

                Da sind inzwischen 4 externe Ressourcen eingebunden.

                und was ist mit denen?

                <link rel="stylesheet" type="text/css" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
                   
                <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
                      
                <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
                      
                <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js"></script>
                    
                  
                

                Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.

                Doch, tut es. Es liegt an der Bedienung, die allerdings(subjektiv betrachtet) nicht jedem (bin einer davon) liegt. Objektiv betrachtet, ist es aber nicht schlecht.

                Gruss
                Henry

                1. Hallo Henry,

                  und was ist mit denen?

                  Was genau meinst du? Bei mir werden sie anscheinend eingebunden.

                  <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
                        
                  

                  Oh, ich sehe gerade, die 3. Datei ist unnötig, die kann raus...

                  Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.

                  Doch, tut es. Es liegt an der Bedienung, die allerdings(subjektiv betrachtet) nicht jedem (bin einer davon) liegt. Objektiv betrachtet, ist es aber nicht schlecht.

                  Ok, hilf mir bitte mal, was mache ich denn da falsch?

                  Pit

                  1. Hallo Pit,

                    Hallo Henry,

                    <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
                          
                    

                    Wie schon geschrieben, wenn du lokal Dateien bei Fiddle einbinden kannst (weiss nicht ob das geht, dann zb. sinnbildlich so <script src=".my_xy_fiddlepfad/jquery-ui-timepicker-addon-i18n.min.js"></script>. Wenn das nicht geht, dann den Inhalt daraus direkt ins Fiddle als Text. <script>/* hier ist der js Inhalt von trentrichardson usw…*/ </script>

                    Ich glaube inzwischen echt, dass fiddle nicht ganz sauber arbeitet.

                    Ok, hilf mir bitte mal, was mache ich denn da falsch?

                    Bei Fiddle? Mal abgesehen von den Einbindungen, nichts, soweit ich das sehe, aber ich habe mit Fiddle auch keine Erfahrung, so sollte das besser jemand beurteilen der diese dort hat. Aber was ich bisher sehe, sind nur Browsereinschränkungen dein Problem und nicht Fiddle, daher erst mal den Code von Fremdverweisen (http + https) säubern(alles selbst einbinden) und dann mal sehen was passiert.

                    Gruss
                    Henry

                    1. Hallo Henry,

                      Aber was ich bisher sehe, sind nur Browsereinschränkungen dein Problem und nicht Fiddle, daher erst mal den Code von Fremdverweisen (http + https) säubern(alles selbst einbinden) und dann mal sehen was passiert.

                      Ok, dann schau mal bitte rein.

                      Pit

                      1. @@Pit

                        Ok, dann schau mal bitte rein.

                        Ich finde nicht heraus, wie das Ding funktionieren soll.

                        Ich fokussiere das Eingabefeld und ein Datepicker erscheint. Ich drücke die Tab-Taste und er ist wieder weg. OK, ich bin ja beim nächsten fokussierbaren Element. Also mit Shift-Tab wieder zurück.

                        Datepicker ist wieder da. Pfeil-Tasten tun nichts. Leertaste gibt ein Leerzeichen ins Eingabefeld ein. Wie komme ich in diesen Datepicker? Gar nicht?

                        Ich würde sagen, das Ding funktioniert nicht. Das Ding ist kaputt.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hallo Gunnar,

                          Ich finde nicht heraus, wie das Ding funktionieren soll.

                          Ich fokussiere das Eingabefeld und ein Datepicker erscheint. Ich drücke die Tab-Taste und er ist wieder weg. OK, ich bin ja beim nächsten fokussierbaren Elemente. Also mit Shift-Tab wieder zurück.

                          Datepicker ist wieder da. Pfeil-Tasten tun nichts. Leertaste gibt ein Leerzeichen ins Eingabefeld ein. Wie komme ich in diesen Datepicker? Gar nicht?

                          Ich würde sagen, das Ding funktioniert nicht. Das Ding ist kaputt.

                          Ich schätze Deine Hilfe hier im Forum sehr.

                          Deshalb bin ich Dir auch gar nicht böse, wenn Du immer und immer wieder auf (mitunter auch) provokante Weise die Unart monierst, dass es Dinge gibt, die nicht tastaturbedienbar sind. Gäbe es eine Alternative, die sowohl Maus, als auch Touch- und Tastaturbedienbar wäre (natürlich bei gegebenen restlichen Ansprüchen), würde ich sie nehmen.

                          So muß ich gewissermaßen "eine kröte schlucken" und ich verzichte dann auf die Tastaturbedienbarkeit, bis ich eine bessere Alternative gefunden habe.

                          Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage. Schade, weil ansonsten gefiehl mir diese Alternative sehr gut, sogar viel besser als der Datetimepicker, den ich jetzt nehme.

                          Pit

                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                          1. Hallo Pit,

                            Ok, dann schau mal bitte rein.

                            Leider nichts zu sehen wird nichts geladen, zumindest bei mir so.

                            Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage. Schade, weil ansonsten gefiehl mir diese Alternative sehr gut, sogar viel besser als der Datetimepicker, den ich jetzt nehme.

                            Und meinen Nachtrag (geht auch Beides) hast du gelesen?

                            Gruss
                            Henry

                            1. Hallo Henry,

                              die Nachträge erst eben gelesen, aber dafür inzwischen meine Lösung mal auf dem Tablet ausprobiert und ich fands horror… wirklich nicht nutzbar, obwohl + und - Buttons neben den Slidern waren.

                              Nun habe ich mal Gunnars html5 Lösung ausprobiert. Halt 2 Felder, eines für Datum (inkl. Kalender) und das Timefeld daneben. Auf dem Tablet ein Traum... im FF schlechter als meine vorherige Lösung.

                              Ich überlege gerade, ob ich mit dem Manko im FF bei dieser Lösung leben soll oder ob ich eine Weiche baue, die nach mobiler Anwendung schaut oder nach Desktop…

                              Das pickadate hatte ich auch schon gefunden, aber ich hätte eben gerne, dass der User aus dem Kalender aussuchen darf und für die Zeiteinstellung etwas touchbedienbares hat.

                              Nebenfrage: Kann man eigentlich input type date so einstellen, dass er beim selektieren eines datums Selbiges gleich abfeuert?

                              pit

                              1. Hallo Pit,

                                Nebenfrage: Kann man eigentlich input type date so einstellen, dass er beim selektieren eines datums Selbiges gleich abfeuert?

                                Du meinst eine Vorauswahl? Klar, wie immer mit value, allerdings das Format muss stimmen.

                                <input type="date" name="americaconquerer" value="1492-10-12">

                                Gruss
                                Henry

                                1. Hallo Henry,

                                  Du meinst eine Vorauswahl? Klar, wie immer mit value, allerdings das Format muss stimmen.

                                  Nein, das meinte ich nicht. Ich möchte, dass bei der Auswahl eines datums gleich das Formular abgesendet wird, ohne dass der User einen Button klicken muß.

                                  Pit

                                  1. Hallo Pit,

                                    Ich möchte, dass bei der Auswahl eines datums gleich das Formular abgesendet wird, ohne dass der User einen Button klicken muß.

                                    Das ist keine gute Idee, weil es nicht der Nutzererfahrung entspricht.

                                    Bis demnächst
                                    Matthias

                                    --
                                    Rosen sind rot.
                                    1. Hallo Matthias,

                                      Das ist keine gute Idee, weil es nicht der Nutzererfahrung entspricht.

                                      In diesem Fall schon, weil der User hier über einen Vorschaukalender einen Sprung im Hauptkalender vollziehen können soll. Da wäre das Klicken eines zusätzlichen Submitbuttons eher umständlich und ungewohnt.

                                      pit

                                  2. @@Pit

                                    Ich möchte, dass bei der Auswahl eines datums gleich das Formular abgesendet wird, ohne dass der User einen Button klicken muß.

                                    Dann musst du ja nur auf das richtige Event lauschen und bei dessen Eintreten das Formular abschicken. Nur, welches wäre das richtige Event?

                                    Ich hab da mal eine Spielwiese erstellt. Console an und durchgespielt! Mit Maus und auch mit Tastatur …

                                    Oh Schreck! Sieht wohl so aus, als würde es das richtige Event nicht geben.

                                    LLAP 🖖

                                    --
                                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                    1. Hi Gunnar,

                                      Oh Schreck! Sieht wohl so aus, als würde es das richtige Event nicht geben.

                                      Und nun?

                                      Für mich als mausnutzer sehen input date und change date gleichermaßen gut aus.

                                      Was stört Dich an denen?

                                      Pit

                                      1. @@Pit

                                        Hi Gunnar,

                                        Oh Schreck! Sieht wohl so aus, als würde es das richtige Event nicht geben.

                                        Und nun?

                                        Für mich als mausnutzer sehen input date und change date gleichermaßen gut aus.

                                        Und ich sag noch „und auch mit Tastatur“.

                                        Was stört Dich an denen?

                                        Dass die Events bei Tastaturbedienung öfter feuern als dir lieb sein dürfte. Du willst sicher nicht ständig das Formular neu abschicken.

                                        Vielleicht hilft es, sich einen Polyfill zu :focus-visible/:-moz-focusring anzusehen; da muss ja auch irgendwie Maus (o.ä. Pointer) und Tastatur unterschieden werden.

                                        LLAP 🖖

                                        --
                                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                        1. Hallo,

                                          Dass die Events bei Tastaturbedienung öfter feuern als dir lieb sein dürfte. Du willst sicher nicht ständig das Formular neu abschicken.

                                          Kann man das nicht mit einem cleveren Timeout o.Ä. abfangen?

                                          Gruß
                                          Kalk

                          2. @@Pit

                            Gäbe es eine Alternative, die sowohl Maus, als auch Touch- und Tastaturbedienbar wäre (natürlich bei gegebenen restlichen Ansprüchen), würde ich sie nehmen.

                            Letztens hatte Henry einen Datepicker vorgestellt, zu dem ich auch was geschrieben hatte.

                            Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage.

                            Dass <input type="date"> in jedem Browser funktioniert, schrieb ich auch erst unlängst.

                            LLAP 🖖

                            --
                            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            1. Hi Gunnar,

                              Deine Alternative von gestern (input type date) kommt wegen Browserinkompatibilität nicht in Frage.

                              Dass <input type="date"> in jedem Browser funktioniert, schrieb ich auch erst unlängst.

                              Um <input type="date"> ging es mir viel weniger als um date-local, und das funktioniert eben nicht in jedem Browser. Aber ok, vielleicht wird das irgendwann so sein.

                              Ich habe mich jetzt entschieden, Deinem Rat zu folgen und nutze date + time in kombination. Zumindest funktioniert das zuverlässig auch auf dem Smartphone. Auf dem desktop gefällt es mir etwas weniger gut, egal welcher Browser, aber was willste machen…

                              Pit

                            2. Hi Gunnar,

                              Dass <input type="date"> in jedem Browser funktioniert, schrieb ich auch erst unlängst.

                              Weißt Du, was ungünstig ist?

                              input type="time" gibt kein "empty" weiter 😟 Es gibt 00:00 weiter, aber dann weiß ich nicht, ob der User 00:00 eingegeben hat oder das Feld gar nicht ausgefüllt hat.

                              Fällt Dir hierzu ein Workarround ein?

                              Pit

                              1. hallo

                                Fällt Dir hierzu ein Workarround ein?

                                Du willst also wissen, ob ein User ein Input auch bedient hat. Das ist gegeben bei onblur.

                                1. hallo

                                  Fällt Dir hierzu ein Workarround ein?

                                  Du willst also wissen, ob ein User ein Input auch bedient hat. Das ist gegeben bei onblur.

                                  Ist das wirklich so? Was ist denn, wenn der User das Feld ausfüllt und anschließend das Eingetragene wieder herauslöscht?

                                  pit

                                  1. Hallo Pit,

                                    Du willst also wissen, ob ein User ein Input auch bedient hat.
                                    Das ist gegeben bei onblur.

                                    Ist das wirklich so?

                                    Ja.

                                    Was ist denn, wenn der User das Feld ausfüllt und anschließend das Eingetragene wieder herauslöscht?

                                    Dann auch.

                                    Du erinnerst dich an die Benutzererfahrung? 😉

                                    Bis demnächst
                                    Matthias

                                    --
                                    Rosen sind rot.
                                    1. Hi,

                                      Du erinnerst dich an die Benutzererfahrung? 😉

                                      Nein? Was hats damit auf sich?

                                      Davon ab: ich hab Quatsch erzählt, "time" gibt wohl "empty" weiter, es braucht doch keinen Workarround, sorry.

                                      Pit

                                  2. hallo

                                    Was ist denn, wenn der User das Feld ausfüllt und anschließend das Eingetragene wieder herauslöscht?

                                    Auch dann gilt: User hat input aktiv bearbeitet. Du willst diese Information auswerten um Defaultwerte von abgesegneten Werten zu unterscheiden.

                                2. @@beatovich

                                  Du willst also wissen, ob ein User ein Input auch bedient hat. Das ist gegeben bei onblur.

                                  Nicht wirklich. Das blur-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.

                                  LLAP 🖖

                                  --
                                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                  1. hallo

                                    Nicht wirklich. Das blur-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.

                                    Die akzeptanz eines Vorgabewertes kann durchaus als Bearbeitung aufgefasst werden.

                                    1. @@beatovich

                                      Nicht wirklich. Das blur-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.

                                      Die akzeptanz eines Vorgabewertes kann durchaus als Bearbeitung aufgefasst werden.

                                      Ich lande aus Versehen schon bei Eingabefeld X, da wollte ich noch gar nicht hin. Ich gehe also einen Schritt zurück, wo ich zunächst erstmal hin wollte. Mein Zurückgehen wird als Bearbeitung von Eingabefeld X aufgefasst und das Formular abgeschickt. Ernsthaft jetzt?

                                      LLAP 🖖

                                      --
                                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                      1. Nicht wirklich. Das blur-Event feuert, wenn ein vorher fokussiertes Element den Fokus verliert. Dass heißt nicht, dass in einem Eingabefeld eine Eingabe stattgefunden hätte, es also bedient worden wäre.

                                        Die akzeptanz eines Vorgabewertes kann durchaus als Bearbeitung aufgefasst werden.

                                        Ich lande aus Versehen schon bei Eingabefeld X, da wollte ich noch gar nicht hin. Ich gehe also einen Schritt zurück, wo ich zunächst erstmal hin wollte. Mein Zurückgehen wird als Bearbeitung von Eingabefeld X aufgefasst und das Formular abgeschickt. Ernsthaft jetzt?

                                        Ersthaft: Du kannst auch aus Versehen ein Formular absenden.

            2. Hallo Henry,

              Btw. @alle warum zeigt FF bei http eigentlich nicht die komplette URL an. Empfinde ich schon als ziemlichen Informationsverlust.

              Ist zwar doof, kannst du aber wieder einschalten.

              --> about:config

              --> trim

              --> browser.urlbar.trimURLs auf false setzen

              Pit

              1. Hallo Pit,

                --> browser.urlbar.trimURLs auf false setzen

                dass das nicht der Standard ist… Aber funktioniert, danke.

                Gruss
                Henry

          2. Kein Aprilscherz, bei mir läufts. Aber eben mit den im 1.Post beschriebenen Einschränkungen.

            Fiddle

            Produktivscript

            Pit

  2. Hallo Pit,

    Wie kann ich das Plus und Minus im Produktivscript zwingend mittig darstellen ohne gleich Einfluss auf alle anderen UI-Buttons zu nehmen?

    Schau dir mit den Entwicklertools an, welche Eigenschaften verwendet werden.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Hallo Matthias,

      Wie kann ich das Plus und Minus im Produktivscript zwingend mittig darstellen ohne gleich Einfluss auf alle anderen UI-Buttons zu nehmen?

      Schau dir mit den Entwicklertools an, welche Eigenschaften verwendet werden.

      Da habe ich bereits reingeschaut, aber ich finde die Stelle nicht, an der ich eingreifen könnte. Und bei einem meiner Versuche ist es mir dann gelungen, über

      .ui-icon
      {
          position: relative !important;
          margin: 0px !important;
          padding: 0px !important;
          height: 100% !important; 
          width: 100% !important;
          top: 0px !important;
          left: 0px !important;
      }
      

      das Plus und Minus einigermaßen mittig zu setzen, aber eben nur einigermaßen. Und zudem waren auch viele andere buttons danach nicht mehr sauber dargestellt.

      Pit

      1. Hallo Pit,

        Vielleicht solltes du dann doch mal die Produktivseite zeigen. Du kannst auch bei bplaced.net schnell und unkompliziert eine erstellen.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.