Button für ein Popup zur Zeitanzeige verschiedener Städte in verschiedenen Zeitzonen

  • Ich gebe Dir vollkommen recht, es liegt einzig und alleine an einer sinnvollen Aufteilung.

    Was aber JavaScript angeht, wenn es nicht funktioniert, liegt es fast immer nicht am

    eingebundenen CSS, zumal sich das ja auch ganz einfach testen lässt.

    Einfach rausnehmen oder deaktivieren.

    Und was die Vorbereitung angeht, ich finde, es ist auch nicht komplizierter als die Vorbereitung zur Benutzung von CSS.

    Ok, um JavaScript nutzen zu können, muss man diese Schritte ja auch machen und

    dann kommt das andere Gedöhns auch noch dazu.

    OK, der aufwand ist doch etwas mehr, geb' mich geschlagen, hast ja recht. :D


    Um nochmals auf das Thema zu kommen, ich habe ja das JavaScript für Datums- & Zeitanzeige am Laufen.

    Richtig toll fände ich es, wenn beim "hovern" sich dann ein "tooltip" öffnen täte, wo diverse Uhrzeiten

    anderer zuvor ausgewählter Orte anderer Zeitzonen angezeigt werden würden.

    Ob mir bei diesem Vorhaben jemand helfen könnte?

    Ich finde leider keinen Ansatz um den "tootip" zu missbrauchen,

    vielleicht hänge ich aber gerade auch einem falschen Ansatz hinterher.

    Mit <3lichem Gruß

    Mira

  • :/

    Ich brauche eine eindeutige ID für die von mir erwähnte Anzeige.

    In dem Skript ist ja gar keine!

    Dann müsste CSS-Code rein, der festlegt wie das Popup aussehen soll und das es anfänglich ausgeblendet sein soll.

    Das sollte irgendwie mit display: none; oder visibility: hidden; umzusetzen sein.

    Und in das Skript muss dann noch Code, um auf das Hover-Ereignis zuzugreifen und das Menü bei Bedarf anzuzeigen.

    Einen Codeschnipsel dafür habe ich im Netz gefunden!

    Könnte so aussehen:

    Nur, wie setze ich das mit der ID um? :/

    HA!

    Habe mich geirrt, hat doch eine ID :!:

    #titlebar-clock-display

    Mit <3lichem Gruß

    Mira

  • Funktioniert das im Script nicht? Da ich keine Scripts nutze, kann ich es nicht testen. Über die Konsole funktioniert das zumindest, das wird im DOM des Browsers eingefügt.

    Um ehrlich zu sein, habe ich das noch nie so ausprobiert (was ich aber nachholen werde). So ist es dann ein direktes Kindobjekt des Content-Bereichs, also Teil der anzuzeigenden Webseite, Was zwar nicht meinem Verständnis eines echten Dialogfensters entspricht, aber vielleicht funktioniert das ja auch so, dass man es global für einen Einstellungsdialog oder Meldungsbox verwenden kann. Das würde einem natürlich sehr viel Arbeit ersparen. Ich werde es einfach mal im Skript-Kontext testen. Danke für den Test in der Konsole!

    Für die allermeisten dürfte schlicht und ergreifend kein Bedarf an sowas bestehen. Die Einstiegshürde ist vergleichsweise hoch und andauernd werden dadurch Probleme verursacht oder die Scripts müssen aktualisiert werden. Eine Update-Funktion gibt es ja auch keine. Dazu die oft nicht gute Code-Qualität und nicht gewährleistete Sicherheit.

    Die Aussage stimmt sicher für den absolut überwiegenden Teil der User hier. Aber wenn ich mir die Zugriffszahlen und auch die Antworten hauptsächlich auf die CSS-Threads, aber auch auf die JavaScript-Threads anschaue, dann sind doch durchaus Begehrlichkeiten da, was "Sonderwünsche" in Bedienung und Aussehen des Firefox angehen. Klar sind das meist die üblichen Verdächtigen, aber immer wieder kommen dann auch von Usern mit wenigen Beiträgen solche Fragen wie "Kann man es nicht so einrichten, dass...". Und irgendwie war und ist meine Hoffnung, dass man vielleicht irgendwann vom "Konsumenten" zum "Produzenten" wird. Die meisten, die sich hier ja aktiv beteiligen, machen das ja nicht hauptberuflich oder haben eine entsprechende Ausbildung, sondern sind begeisterungsfähige "Hobby-Code-Frickler".

    Ja die Code-Qualität ist oft unter aller Sau. Da brauche ich nur mein MultiRowTabs-Skript anschauen, welches ich mit viel Enthusiasmus, aber mit noch wenigen JavaScript-Kenntnissen "zusammengefrickelt" habe. Aber man kann sich bzw. sollte sich ja weiterentwickeln...

    Wegen der Einstiegshöhe: Für das Erstellen: ja, das lässt sich nicht verhindern! Aber für das Nutzen von CSS/JS könnte sie viel niedriger sein. Ich bin mir sicher, dass man die Möglichkeiten zur Anpassung des Firefox im Unterforum "Individuelle Anpassungen" besser "vermarkten" müsste. Es gibt meines Erachtens zu viele angeheftete Threads auf der ersten Seite (damit meine ich auch ausdrücklich meine) die mittlerweile auf den ersten Blick mehr verwirren und eher abschrecken. Wenn man bedenkt, dass man um CSS zu nutzten, eigentlich nur eine zusätzliche Datei in einem bestimmten Verzeichnis und einen Eintrag in 'about:config' oder 'user.js' braucht und für das Funktionieren von Skripten nur eine Handvoll Dateien kopieren muss, dann schrecken so viele Threads und Hilfestellungen eher ab, als das es den Einstieg erleichtert. Da könnte man sicher vieles straffen oder zusammenfassen und irgendwie didaktischer aufbereiten, dass es nicht so aussieht, wie eine lang gewachsene "Loseblatt-Sammlung". ;)

    Mein Wunsch wäre ja, dass sich z.B. ein Windows/Linux-Skript Experte mal etwas Zeit nimmt und diese Voreinstellungen und Kopieraktionen für CSS und JavaScript automatisiert. Habe ich leider keine Ahnung davon. Ich wollte schon ein C++ Programm schreiben (Windows). Aber eine '.exe' Datei, auch wenn man Sourcen und sonstige BuildTools zum selber Bauen mitliefert, würde ich persönlich auch nicht gerne verwenden. Zumal ja alles noch mit Admin-Rechten ausgeführt werden muss. Außerdem: Kanonen->Spatzen...

    Besonders problematisch finde ich die Art von Script, welche interne Firefox-Funktionen überschreibt. Denn das sind tickende Zeitbomben.

    Das sehe ich auch so und ist in den allermeisten Fällen auch überhaupt nicht nötig bei den vielen Möglichkeiten durch die Services, die von Mozilla angeboten werden. Wenn doch jemand eine Änderung eines bestehenden Verhaltens haben möchte, die das Ersetzen von bestehendem Code erfordern würde, dann muss man halt sagen, dass genau hier die Grenze der Anpassbarkeit erreicht ist. Aber es gibt fast immer Alternativen...

    Meine Sicht auf das Thema ist am Ende einfach nicht die eines neugierigen Bastlers, der jeden Stein umdrehen möchte, nur weil es halt geht. Meine Zielsetzung für Firefox geht viel mehr in die Richtung von Mozilla, ein funktionierendes Produkt zu haben, welches nicht anfällig für selbst erzeugte Defekte ist. Zumal ich viele der in diesem Forum umgesetzten Dinge - und damit will ich niemandem zu nahe treten! - sinnlos und oft auch optisch wenig ansprechend finde, was in meinem Firefox einfach keinen Platz hat.

    Für mich war der Grund, mich mit dem dem Thema JavaScript auseinanderzusetzen, ein anderer. Ich würde mich durchaus als "neugierigen Bastler" bezeichnen, der aber wirklich nur zusätzliche Skripte in seinem FireFox haben möchte, die seine Arbeit auch wirklich spürbar erleichtern ;) . Deswegen nutze ich auch nur eine Handvoll Skripte. Ein anderer Grund war, dass ich seit Ewigkeiten programmiere, aber im Laufe meines Berufslebens nie mit 'Web-Technologien' zu tun hatte. Nachdem ich mich aktiv aus der professionellen Entwicklung verabschiedet habe, habe ich eben Lust bekommen das hobbymäßig nachzuholen, was ich nie brauchte. Und da bot sich die einmalige Möglichkeit des FireFox an, die eben das mit 'userChrome' erlaubt. :)

    Edit: das Dialog-Element funktioniert einwandfrei im Skript! War eigentlich auch klar, nachdem es auch schon in der Konsole läuft. Bis auf die "Nicht-Verschiebbarkeit" verhält es sich auch wirklich so, wie ich es von einem normalen modalen Dialogfenster erwarten würde. Danke vielmals... :thumbup:

    Einmal editiert, zuletzt von BrokenHeart (14. September 2023 um 21:09)

  • Die Aussage stimmt sicher für den absolut überwiegenden Teil der User hier. Aber wenn ich mir die Zugriffszahlen und auch die Antworten hauptsächlich auf die CSS-Threads, aber auch auf die JavaScript-Threads anschaue, dann sind doch durchaus Begehrlichkeiten da, was "Sonderwünsche" in Bedienung und Aussehen des Firefox angehen. Klar sind das meist die üblichen Verdächtigen, aber immer wieder kommen dann auch von Usern mit wenigen Beiträgen solche Fragen wie "Kann man es nicht so einrichten, dass...".

    Wünsche kann man derer viele haben. Aber sich diese Wünsche selbst zu verwirklichen können, ist eine andere Sache. Ich würde auch mehr können wollen, ich bin der „Möchte-wenigstens-gern-verstehen-Typ“, weil es meistens nicht zu mehr reicht. Die meisten Nutzer möchten nur haben, einige eignen sich dann weitergehende Kenntnisse an und dann gibt es noch diejenigen, die sofort wieder abtauchen, sobald auch nur ein einziger technischer Begriff fällt, z. B. CSS oder JavaScript. Mit der Bemerkung „Ich bin doch kein Programmiere“ verschwinden sie wieder in der Versenkung und lassen sich nicht einmal helfen.


    Es gibt meines Erachtens zu viele angeheftete Threads auf der ersten Seite (damit meine ich auch ausdrücklich meine) die mittlerweile auf den ersten Blick mehr verwirren und eher abschrecken.

    Das gilt aber auch für alle anderen Threads. Das Problem ist eher, dass Hilfesuchende sich oft gar nicht erst die Mühe machen danach zu suchen, allenfalls sich an irgendeinen Thread „dranhängen“. Dennoch halte ich die angehefteten Threads für wichtig – nämlich für die Helfer, die Hilfesuchende gezielt dorthin lenken können. Die angehefteten Threads sollten Threads sein, die eine Zusammenfassung bzw. Übersicht bitten, es sollten keine Diskussionsthreads sein.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Einmal editiert, zuletzt von milupo (14. September 2023 um 21:12) aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

  • weil es meistens nicht zu mehr reicht.

    Das ist doch schon mal die falsche Einstellung. Gerade bei dir würde ich das eben nicht unterschreiben. Es ist immer eine Frage der Motivation, welche nicht von "Tsjakkaa, du schaffst es"-Betrügern, sondern fast immer von positivem Feedback genährt wird. Ist wie bei ganz kleinen Kindern, denen man auch sagt, dass ihr total hässliches, selbstgemaltes Bild ganz doll toll aussieht und schon lacht der/die Kleine. Gut, bei fehlender Weiterentwicklung sollte man irgendwann dann so ehrlich sein und ihm sagen, dass es einfach nur sch...e aussieht und er/sie sich anderen Freizeitbeschäftigungen widmen sollte. :P

  • Das ist doch schon mal die falsche Einstellung. Gerade bei dir würde ich das eben nicht unterschreiben.

    Danke für die Blumen, aber ich habe hier nicht von der berechtigten oder unberechtigten Meinung geschrieben, sondern von der Tatsache und habe das auch bewusst mit „meistens“ relativiert. Und ja, natürlich, zu unterschiedlichen Zeitpunkten kann das anders aussehen und sieht es auch bei mir aus, da ich, wie geschrieben habe, jemand bin, der gern verstehen möchte und man lernt wohl dann wirklich unweigerlich dazu.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • ;(

    Nunja, ich finde, dieser Thread nimmt nun doch eine komische Wendung an.

    Es ist ja nicht falsch, was ihr schreibt, aber ich könnte wirklich etwas Hilfe gebrauchen.

    Bitte.

    Wie gestalte ich das Aussehen eines "Popups" per CSS, dass es so noch gar nicht gibt?

    Mit <3lichem Gruß

    Mira

  • Wie gestalte ich das Aussehen eines "Popups" per CSS, dass es so noch gar nicht gibt?

    Den Dialog-Code hat Sören doch hier gepostet (und in der Konsole ausprobiert):

    Sören Hentzschel
    14. September 2023 um 10:30

    und ich habe es dann in einem Skript getestet(siehe Edit in #25) und es läuft.

    Dürfte doch genau das sein, was du haben möchtest.. :/

  • Den Dialog-Code hat Sören doch hier gepostet (und in der Konsole ausprobiert):

    Sören Hentzschel
    14. September 2023 um 10:30

    und ich habe es dann in einem Skript getestet(siehe Edit in #25) und es läuft.

    Dürfte doch genau das sein, was du haben möchtest.. :/

    D.h. ich brauche einfach nur diesen Code irgendwo in das JavaScript reinhängen?

    Irgendwie stehe ich gerade völlig auf dem Schlauch!

    Mit <3lichem Gruß

    Mira

  • z.B. so ähnlich:

    ist nur als Bastelvorlage gedacht

    Dieser Beitrag ist ohne Hilfe einer 'KI' entstanden.

  • BrokenHeart

    Habe ich ausprobiert!

    Und ja, da legt sich über die Seite so ein "Schleier" in dessen Mitte dieses "Gelb-Grüne-Ding, mit rotem Rand.

    Nur das ist immer nach einem Neustart des Firefox da, und nicht nur, wenn ich über ein bestimmtes Areal hovere!

    Auch verschwindet es, wenn ich draufklicke und kommt nicht wieder, wenn ich über das bestimmte Areal hovere!

    Du hast es in einem Skript "eingebaut"?

    Zeig mir doch bitte wie.


    z.B. so ähnlich:

    ...

    ist nur als Bastelvorlage gedacht

    Habe ich gemacht!Wenn man nun noch

    alert(

       t10+' Berlin\n'

       +t15+' Lagos\n\n'

       +t20+' New York\n'

       +t30+' Moskau\n\n'

       +t40+' Hongkong\n'

       +t50+' Sydney')

    löscht erscheint nur noch das Demo.

    Nur so hatte ich es nicht gemeint :!:

    Hovere mal über den Button.

    Was erscheint da?

    So ein kleines Hinweisfenster!

    Und was steht da bei Deinem Skript drinen?

    Internationale Uhrzeiten anzeigen

    Und was hätte ich gerne umgesetzt?

    Dass da drinnen seht

    Vielleicht habe ich mich nicht richtig ausgedrückt, aber nun sollte es klar sein!

    Leider komme ich auch nicht mit diesen beiden Codeschnipsel weiter.

    1.

    Eventuell an falscher Stelle eingefügt. :/

    und

    2.

    JavaScript
          const popupArea = document.getElementById("time-button");
    
          popupArea.addEventListener("mouseover", function() {
              const popupWindow = window.open("", "Popup", "width=200,height=100");
              const currentDate = new Date();
              const popupContent = `Datum: ${currentDate.toLocaleDateString()} Uhrzeit: ${currentDate.toLocaleTimeString()}`;
              popupWindow.document.write(popupContent);
          });

    Wahrscheinlich das Gleiche.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (14. September 2023 um 23:34)

  • Hab es nun hinbekommen.

    Es ist der Code 2!

    Jedoch funktioniert window.open nicht, sondern ich muss window.alert nehmen.

    Das ist blöd, denn damit das Fenster wieder schließt, muss entweder auf den OK Button geklickt werden

    oder eben auf das rote X in der rechten Ecke oben.

    Was auch irgendwie doof ist, der Button zur Anzeige von Datum und Uhrzeit muss erst einmal betätigt worden sein,

    sonst funktioniert es auch nicht.

    Hier mal meinen Erguss.

    Bin heute nicht so gut drauf und es macht überhaupt keinen Spaß.

    Schade.

    Werde es doch noch einmal mit Sörens Code versuchen.

    Wenn ich den so lese, wird es für mich einige Hürden geben.

    Wie beeinflusse ich die Höhe und die Breite?

    Wie kann ich die Ecken abrunden?

    Und wie das "Fenster" mit Inhalt befüllen?

    Und bekomme ich es hin, dass sich dieses Fenster auch wieder von alleine schließt?

    Eine Denksportaufgabe für schlechtes Wetter.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (15. September 2023 um 01:12)

  • Wie beeinflusse ich die Höhe und die Breite?

    Wie kann ich die Ecken abrunden?

    Ganz normal über CSS. Ich habe im Code bereits Beispiele für Inline-Deklarationen via JavaScript gegeben, das sieht dann entsprechend so aus:

    JavaScript
    dialog.style.width = '500px';
    dialog.style.height = '250px';
    dialog.style.borderRadius = '5px';


    Du kannst stattdessen natürlich auch eine ID oder Klasse vergeben:

    JavaScript
    dialog.setAttribute('id', 'myCustomId');
    // oder:
    dialog.classList.add('myCustomClass');

    Dann machst du das ganze Styling wie gehabt über dein Stylesheet:

    JavaScript
    const sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
    const uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
      #myCustomId {
        width: 500px;
        height: 250px;
        border-radius: 5px;
      }
    `), null, null);
    
    sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

    Und wie das "Fenster" mit Inhalt befüllen?

    Auch hier kannst du dem Beispiel aus dem Code folgen und mit document.createElement() zum Erzeugen eines Elements arbeiten, welches du dann via append() an ein bestehendes Element anhängst (wie z.B. mit dem Button in den Dialog geschehen). Das ist von einem Sicherheits-Standpunkt aus die beste Option, aber eben auch die, welche den meisten Code erfordert. Eine bequeme Alternative wäre innerHTML, was du in einer WebExtension dafür aber nicht verwenden dürftest. In einem Script hält dich niemand auf. Firefox wird den Button aber aus Sicherheitsgründen herausfiltern, wenn du den via innerHTML einfügst. Daher musst du das mit dem zuvor gezeigten Ansatz kombinieren.

    Wichtig dabei ist auch, dass Zeilenumbrüche selbstschließend (<br/>) sind, obwohl der HTML5-Validator <br> bevorzugt (selbstschließende Tags sind ein Relikt aus XHTML). Aber der Parser ist sehr pingelig bei der Verwendung von innerHTML. Sobald nur eine Sache nicht passt, wird das nicht ausgeführt.

    Und bekomme ich es hin, dass sich dieses Fenster auch wieder von alleine schließt?

    Die Methode zum Schließen habe ich auch schon gezeigt:

    JavaScript
    dialog.close();


    Das führst du aus, wann auch immer der Dialog geschlossen werden soll.

  • Sören Hentzschel

    Vielen lieben Dank.

    Nun kann ich erstens meine Gedanken wieder ordnen, mir in aller Ruhe die Codeschnipsel anschauen

    und dann anfangen herumzuexperimentieren, in der Hoffnung, dass ich es doch noch irgendwie gebacken bekomme!

    Ein Gedanke zum Schließen.

    Lässt sich die "Aktion" per "Zeitschleife" automatisieren?

    Also mit z.B.

    JavaScript
    setTimeout(function() {
          dialog.close();
      },250);

    :?:

    Ist nur gerade so eine spontane "Eingebung".

    Nächste Woche habe ich viel Zeit und dann werde ich einen neuen Anlauf wagen.

    Mit <3lichem Gruß

    Mira

  • Ein Extra-Button mit dieser Funktion würde für mich eher nicht in Frage kommen, u. U. schon ein hover auf die js-Uhr die einige (auch ich) in einer Leiste haben.

    Das passt nur bedingt zum Thema, deshalb:

    Spoiler anzeigen

    Es gibt ja verschiedene Uhren-Scripte, hier mal 'meins' mit Modal-Dialog:

    Da ist sicherlich noch viel redundant, gerade im Bereich der Variablen.

    Dieser Beitrag ist ohne Hilfe einer 'KI' entstanden.

    2 Mal editiert, zuletzt von Mitleser (16. September 2023 um 01:50)

  • Ein Extra-Button mit dieser Funktion würde für mich eher nicht in Frage kommen, u. U. schon ein hover auf die js-Uhr die einige (auch ich) in einer Leiste haben.

    Das passt nur bedingt zum Thema, deshalb:

    Spoiler anzeigen

    Es gibt ja verschiedene Uhren-Scripte, hier mal 'meins' mit Modal-Dialog:

    Da ist sicherlich noch viel redundant, gerade im Bereich der Variablen.

    Danke für das fertige JavaScript.

    Genau so sollte die Funktion werden.

    Werde mir das mal ganz genau anschauen.

    Damit ist dieser Thread am Ende.

    Eventuell spiele ich noch etwas mit Sörens Codschnipsel herum, mal seh'n.

    Mit <3lichem Gruß

    Mira