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;
}
?>
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;
}
Code: Select all
<link rel="stylesheet" href="<?php echo CMSIMPLE_ROOT; ?>/css/mein_style.css">
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>
Ich hoffe nix vergessen zu haben...
Bei Fragen oder Problemen schlagen sie ihren Arzt oder Apotheker
Gruß
Gonzo