Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Andere Lösungen
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gonzo Gates »

Hallo Gemeinde,

ich wusste ja nicht, ob ihr es wusstet, aber ich habe ein Problem mit der Browseranzeige...

Ich wollte schon immer wissen, welche Fensterbreite ich im Browser habe und zufällig stellte mir 'http://www.fennek.mobi/' ein Beispiel zur Verfügung, welches ich in meine alte statische Seite einbinden könnte. (Bitte nicht den Lehrgang HTTP und CSS absolvieren, da dort viele Bilder für die Formatierung benutzt werden!)
Daraufhin habe ich das JS aufgebohrt und um Höhe und Diagonale erweitert.
Dann war es so weit, dass ich es in CMSimple sehr gut gebrauchen könnte. damit ich nicht immer meine alte Seite bzgl. der Abmessungen befragen muss.
Warum?
Ich möchte, dass meine Website bei mir so aussieht, wie z.B. auf dem iPad meiner Frau (Wobei mir Safari da oft in die Suppe spuckt, wenn es um CSS geht). Da ich mit meiner Website noch nicht online bin und es wahrscheinlich keinen interessiert, was ich mache, skaliere ich Breiten zwischen 1280 und 1600px in meinen 'CMSroot/templates/[template_name]/stylesheet.css'. OK, 480px geht auch, sieht aber Scheiße aus.

Einbau in CMSimple in einer Seite ist wie folgt

In 'CMSroot/cmsimple/userfuncs.php' anlegen und folgendes Codeing eingeben

Code: Select all

<?php
function Seitenangabe()
{
  $jsLoad = '<script>

  window.addEventListener (\'load\', function ()
  {
    var seitenbreiteID = document.getElementById(\'seitenbreite\');
    // Breite beim Laden in px und em anzeigen
    var widthPX  = window.innerWidth;
    var widthEM = (widthPX/16).toFixed(2); // DOR: auf 2 Kommastellen auf- oder abrunden
    seitenbreiteID.innerHTML = widthPX + "px = " + widthEM + "em"; // DOR: Werteuebergabe mit Einheitenangabe an span-Tag bei Seitenaufruf
    var seitenhoeheID = document.getElementById(\'seitenhoehe\');
    // Hoehe beim Laden in px und em anzeigen
    var heightPX  = window.innerHeight;
    var heightEM  = (heightPX/16).toFixed(2); // DOR: auf 2 Kommastellen auf- oder abrunden
    seitenhoeheID.innerHTML = heightPX + "px = " + heightEM + "em"; // DOR: Werteuebergabe mit Einheitenangabe an span-Tag bei Seitenaufruf
    // Diagonale beim Laden in " und cm anzeigen
    var seitendiagonaleID = document.getElementById(\'seitendiagonale\');
    var diagIN = (Math.sqrt(Math.pow(widthPX, 2) + Math.pow(heightPX, 2)) * 0.010416666666666 - 3.5).toFixed(1); // DOR: Quadratwurzel aus a² + b² (Satz des Pytagoras) => 1 Zoll (Inch) [in] = 96,0000000000011 Pixel (X) => 1 px = 0,01041666666666654730902777777915 In und ich habe einfach 3.5 abgezogen, damit es passt. Auf 1 Kommastelle auf- oder abrunden
    var diagCM = (diagIN * 2.54).toFixed(1); // DOR: Umrechnen in cm. Auf 1 Kommastelle auf- oder abrunden
    seitendiagonaleID.innerHTML = diagIN + "\" oder " + diagCM + " cm"; // DOR: Werteuebergabe mit Einheitenangabe an span-Tag bei Seitenaufruf
    window.onresize = function () 
    {
      widthPX = window.innerWidth;
      var widthEM = (widthPX/16).toFixed(2); // DOR: auf 2 Kommastellen auf- oder abrunden
      seitenbreiteID.innerHTML = widthPX + "px = " + widthEM + "em"; // DOR: Werteuebergabe mit Einheitenangabe an span-Tag bei Seitenbreiteaenderung
      heightPX = window.innerHeight;
      var heightEM  = (heightPX/16).toFixed(2); // DOR: auf 2 Kommastellen auf- oder abrunden
      seitenhoeheID.innerHTML = heightPX + "px = " + heightEM + "em"; // DOR: Werteuebergabe mit Einheitenangabe an span-Tag bei Seitenhoeheaenderung
      var seitendiagonaleID = document.getElementById(\'seitendiagonale\');
      var diagIN = (Math.sqrt(Math.pow(widthPX, 2) + Math.pow(heightPX, 2)) * 0.010416666666666 - 3.5).toFixed(1); // DOR: Quadratwurzel aus a² + b² (Satz des Pythagoras) => 1 Zoll (Inch) [in] = 96,0000000000011 Pixel (X) => 1 px = 0,01041666666666654730902777777915 In und ich habe einfach 3.5 abgezogen, damit es passt. Auf 1 Kommastelle auf- oder abrunden
      var diagCM = (diagIN * 2.54).toFixed(1); // DOR: Umrechnen in cm. Auf 1 Kommastelle auf- oder abrunden
      seitendiagonaleID.innerHTML = diagIN + "\" oder " + diagCM + " cm"; // DOR: Werteuebergabe mit Einheitenangabe an span-Tag bei Seitenbreite und -hoehenaenderung
    }
  }) /* Ende window.addEventListener */;
  </script>';
  return $jsLoad;
}
?>
Eine CSS-Datei anlegen

Dateiname z.B. 'CMSroot/css/mein_style.css' und folgendes Codeing eingeben

Code: Select all

.dor_anzeige_seitenmass { /* DOR: hinzugefuegt fuer Anzeige Breiten- und Hoehenmasse der Website */
  padding-top: 15px;
  color: #930; /*bordeaux - rgba(153,51,9,1)*/
  font-size: 22px; /* DOR: hinzugefuegt, weil Tiny mir bei h3-Tag in die Suppe spuckt und 'class=""' beim abspeichern loescht. Mit h4-Tag geht es. 'font-size' ist wie h3-Tag */
  line-height: 1.1em; /* DOR: hinzugefuegt, weil Tiny mir bei h3-Tag in die Suppe spuckt und 'class=""' beim abspeichern loescht. Mit h4-Tag geht es */
  font-weight: 700;
  font-variant: small-caps;
}

.dor_anzeige_seitenmass_werte {
  color: rgba(34,34,34,.85); /* #222 */
  font-size: 22px; /* DOR: hinzugefuegt, weil Tiny mir bei h3-Tag in die Suppe spuckt und 'class=""' beim abspeichern loescht. Mit h4-Tag geht es 'font-size' ist wie h3-Tag */
  line-height: 1.1em; /* DOR: hinzugefuegt, weil Tiny mir bei h3-Tag in die Suppe spuckt und 'class=""' beim abspeichern loescht. Mit h4-Tag geht es */
  font-variant: none;
  font-weight: 500;
}
Datei im Header in die 'CMSroot/templates/[template_name]/template.htm' einbinden.

Code: Select all

<link rel="stylesheet" href="<?php echo CMSIMPLE_ROOT; ?>/css/mein_style.css"> 
Einbindung in den Seitencode

Im Bearbeitungsmodus in Tiny auf '<>' klicken und an gewünschter Stelle folgendes eingeben

Code: Select all

<h4 class="dor_anzeige_seitenmass">Aktuelle Fensterbreite:<br><span id="seitenbreite" class="dor_anzeige_seitenmass_werte"></span><br style="margin-bottom: 5px;">Aktuelle Fensterhöhe:<br><span id="seitenhoehe" class="dor_anzeige_seitenmass_werte"></span><br style="margin-bottom: 5px;">Aktuelle Diagonale:<br><span id="seitendiagonale" class="dor_anzeige_seitenmass_werte"></span></h4>
<p>Berechnung der Diagonale haut nicht hin. Bei Browser Vollbild müsste ich 15.6" haben. Es wird aber 19.12" angezeigt und ich habe einfach 3.5 abgezogen, damit es passt. Ist eher eine <a class="article_link article_link_milchmaedchen" style="width: 11.6em; padding: 0 4px;" title="Milchmädchen-Rechnung" href="https://de.wikipedia.org/wiki/Milchm%C3%A4dchenrechnung" target="_blank" rel="noopener">Milchmädchen-Rechnung</a> (ungefähr, vielleicht, könnte so sein, passt irgendwie schon)! Mir doch egal! Ach ja, JS für das Runden der angegebenen Werte nochmal überarbeitet.</p>
<!-- Jetzt wird die Funktion aus 'userfucs.php' aufgerufen -->
<div>{{{plugin:Seitenangabe();}}}</div>
Achtung: Man sieht die berechneten Abmessungen erst in der Seitenansicht, nicht im Editor.

Ich hoffe nix vergessen zu haben...

Bei Fragen oder Problemen schlagen sie ihren Arzt oder Apotheker

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gert »

Gonzo Gates wrote: Wed 31. May 2023, 19:28 Bei Fragen oder Problemen schlagen sie ihren Arzt oder Apotheker
Bei meinem Artzt bekomme ich keine Termine mehr und in der Apotheke habe ich inzwischen Hausverbot ;)
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gert »

Gert wrote: Thu 1. Jun 2023, 13:11 Bei meinem Artzt bekomme ich keine Termine mehr und in der Apotheke habe ich inzwischen Hausverbot ;)
Das war jetzt nicht nur als Witz gemeint. Wäre ich Deinem Rat gefolgt, hätte es durchaus so oder schlimmer kommen können ;-)

Ich habe nämlich jede Menge Probleme mit Deiner Idee.

1. Warum und wofür die Umrechnung in em? Gibt doch nur bezogen auf 16px Schriftgrösse ein korrektes Ergebnis.

2. Schön, das Du es hinbekommen hast, dass die Berechnung der Diagonale in Zoll/cm auf Deinem Bildschirm passt. Bei mir und vermutlich bei den meisten anderen passt es nicht. Die Umrechnung von px (Anzahl) auf Inch/Zoll (Länge) braucht irgendwie noch einen ppi Wert (ppi: Pixel Per Inch), der muss bekannt sein und ist auf meinem Laptop anders als auf meinem riesigen Flachbildschirm, beide haben eine horizontale Auflösung von 1.920 px

Was an sinnvollem übrigbleibt ist das hier:

https://www.ge-webdesign.de/plugindemo/ ... d_Viewport

Ich habe das Script mal stark reduziert und in mein Collection Plugin integriert, die Augabe ist das mit dem roten Hintergrund. Gibt es irgendwelche Einwände, wenn ich das so veröffentliche?

Gert
Last edited by Gert on Sun 24. Dec 2023, 18:32, edited 2 times in total.
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gonzo Gates »

Hallo Gert,

bei der Berechnung der Diagonalen habe ich geschrieben, das es eine Krücke ist, die bei mir passt.

Rufe ich den Beispiellink zu deiner Test-Site auf, bekomme ich die Seitenanzeige zu sehen. Gebe ich (Umschalt + Steuerung + M) ein erscheint ein modales Fenster. Verändere/erhöhe ich z.B. den Höhenwert, dann wird die Anzeige höher. Klicke ich im Browser (Firefox) auf 'zurück', bekomme ich die Ansicht des Forums in den gleichen Abmessungen wie vorher - hier 320 x 600 - in der Box zu sehen. Noch besser...ich bekomme, wenn ich noch mehr auf zurück im Browser klicke eine Ansicht, die die Startansicht meines Browsers ist, wenn keine Website aufgerufen ist, in den gleichen Abmessungen zu sehen. Nicht schön, aber selten! Hilfe ist dann nur den Tab zu schließen und das Forum erneut aufzurufen. Ich bin in diesem Fall nicht beim Forum angemeldet (only view). Bildschirm drehen führte nicht zu erquicklichen Ansichten.
Ich habe nie geschrieben, das es ein perfektes Ergebnis/Script ist (steht auch in meinen Kommentaren). Ich dachte, dass es eine Anregung für die Community (wie man so schön sagt) ist.

Alles zurück: Meine Frau hat gesagt:"Und wenn du jetzt wieder Umschalt + Steuerung + M drückst, was ist dann?" -> manchmal sind Frauen die einfacheren, genialeren Denker!

Hier ein kleiner Ausflug in Schriften und Abmessungen (px,em,rem,etc.): https://www.mediaevent.de/tutorial/masseinheiten.html

Über die Veröffentichung des abgewandelten Scripts in meiner angedachten Website (driarukt.de) habe ich mir auch schon Gedanken gemacht. Das Script ist von www.fennek.mobi 'entwendet' und ich habe mir diesbezüglich überlegt, ob ich von Axel Pratzner eine Genehmigung benötige. Wahrscheinlich schon, aber es ist auf bekannten Steinen gebaut.

Deichkind: Selber machen lassen - https://www.youtube.com/watch?v=dapqMeQCdcs :-)

Schö WE

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gert »

Gonzo Gates wrote: Fri 2. Jun 2023, 23:02 Alles zurück: Meine Frau hat gesagt:"Und wenn du jetzt wieder Umschalt + Steuerung + M drückst, was ist dann?" -> manchmal sind Frauen die einfacheren, genialeren Denker!
Oben rechts gibt es auch das berühmte quadratische "X" zum verlassen der Ansicht, leider nicht in rot-weiss ;)

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gonzo Gates »

Hallo Gert,

zu rot-weiss fällt mir ein: Pommes Schranke, EMW (Eisenacher Motoren Werke [Später BMW]), RWE (Rot Weiss Essen) und RW Wilhelmsburg (HH). Aber richtig Fußball-Affin bin ich nnicht! Ach ja, und der Aubfau des Union Jack -> https://de.wikipedia.org/wiki/Union_Jack

Vergessen: Wenn die Nutzungsbedingungen (Bei meinen Änderungen: Feel Free!) geklärt sind, ziehe ich mir das 'Collection-Plugin' (Adventskranz und Weihnachtsbaum sind nicht so meins) und freue mich, dass ich einen kleinen Beitrag leisten konnte.

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gert »

Gonzo Gates wrote: Sat 3. Jun 2023, 15:26 Wenn die Nutzungsbedingungen ... geklärt sind ...
Das "Originalscript" sieht ja so aus:

Code: Select all

<script>
window.addEventListener ('load', function () {
    var ausgabebreite = document.getElementById('ausgabebreite');

    // Breite beim Laden anzeigen
    var width  = window.innerWidth;
    var inEM   = width/16;

    ausgabebreite.innerHTML = width + "px = " + inEM + "em";

    window.onresize = function () {
      width = window.innerWidth;
      var inEM   = width/16;
      ausgabebreite.innerHTML = width + "px = " + inEM + "em";
    }
});
</script>
Ich glaube nicht, dass die "Schöpfungshöhe" hier ausreicht, um ein Urheberrecht geltend zu machen, zumal ich ja die Hälfte nicht nutze, nämlich die Umrechnung in em. Ich vermute eher, dass das ganze einem Beispiel aus einem JavaScript Lehrgang nachempfunden ist ;)
Gonzo Gates wrote: Sat 3. Jun 2023, 15:26 (Bei meinen Änderungen: Feel Free!) ... freue mich, dass ich einen kleinen Beitrag leisten konnte.
Vielen Dank ;)

Ich habe meinerseits eine weitere Funktion hinzugefügt, die die Bildschirmauflösung anzeigt:

https://www.ge-webdesign.de/plugindemo/ ... d_Viewport

Kann besonders auf Smartphones interessant sein,

Gert
Last edited by Gert on Sun 24. Dec 2023, 18:31, edited 2 times in total.
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gonzo Gates »

Hallo Gert,

1. werde ich das mal auf meinem iPhone und dem iPad meiner Frau checken
2. da haben sie mich ja schön beschissen: meine NB Auflösung soll sein 1600 x 900 und nicht wie bei deiner Darstellung 1600 x 860...hmm (Angeschaut mit FF). Wenn ich 'F11' drücke, zeigt mir 'Viewport' 1600 x 900 an und die Screen Resolution bleibt bei 1600 x 860 ;-/ Chrome und Edge zeigen bei mir das gleiche an...

Ich hoffe geholfen zu haben.

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gert »

Hallo Gonzo,

bei mir (FF, Opera, Chrome, Edge) bleibt die Bildschirmauflösung (grüne Anzeige) immer gleich, auch bei F11 hin und her, immer: 1920 x 1080 px, es ändert sich nur der Viewport (rote Anzeige):

https://www.ge-webdesign.de/demotpl/?Pl ... d_Viewport

Wenn ich das Fenster von einem Bildschirm auf den anderen schiebe, ändert sich die Bildschirmauflösung (grüne Anzeige) erst nach neu laden der Seite.

Auf meinem Laptop dann 1600 x 900 px, immer, egal ob Vollbildmodus oder nicht,

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Anzeige Fensterbreite, Fensterhöhe und Diagonale in CMSimple mit JS

Post by Gonzo Gates »

Hallo Gert,

wie schön, dass noch ein Laptop (Schlepptop) hast. Ich habe ein Notebook.

Ich habe gehört, das es Leute gibt, die in CSS Grafiken anwenden, wenn es um 'opacity' geht.

Zum Thema:

Erst hatte ich mein Programm 'TranslucentTB' im Verdacht, das meine Taskleiste transparent macht.

Ausgeschaltet und das gleiche Ergebnis.

Dann habe ich meine Taskleiste über 'Rechtsklick Taskleisteneinstellungen -> Taskleiste im Desktopmodus automatisch ausblenden -> 'Ein'' ausgeschaltet (Ist irgenwie wie bei vielen Einstellungen bei gpedit) und bekam bei der Anzeige ' Screen Resolution' das richtige Ergebnis (1600 x 900).

Meiner Meinung nach spuckt die Taskleiste einem in die Suppe, wenn man, nach deiner Berechnung/deines Codeings, die Bildschirmauflösung (Screen Resolution) darstellen will.

2023-06-05 2:40 h: Alles zurück...

Nach dem NB zusammenklappen und "Abendessen" war die Bildschirmauflösung (Screen Resolution) korrekt. Offenbar brauchte mein NB etwas Zeit, um sich an den neuen Code zu gewöhnen. Ewas anderes hatte ich auch schon mal bei anderen meiner Webseiten. Eine Nacht datüber schlafen und dann klappt es. Hört sich doof an, ist aber so. Und komm mir nicht mit "Hast du das schonmal nach einem Neustart des Systems versucht?"

Ich lass den alten Text aus emozionalen Gründen trozdem im Posting stehen.

Mit gräulichen Füßen
Gonzo
Last edited by Gonzo Gates on Mon 5. Jun 2023, 03:04, edited 2 times in total.
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Post Reply