CMSimple Seiten als Overlay im Lightbox Stil

[Gert]

Hallo,

nachdem es in meinen Templates schon Menüs und Suchfunktion als Overlay im Lightbox Stil gibt, habe ich jetzt 2 Funktionen geschrieben, mit denen man auch die Druckansicht von CMSimple Seiten als Overlay anzeigen kann. Die Druckansicht einer CMSimple Seite zeigt nur den Inhalt der Seite an und ist deshalb für die Darstellung in einem Overlay bestens geeignet. Man kann mit diesen Funktionen aber auch einfache .txt Dateien mit html Code oder html Dateien als Overlay anzeigen.

Ich habe noch nicht entschieden, ob ich die 2 Funktionen und das CSS in mein Collection Plugin integriere, oder ob das ein eigenen Plugin werden soll, das später erweitert werden kann. Vielleicht hat ja jemand eine Meinung dazu, hier schonmal eine Demo:

https://www.ge-webdesign.de/demotpl/?Pl ... l&ovl_impr

Gert

[Gonzo Gates]

Hallo Gert,

wie schon mal geschieben, finde ich diesen Effekt supigut!

Für die Einbindung in das 'Collectin-Plugin' spricht, dass diese Funktionen nicht so richtig irgenwie irgendwo hingehören.

Für ein eigenes Plugin spricht, dass man diese Funktionen mit den Funktionen Menüs und Suchfunktion als Overlay vereinen kann und der Anwender selber entscheiden kann, wo er diese Funktionalität haben möchte. Dann entfällt, dass es eigenständige Templates mit den Menüs und Suchfunktionen als Overlay gibt. Das führt auch dazu, dass eine doppelte Pflege von Templates ausgeschlossen wird und wenn eine oder mehrere dieser Funktionen in ein neues Template fließen sollen, kann man entscheiden, das Plugin mit auszuliefern.

Ich denke da immer:"Habe, wenn du etwas öfter verwenden möchtest, dieses Etwas an einem zentralen Ort." So wie ich mit meinen Stylesheets und der Font-Ablage.

So wie ich dich bis jetzt kenne, kann man die Overlays an sein eigenes CMS-Layout anpassen und das ist gut. Dann kann ich wieder ordentlich im CSS rumwühlen -> einblenden und ausblenden und so gestalten, wie meine mit der CMS-Funktionalität und meiner JS-Funktionalität eingebauten Bilder.

Bzgl. Textdateien aufruf: Ich verlinke in einer Seite auf eine Textdatei, die sich im neuen Tab öffnet und die zeigt dann 'ä, ö, ü, ß', wie gewohnt, als Hiroglyphen an. Wenn das damit entfällt, dann werde ich noch mehr dein Fan!

Gruß
Gonzo

P.S.: Den Wickendorfer Musikanten e.V habe ich aus der Site heraus genommen

[Gert]

So wie ich dich bis jetzt kenne, kann man die Overlays an sein eigenes CMS-Layout anpassen ...

So isses

Bzgl. Textdateien aufruf: Ich verlinke in einer Seite auf eine Textdatei, die sich im neuen Tab öffnet und die zeigt dann 'ä, ö, ü, ß', wie gewohnt, als Hiroglyphen an.

Ist die Datei utf-8 codiert?

Im Overlay klappt's mit den Umlauten, ich habe unten auf der Demoseite mal eine .txt Datei mit html Code als Overlay präsentiert:

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

Die .txt Datei ist allerdings als utf-8 gespeichert. Der html Code ist teilweise einfach mit CMSimple erzeugt und dann aus der Quelltext Ansicht des Editors in die Textdatei kopiert,

Gert

[Gonzo Gates]

Hallo Gert,

ich benutze als Texteditor, so wie du, notepad++ für meine Textdateien (na ja, auch noch andere) und der speichert die Dateien standardmäßig in UTF-8 ab (ohne BOM).

Die .txt Datei ist allerdings als utf-8 gespeichert. Der html Code ist teilweise einfach mit CMSimple erzeugt und dann aus der Quelltext Ansicht des Editors in die Textdatei kopiert,

So richtig richtig habe ich das noch nicht verstanden, aber schiskojenno.

Was anderes: Wenn ich auf die Demo-Seite gehe und den Link für die Textdatei aufrufe, bekomme ich das Overlay zu sehen. Weil das Overlay aber ein wenig länger ist als mein Browser/Monitor es darstellen kann, habe ich mal nach unten gescrollt. Siehe da: Das rote 'X' blieb wärend dessen ca 20px unter der Fixed-Nav hängen und verschwand erst, als ich am Ende des Overlays angelangt war nach oben unter die Fixed-Nav. Ist das ein Bug oder ein Feature? OjKäi, ich kann irgendwo hin klicken und dann ist das Overlay weg. Aber der Hintergrund scrollt bei Klick auf Link sofort an den Anfang der Seite. Blöd, wenn ich eigendlich am Ende der längeren Seite noch zu Ende lesen wollte und mitten drin im Text auf den Link geklickt habe.

BTW: Das Copyleft des Posaunen-Chors ist aus der Website plötzlich verschwunden

Genug erzahlt...

Gruß
Gonzo

[Gert]

So richtig richtig habe ich das noch nicht verstanden ...

Man kann html Code von Hand schreiben oder per WYSIWYG Editor erstellen. Das erste kann man direkt in der Textdatei machen (wenn man es kann), das zweite nicht. Da muss man dann den html Code aus der Quelltextansicht des WYSIWYG Editors in die Textdatei kopieren. Da CMSimple einen guten WYSIWYG Editor hat, bietet sich CMSimple selbst an

Warum dann nicht gleich die CMSimple Seite benutzen, oder extra für das Overlay anlegen? Weil man Dateien im Pluginaufruf relativ referenzieren kann, während CMSimple Seiten immer mit dem kompletten URL referenziert werden müssen. Und weil ich in einer Textdatei html Code aus verschiedenen bestehenden CMSimple Seiten (und anderen Quellen) zusammenkopieren kann. Soll jeder machen wie er will.

Das rote 'X' blieb wärend dessen ca 20px unter der Fixed-Nav hängen und verschwand erst, als ich am Ende des Overlays angelangt war nach oben unter die Fixed-Nav. Ist das ein Bug oder ein Feature?

Ein Feature, das im Stylesheet abgestellt bzw. verändert werden kann (position: sticky;)

Aber der Hintergrund scrollt bei Klick auf Link sofort an den Anfang der Seite. Blöd, wenn ich eigendlich am Ende der längeren Seite noch zu Ende lesen wollte und mitten drin im Text auf den Link geklickt habe.

Der Hintergrund scrollt nicht an den Anfang der Seite, sondern die Seite wird ohne den GET Parameter, der das Overlay aktiviert, neu geladen. Das habe ich deshalb so gemacht, weil das ganze ohne JS Events wir onclick und umfangreiche noscript Bereiche als Fallback funktionieren soll.

Wenn Du dahin zurück willst, wo Du warst, kannst Du den Back Button des Browsers nutzen.

Das Copyleft des Posaunen-Chors ist aus der Website plötzlich verschwunden

Da hast Du wohl zu viel am Funktionsaufruf oder drumherum gefummelt

Entferne die Backslashes, wie die dahin kommen weiss ich auch nicht ...

Gert

[Gert]

Hallo Gonzo,

weil Du so schön was gegen die Langeweile hier im Forum tust, habe ich extra für Dich einen zusätzlichen JavaScript Back Button eingebaut, der bei deaktiviertem JavaScript verschwindet. Die Buttons sind jetzt nicht mehr sticky, sondern fixed:

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

Beim Chrome musste ich erst aggressiv Cache löschen, bevor der neue Button zu sehen war

Gert

[Gonzo Gates]

Hllo Gert.

Entferne die Backslashes, wie die dahin kommen weiss ich auch nicht ...

Willentlich! So lasse ich die Einbindung einer Funktion über dem dargestellten Ergebnis erscheinen. Das sieht man vermehrt in meiner 'Testarossa' Subside, die du entweder über den Link 'Fensterbreite, -höhe und Diagonale' in der Main-Site findest oder über das transparente PNG (Ja, da habe ich auch eines ) neben dem Kochtopf in der Fixed-Nav.

Beim Chrome musste ich erst aggressiv Cache löschen, bevor der neue Button zu sehen war

Leider spuckt mir Firefox diesbezüglich auch öfter in die Suppe, deshalb habe ich den so eingestellt, dass er jedesmal, wenn ich ihn schließe, er den Cache und Cookies löschen soll. Ist nicht so komfortabel bei vielen Sites, aber hilft mir, dass ich nicht in die Luft gehe, wenn eine meiner Änderungen nicht funzt.

Da CMSimple einen guten WYSIWYG Editor hat, bietet sich CMSimple selbst an

Früher haben wir sowas WYSIWYMTG (WhatYouSeeIsWhatYouMeanToGet) genannt , aber in der letzten Zeit hat sich da ja mächtig was getan.

Das mit den Knöppies für 'schließen' und 'back' kann ich auf deiner Demo für eine längere Seite, in der ein Link eingebaut ist, leider nicht nachvollziehen. Schau doch aml bei http://dorilaraukft.bplaced.net/sites/B ... _initiale/ rein, da kannst du längere interessante Blintexte zur Verlängerung der Seite finden. Die Seite ist mit mehreren CSS-Gimmiks gespickt, die ich so aufgetrieben habe.

Die Lösung mit den Knöppies gefällt mir. Chapeau. Aber wenn man JS deaktiviert hat, dann funzt auf deiner und meiner Website einiges nicht mehr...

Eine Anekdote: Ich hatte mal mit einem Projekleiter zusammen gearbeitet und der hatte mich dann immer mal etwas gefragt, wie man etwas realisieren könnte. Ich gab ihm eine Antwort und meistens kam von mir:"Ja, aber hast du bedacht, dass...". Trotzdem hat er immer noch gefragt, obwohl es ihm auf die Nerven ging, und jetzt sind wir gute Freunde

Das mit dem 'Posaunen-Chor' war ein Gag! Den habe ich willentlich (Huch, schon wieder) entfernt...

Gruß
Gonzo

[Gert]

Das mit den Knöppies für 'schließen' und 'back' kann ich auf deiner Demo für eine längere Seite, in der ein Link eingebaut ist, leider nicht nachvollziehen. Schau doch aml bei http://dorilaraukft.bplaced.net/sites/B ... _initiale/ rein, da kannst du längere interessante Blintexte zur Verlängerung der Seite finden.

Ich brauche keine Blindtexte, ich habe selber genug Inhalt

Nimm diese Seite: https://www.ge-webdesign.de/demotpl/?Pl ... ntentboxen und benutze die Links zu Impressum oder Datenschutzerklärung im Footer. Mit dem Back Button landest Du wieder unten im Footer, mit dem Schliessen Button oben auf der Seite,

Gert

[Gonzo Gates]

Hallo Gert,

jo, du hast mich mit dem letzten Demo erleuchtet. Genau so dachte ich es mir, konnte es aber nicht im anderen Demo nachvollziehen.

Danke für den Baukasten! Früher waren das Stabilo (Ja, ich kenne den noch), Lego und Fischertechnik (Ich habe auch ein Häuschenvogel mit meine Schwanzfuchs gebaut) und heute HTML, PHP, JS und Perl

Gruß und schö WE
Gonzo

[Gert]

Hallo,

auf Grund des "überwältigenden Interesses" ist die Entscheidung gefallen: Die Overlays werden als neue Funktionen des Collection Plugins veröffentlicht. Das bietet sich aber auch deshalb an, weil die Funktionen keine Sprachbausteine und keine Konfigurationsmöglichkeiten brauchen, das wird alles in den Funktionsaufrufen geregelt.

Vielen Dank an Gonzo, für die Anregung und die Mitarbeit,

Gert