Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 13. Dezember 2015 21:39

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

[GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Hallo Forum,

ich möchte Begriffe aus meinen Seiten so verlinken, dass sie in einem neuen (verkleinerten) Fenster erklärt werden (ggfs. mit Bild). Da ich nicht bei jedem Begriff mit dem <abbr>-Tag einen Text eingeben und mittels <target>-Attribut in einem neuen Fenster ausgeben möchte, hatte ich mir vorgestellt, den jeweiligen Text bzw. die Erläuterung zu dem Begriff in einem Glossar zusammenzufassen und dann so zu verlinken, dass er in einem neuen Fenster erscheint.

Habe schon etwas mit dem Modul "Glossary" gespielt, aber so richtig die zündende Idee kam mir dabei noch nicht  sad .

Hat einer von Euch vielleicht schon Erfahrung mit einem derartigen Vorhaben und kann mir etwas "auf die Sprünge" helfen ? Würde mich unheimlich über jede Unterstützung freuen smile .


Man ist so alt, wie man sich fühlt...

Offline

#2 14. Dezember 2015 08:49

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Dancer62 schrieb:

Habe schon etwas mit dem Modul "Glossary" gespielt, aber so richtig die zündende Idee kam mir dabei noch nicht  sad .

Tja, die Frage wäre da, was genau zünden soll big_smile. Als Feuerwehrmann kennst du dich damit besser aus als wir  cool .

Nee, mal im Ernst - schau dir mal das Modul CGSimpleSmarty an. Dort gibt es die Möglichkeit, einen Link auf eine Modulaktion zu erzeugen, module_action oder so. Wenn du in diesem Aufruf die ID des jeweiligen Glossary-Eintrag nimmst, sollte in etwa das heraus kommen, was du willst.

Als Sahnehäubchen könntest du die Modul-Aktion in einer Lightbox aufrufen, hier mal mit FormBuilder gezeigt

http://www1.cmscanbesimple.org/blog/for … modal-view

Offline

#3 14. Dezember 2015 14:34

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Hallo,

Ich weiß ja nicht wie groß letztendlich dieses Glossar werden soll, bzw. wie aufwändig es eventuell ständig erweitert und gepflegt werden muss.
Aber eventuell wäre ja neben Cybermans Idee auch der Einsatz von Tooltips interessant.
Die kann man per CSS auch schön aufhübschen, Images einbinden und sie haben auch den von Cyberman angesprochenen Lightbox-Effekt. Über den Tiny ließe sich die Codezeile sicherlich als Rohling einfügen und dann individuell ausbauen.
Vielleicht ist sowas ja auch interessant für dich.

z.B. http://iamceege.github.io/tooltipster/#getting-started

Gruß

Offline

#4 14. Dezember 2015 14:45

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Jamman schrieb:

wie groß letztendlich dieses Glossar werden soll, bzw. wie aufwändig es eventuell ständig erweitert und gepflegt werden muss.
Aber eventuell wäre ja neben Cybermans Idee auch der Einsatz von Tooltips interessant.
Die kann man per CSS auch schön aufhübschen, Images einbinden und sie haben auch den von Cyberman angesprochenen Lightbox-Effekt.

Gefällt mir fast noch besser.

Die Tooltips ließen sich zudem ebenfalls mit Glossary verwalten - mit dem Unterschied, dass da bei Klick nicht erst eine zusätzliche Modulaktion ausgeführt werden muss, sondern der Inhalt des Eintrags bereits vorhanden ist und nur noch sichtbar gemacht werden muss.

Damit kannst du dir ein Modul sparen, reduzierst damit in der Zeitlinie die Serverlast und bietest zudem eine bessere Usability.

Offline

#5 14. Dezember 2015 15:21

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

cyberman schrieb:

Die Tooltips ließen sich zudem ebenfalls mit Glossary verwalten - mit dem Unterschied, dass da bei Klick nicht erst eine zusätzliche Modulaktion ausgeführt werden muss, sondern der Inhalt des Eintrags bereits vorhanden ist und nur noch sichtbar gemacht werden muss.

Dein Einwand gefällt mir, allerdings muss ich gestehen, das ich im Moment nicht den leisesten Schimmer habe, wie ich die Glossary-Einträge mittels "Tooltipster" aufrufen kann. Außerdem stellt sich mir die Frage, wie ich den Text in meinem Content 'markiere', damit die Tooltips tatsächlich beim Klick bzw. Hover-Over angezeigt werden... sad


Man ist so alt, wie man sich fühlt...

Offline

#6 14. Dezember 2015 15:33

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

In das HTML-Markup des Tooltipster o.ä. müsste dann doch wahrscheinlich dies hier rein:

{cms_module module='Glossary' term='stichwortedieduhast'}

Oder?

Offline

#7 14. Dezember 2015 21:10

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Jamman schrieb:

In das HTML-Markup des Tooltipster o.ä. müsste dann doch wahrscheinlich dies hier rein:

{cms_module module='Glossary' term='stichwortedieduhast'}

Oder?

Ähhh, das Glossar wird voraussichtlich mehrere hundert Einträge umfassen - sollen die alle hinter "term=" aufgelistet werden ?
Oder reicht es, wenn ich Tooltipster mit

    <script>
        $(document).ready(function() {
            $('#my-tooltip').tooltipster({
                content: ${cms_module module='Glossary'}
            });
        });
    </script>
</head>

aufrufe ?


Man ist so alt, wie man sich fühlt...

Offline

#8 15. Dezember 2015 07:34

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Oder muß ich jetzt für jeden Eintrag im Glossar eine Zeile à la

<script>
      $(document).ready(function() {
            $('#stichwort_1').tooltipster({content: ${cms_module module='Glossary' term='stichwort_1'}});
            $('#stichwort_2').tooltipster({content: ${cms_module module='Glossary' term='stichwort_2'}});
            $('#stichwort_3').tooltipster({content: ${cms_module module='Glossary' term='stichwort_3'}});
            ...
       });
</script>

eintragen ? Das würde bei einer derartigen Anzahl von voraussichtlichen Einträgen eine Menge Arbeit werden... hmm


Man ist so alt, wie man sich fühlt...

Offline

#9 15. Dezember 2015 09:09

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Ich glaube sowieso, dass das eine Menge Arbeit wird big_smile .
Ich dachte bisher wirklich, es gehe um vielleicht 20-30 Begriffe und die hätte ich irgendwie händisch eingesetzt und für mich wäre es dann gut gewesen cool .

Aber mit der Menge Begriffe baust du ja fast schon ein Wiki auf. Ich bin da auch überfragt, ob das wirklich noch mit Bordmittel so ohne weiteres geht.

Funktioniert denn die von dir gepostete Scripteinbindung? Wird Glossary aufgerufen und etwas angezeigt?

Gruß

Offline

#10 15. Dezember 2015 10:11

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Tooltipps gehen übrigens auch ohne Javascript /jQuery

http://pixelbar.be/blog/css-profi-tip-t … ttributen/

Die Idee mal weiter gedacht (und natürlich um Unmengen Arbeit zu vermeiden) könnte man einen Smarty Prefilter a la Auto-Lightbox einsetzen, der aus

<a href="#" class="tooltip">stichwortedieduhast</a>

dies macht

<a href="#" class="tooltip" data-tooltip="{cms_module module='Glossary' term='stichwortedieduhast'}">stichwortedieduhast</a>

wobei nur der Linktext mit dem term Parameter überein stimmen muss wink.

Praktisch müsste dann auf den Begriff ein Link ins Nirwana und auf eine bestimmte CSS-Klasse gesetzt werden - fertig.

Offline

#11 15. Dezember 2015 12:48

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Wenn ich die Modulhilfe vom Glossary-Modul richtig verstehe, musst Du nur jeden Inhalt, in dem Du Glossar-Links haben willst, in den Smarty-Tag

{glossary_terms} ... {/glossary_terms} 

einschließen. Das Modul durchsucht dann den Inhalt nach Begriffen im Glossar und kennzeichnet sie dann automatisch mit

<abbr class="glossary_term" title="..." id="...">Begriff</abbr>

Das Javascript für Tooltippster könnte dann z.B. so aussehen (ist den Beispielen von Tooltipster entlehnt):

<script type="text/javascript" charset="utf-8">
var glossary_url = "{root_url}/index.php?mact=Glossary,cntnt01,showsingle,0&showtemplate=false&cntnt01tid=";
$('.glossary_term').each(function() {

    var term_id = (this.id).substr(9), 
        toolTip = this.title == '' || this.title == 'NAME DES GLOSSARMODULS WIE ER IM BACKEND ANGEZEIGT WIRD' ? 'Loading ... ' : this.title;

    $(this).tooltipster({

        content: toolTip,

        contentAsHTML: true,

        functionBefore: function(origin, continueTooltip) {
            
            // we'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
            continueTooltip();
            
            // next, we want to check if our data has already been cached
            if (origin.data('ajax') !== 'cached') {
                $.ajax({
                    type: 'GET',

                    url: glossary_url + term_id,

                    success: function(data) {
                        // update our tooltip content with our returned data and cache it
                        origin.tooltipster('content', data).data('ajax', 'cached');
                    }
                });
            }
        }
    });
});
</script>

Im Glossary Modul muss dazu in der Administration im Tab "Glossary-Link-Optionen" für die Option "Standard-Template für verlinkte Begriffe (wenn nur ein einzelner Begriff angezeigt werden soll)" das Template "simple-HTML-single-term" ausgewählt werden.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#12 15. Dezember 2015 13:00

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Jamman schrieb:

Funktioniert denn die von dir gepostete Scripteinbindung? Wird Glossary aufgerufen und etwas angezeigt?

Nein, ich habe es noch nicht ausprobiert - war einfach so eine Idee wie es theoretisch funktionieren könnte.

@cyberman: Danke für Deine Mühe, aber die Alternative mittels CSS schließt die Möglichkeit der Einbindung von Bilder (derzeit) leider aus sad . Die bräuchte ich aber...

@NaN: Muss ich dann meinen gesuchten Begriff oder meinen gesuchten Begriff samt Erklärung so einschließen ?

NaN schrieb:

Wenn ich die Modulhilfe vom Glossary-Modul richtig verstehe, musst Du nur jeden Inhalt, in dem Du Glossar-Links haben willst, in den Smarty-Tag

{glossary_terms} Begriff {/glossary_terms} 

einschließen. Das Modul durchsucht dann den Inhalt nach Begriffen im Glossar und kennzeichnet sie dann automatisch mit

<abbr class="glossary_term" title="..." id="...">Begriff</abbr>

Man ist so alt, wie man sich fühlt...

Offline

#13 15. Dezember 2015 13:07

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Nein, nicht jeden Begriff einzeln.
Schau doch in die Modulhilfe:

{glossary_terms}{content}{/glossary_terms} 

Klingelt's?
Glossary + Tooltipster + mein kleines Javascript (und das alles pauschal im Seiten-Template) = Allroundhousekick-Lösung wink


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#14 15. Dezember 2015 19:49

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

NaN schrieb:

Nein, nicht jeden Begriff einzeln.
Schau doch in die Modulhilfe:

{glossary_terms}{content}{/glossary_terms} 

Klingelt's?
Glossary + Tooltipster + mein kleines Javascript (und das alles pauschal im Seiten-Template) = Allroundhousekick-Lösung wink

Heißt das , ich kann meinen Inhalt folgendermaßen einschließen

{glossary_terms}
       {content block='Überschrift 1' oneline=true wysiwyg=false assign='Ueberschrift_1'}
       {content block='Spalte_1' assign='Spalte_1'}
       {content block='Überschrift 2' oneline=true wysiwyg=false assign='Ueberschrift_2'}
       {content block='Block 2' assign='Block_2n'}
       {content block='Überschrift 3' oneline=true wysiwyg=false assign='Ueberschrift_3'}
       {content assign='Spalte_3'}
       {content block='Überschrift 4' oneline=true wysiwyg=false assign='Ueberschrift_4'}
       {content block='Spalte 4' assign='Spalte_4'}
{/glossary_terms}

ToolTipster einbinden mit

<link rel="stylesheet" type="text/css" href="{root_url}/uploads/themes/.../css/tooltipster.css" />
   // jQuery habe ich schon eingebunden //
<script type="text/javascript" src="{root_url}/uploads/themes/.../js/jquery.tooltipster.min.js"></script>

Dein JavaScript vor {/literal} setzen und muss dann "nur" noch mein Glossar entsprechend befüllen ? Das wäre ja echt g***  big_smile . Und dabei kann ich dann in der ToolTipster-CSS den Style des Ganzen bestimmen - die Sache nimmt immer mehr Formen an.

Danke Dir, NaN !!!


Man ist so alt, wie man sich fühlt...

Offline

#15 16. Dezember 2015 09:18

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Heißt das [...] ?

Kurz: ja.
Bis auf:

Dein JavaScript vor {/literal} setzen

Nix {literal}.
Einfach so ab ins Template.
Ohne {literal}-Tags drumherum.

Oder zumindest die erste Zeile im Script außerhalb der {literal}-Tags platzieren. Hab da noch das Smarty-Tag {root_url} versteckt wink Das würde sonst ignoriert werden.

Smarty erkennt inzwischen automatisch, dass die geschweiften Klammern im Script keine Smarty-Tags sind, solange da noch Leerzeichen dazwischen sind. ( wie z.B. function foo(){ alert('foo'); } ) Daher sind da jetzt keine {literal}-Tags nötig. Hab das mal an einer Standard-Installation mit den Beispiel-Inhalten getestet. Klappt. Kann aber noch nichts zur Performance sagen.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#16 16. Dezember 2015 14:52

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Hmmm, so ganz klappt das noch nicht - ich habe die ToolTipster-Datei heruntergeladen und lokal entpackt. Dann die CSS-Datei in das Verzeichnis "{root_url}/uploads/themes/.../css/tooltipster.css" geschoben und die JavaScript-Datei in das Verzeichnis "{root_url}/uploads/themes/.../js/jquery.tooltipster.min.js". Den Pfad zur CSS-Datei habe ich im Template mit

<link rel="stylesheet" type="text/css" href="{root_url}/uploads/themes/.../css/tooltipster.css" />

und das Script mit

<script type="text/javascript" src="{root_url}/uploads/themes/.../js/jquery.tooltipster.min.js"></script>

bekannt gemacht. NaN's Script in das Template eingetragen, noch einige Einträge testweise ins 'Glossary' rein und los geht's. Als ich das Ganze ausprobieren wollte, passierte allerdings - nichts... sad , bis mir siedendheiß einfiel, dass ich ja noch die CSS-Datei mit dem Template verknüpfen muss. Dort fiel mir dann auf, dass die CSS-Datei im Backend unter 'Stylesheets' gar nicht gelistet wird - und demzufolge auch nicht verknüpft werden kann. Meine Suche bzgl. des Speicherortes der CSS-Dateien verlief bisher ergebnislos (gesucht habe ich unter

  • {root_url}/lib/jquery/

  • {root_url}/uploads/themes/.../css/

sowie deren Nebenverzeichnisse.
Gibt es ein Standardverzeichnis, in das CMSMS die CSS-Dateien defaultmäßig kopiert ? Ich würde ungern die Möglichkeiten des ToolTipster nur aufgrund meiner Unfähigkeiten aufgeben wollen... cry


Man ist so alt, wie man sich fühlt...

Offline

#17 16. Dezember 2015 15:11

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Hi Dancer,

aber du hast weiter oben in deiner Codezeile angegeben, wo du das CSS gespeichert hast. Da sollte es dann ja auch sein ...
Ein solches CSS belasse ich übrigens gerne im jeweiligen Odner, wo es gebraucht wird. Ich nehme es nie in den Backendeditor sondern bearbeite es extern via NotePad++ und dessen FTP-Möglichkeiten.
Geht bestimmt eleganter, aber ich mach's halt so.

Wenn es nicht läuft, glaube ich eher dass an der JQueryeinbindung was nicht stimmt oder einfach Pfade nicht passen.
Ich hatte NaN's Vorschlag parallel mitgebaut und er läuft gut.

Gruß auch

Offline

#18 16. Dezember 2015 19:53

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Jamman schrieb:

Hi Dancer,

aber du hast weiter oben in deiner Codezeile angegeben, wo du das CSS gespeichert hast. Da sollte es dann ja auch sein ...
Ein solches CSS belasse ich übrigens gerne im jeweiligen Odner, wo es gebraucht wird. Ich nehme es nie in den Backendeditor sondern bearbeite es extern via NotePad++ und dessen FTP-Möglichkeiten.
Geht bestimmt eleganter, aber ich mach's halt so.

Wenn es nicht läuft, glaube ich eher dass an der JQueryeinbindung was nicht stimmt oder einfach Pfade nicht passen.
Ich hatte NaN's Vorschlag parallel mitgebaut und er läuft gut.

Gruß auch

Danke Jamman,
die CSS-Datei lag auch im angegebenen Verzeichnis. Ich habe jetzt mal den Code der CSS-Datei in ein neues Stylesheet kopiert, die Datei entsprechend benannt und mit dem Template verknüpft sowie den (ursprünglichen) Link zur CSS-Datei im Template gelöscht.
Ich habe den Begriff "XYZ", der auch auf einer meiner Seiten vorkommt, ins Glossary eingetragen und gespeichert.
Die Einbindung von jQuery 1.11.1 muss stimmen, da andere Anwendungen, die ebenfalls auf jQuery aufsetzen, problemlos laufen.
Die JavaScript-Datei liegt im selben Verzeichnis, wie die anderen JavaScript-Dateien, die alle problemlos laufen. Allerdings habe ich momentan noch das Problem, dass in der heruntergeladenen Zip-Datei "tooltipster-master" diverse Dateien liegen, die vom Artikel unter http://iamceege.github.io/tooltipster/#getting-started nicht explizit angesprochen werden (z.B. 'tooltipster.jquery.json') und von denen ich jetzt nicht weiß, ob ich sie benötige und falls ja, wohin sie kopiert werden müssen yikes .

Aber ich habe offenbar noch ein Verständnisproblem : werden durch die {gallery_terms}...{/gallery_terms}-Anweisung die Inhalte mit den Einträgen im Gallery-Modul verglichen und entsprechend "markiert" ? Falls ja, wie müsste sich das bemerkbar machen (ich habe ToolTipster bis zu diesem Zeitponkt ja noch gar nicht gesagt, was er wie anzeigen soll) ? Wie wird ToolTipster aktiviert (die Klasse .gallery_term kennt er doch noch gar nicht, oder ?) ?

Ich bin momentan "etwas durch den Wind" ...  hmm

Vielen Dank schon mal im Voraus für die Antworten zu den sicherlich nicht ganz einfachen Fragen.

Beitrag geändert von Dancer62 (17. Dezember 2015 06:10)


Man ist so alt, wie man sich fühlt...

Offline

#19 17. Dezember 2015 08:55

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Du brauchst aus dem ZIP-Archiv nur die JS-Datei "/js/jquery.tooltipster.min.js" und die CSS-Datei "/css/tooltipster.css".

Die CSS-Datei kannst Du in der CMSms-Datenbank speichern (Layout->Stylesheets, neues Stylesheet anlegen, Inhalt der CSS-Datei einfügen, speichern, mit dem Template verknüpfen). Musst Du aber nicht. Geht auch über den direkten Link wie in Deinem ersten Anlauf. (Vor- und Nachteile sollten bekannt sein)

Die JS-Datei musst Du im Template selber verlinken. Achte dabei aber darauf, dass sie nach jQuery eingefügt wird.

ich habe ToolTipster bis zu diesem Zeitponkt ja noch gar nicht gesagt, was er wie anzeigen soll

Hatte ich doch hier erklärt. Jedes Wort im Text, welches mit einem Glossareintrag übereinstimmt, wird mit <abr> umschlossen. Beispiel:

Template schrieb:

{glossary_terms}
... ganz viel Text ...
Hier steht jetzt mal ein Begriff der im Glossar genauer erklärt wird.
... noch mehr Text ...
{/glossary_terms}

Daraus wird dann

HTML im Browser schrieb:

... ganz viel Text ...
Hier steht jetzt mal ein <abbr class="glossary_term" title="..." id="...">Begriff</abbr> der im Glossar genauer erklärt wird.
... noch mehr Text ...

Jeder Begriff ist also über die Klasse "glossary_term" ansprechbar.
Und das kleine Inline-Script von mir sucht sich diese Begriffe anhand dieser Klasse heraus und fügt die Tooltipster-Funktion hinzu:

$('.glossary_term').each(function() { // für jedes Element mit der Klasse glossary_term
    var term_id = (this.id).substr(9);
    $(this).tooltipster({ // tooltipster hinzufügen
    ...

Du musst den Code nicht im Detail verstehen, aber mit ein bissel Englisch sollte klar sein, was da passiert.
Damit die Glossarbegriffe im Text auch optisch hervorgehoben werden, musst Du natürlich im CSS den entsprechenden Style für die Elemente mit der Klasser "glossary_term" hinzufügen.

Z.B.:

.glossary_term {
    text-decoration:underline;
}

Wenn es trotzallem nicht funktioniert, gib uns einen Link.
Dann können wir das selber mal analysieren.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#20 17. Dezember 2015 09:53

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Guten Morgen,

danke Nan, das ist sehr verständlich dargestellt und ich glaube der Hinweis auf die Reihenfolge der Einbindungen ist entscheidend. Da musste ich auch zuerst probieren.

Bei der Text-Decoration habe ich im CSS jetzt mal probehalber ein

[== CSS ==]
.glossary_term {
    border-bottom: 1px dashed #f4571a;
}

gewählt, da man dann die Glossary-Links etwas dezenter hervorheben kann. Nur so als meine Variante ...  wink

Ich habe aber auch noch eine technische Frage: Beim Hover auf den Link erscheint zuerst eine erster Tooltip mit dem Modulnamen, sofern man nicht in Glossary das Tooltipfeld mit Text belegt hat oder im Script

[== Java ==]
content: 'Lade Inhalte...'

oder dergleichen verwendet. Ich denke, das passiert über den -title- des

[== HTML ==]
<abbr class="glossary_term" title="..." id="...">Begriff</abbr>

Kriegt man diesen ersten Tooltip irgendwie deaktiviert? Wahrscheinlich JA ... bitte erleuchte mich/uns!

Danke und Gruß
Jamman

Offline

#21 17. Dezember 2015 10:32

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Kriegt man diesen ersten Tooltip irgendwie deaktiviert?

Nein, nicht direkt.
Irgendwas muss er doch anzeigen.
Dass der Inhalt erst noch geladen werden muss, weiß Tooltipster doch erst, wenn Du mit der Maus darüber gehst. (Anderenfalls hättest Du einen Haufen Ajax-Requests im Hintergrund, unabhängig davon, ob Du die überhaupt brauchst.)

Also steht dort am Anfang entweder der Title aus dem Glossary-Modul oder das, was man im Javascript vorgibt. Und das ist auch wichtig, denn sonst weiß man ja nicht, dass da jetzt gleich was passiert. Instant feedback sozusagen.
(Ich hab dazu mal noch eine entsprechende if-Abfrage ins Javascript eingebaut)


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#22 17. Dezember 2015 10:49

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Okay, danke dir, ich hab's kapiert und es klingt logisch. Außerdem kommt das InstantFeedback ja auch nur beim ersten Aufruf.

Danke auch für das neue Script, das probiere ich gleich mal bei Gelegenheit aus. Ansonsten finde ich diese Verbindung aus Tooltipster/Glossary/NaN-Script mittlerweile eine echt coole Sache, die für mich auch "HowTo"-verdächtig wäre. Das können bestimmt mehr User brauchen! Wär das was?

Für mich "gelöst".

Danke und Gruß
Jamman

Offline

#23 17. Dezember 2015 13:25

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

NaN schrieb:

Du brauchst aus dem ZIP-Archiv nur die JS-Datei "/js/jquery.tooltipster.min.js" und die CSS-Datei "/css/tooltipster.css".

Hab' ich...

NaN schrieb:

Die CSS-Datei kannst Du in der CMSms-Datenbank speichern (Layout->Stylesheets, neues Stylesheet anlegen, Inhalt der CSS-Datei einfügen, speichern, mit dem Template verknüpfen).

Hab' ich auch...

NaN schrieb:

Die JS-Datei musst Du im Template selber verlinken. Achte dabei aber darauf, dass sie nach jQuery eingefügt wird.

Ich habe sie mittels

<script type="text/javascript" src="{root_url}/uploads/themes/firefighter/js/jquery-1.11.1.min.js" ></script>
    .
    .
    .
<script type="text/javascript" src="{root_url}/uploads/themes/firefighter/js/jquery.tooltipster.min.js" ></script>

verlinkt...

Dancer schrieb:

ich habe ToolTipster bis zu diesem Zeitpunkt ja noch gar nicht gesagt, was er wie anzeigen soll

NaN schrieb:

Hatte ich doch hier erklärt. Jedes Wort im Text, welches mit einem Glossareintrag übereinstimmt, wird mit <abbr> umschlossen. Beispiel:

Template schrieb:

{glossary_terms}
... ganz viel Text ...
Hier steht jetzt mal ein Begriff der im Glossar genauer erklärt wird.
... noch mehr Text ...
{/glossary_terms}

Daraus wird dann

HTML im Browser schrieb:

... ganz viel Text ...
Hier steht jetzt mal ein <abbr class="glossary_term" title="..." id="...">Begriff</abbr> der im Glossar genauer erklärt wird.
... noch mehr Text ...

Jeder Begriff ist also über die Klasse "glossary_term" ansprechbar.
Und das kleine Inline-Script von mir sucht sich diese Begriffe anhand dieser Klasse heraus und fügt die Tooltipster-Funktion hinzu:

$('.glossary_term').each(function() { // für jedes Element mit der Klasse glossary_term
    var term_id = (this.id).substr(9);
    $(this).tooltipster({ // tooltipster hinzufügen
    ...

Hab' ich verstanden...

NaN schrieb:

Damit die Glossarbegriffe im Text auch optisch hervorgehoben werden, musst Du natürlich im CSS den entsprechenden Style für die Elemente mit der Klasse "glossary_term" hinzufügen.

Z.B.:

.glossary_term {
    text-decoration:underline;
}

Hab' ich gemacht (okay, ich habe das Beispiel von Jamman genommen - es gefiel mir irgendwie besser wink )

NaN schrieb:

Wenn es trotzallem nicht funktioniert, gib uns einen Link.
Dann können wir das selber mal analysieren.

Es funktioniert trotz allem irgendwie nicht. Anscheinend bin ich zu blöd, Anweisungen zu befolgen (oder ich habe doch irgendetwas übersehen). Der Link zu einer meiner Seiten (der im Glossar kurz beschriebene Begriff lautet "Tanklöschfahrzeug").

Ich benutze übrigens zwei (minimal) unterschiedliche Templates, die sich im Wesentlichen nur in der Anzahl der verwendeten {content}-Blöcke unterscheiden. Im ersten Template habe ich probehalber um jeden der ersten {content}-Blöcke (die auch den gesuchten Begriff beinhalten) die {gallery_terms}...{/gallery_terms}-Anweisung gelegt, im zweiten Template nur eine {gallery_terms}...{/gallery_terms}-Anweisung um alle {content}-Blöcke.

Ach so, als Bezeichnung für den Titel in Deiner if-Abfrage habe ich "Glossar / Wörterbuch / FAQ" angegeben (so wird mir das Glossar im Backend angezeigt).


Man ist so alt, wie man sich fühlt...

Offline

#24 17. Dezember 2015 13:42

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Sieht soweit alls richtig aus.

Zum Tanklöschfahrzeug: im HTML Quelltext steht "Tankl&ouml;schfahrzeug"
(EDIT: Nee doch nicht. Wurde nur im Firebug so angezeigt.)

Wenn Du im Glossary-Modul ohne WYSIWYG Editor arbeitest und nur "Tanklöschfahrzeug" als Begriff hinzufügst, dann findet Glossary den Begriff nicht. Also entweder dafür sorgen, dass im Inhalt Umlaute stehen, oder Umlaute auch im Glossary-Modul als &...uml; schreiben.

Was scheinbar funktioniert: DDR
Zumindest steht es als <abbr> im HTML Code.
Allerdings fehlt die CSS-Klasse "glossary_term" und die ID des Glossareintrags.
Daher gehe ich mal davon aus, dass dieses <abbr> nicht vom Glossary-Modul kommt.
Oder Du verwendest eine andere Modul-Version.
Ich habs jetzt nur mit der Version 1.0 probiert.

EDIT:

Wäre evtl. auch ein Feature-Request fürs Glossary-Modul. Also nicht einfach 1:1 nach dem Begriff suchen, sondern entweder den zu durchsuchenden Text erstmal mit htmlspecialchars_decode() in reine Buchstaben umwandeln. Oder umgekehrt nach beiden Versionen im Text suchen. (müsste man mal testen, was performanter ist)

Beitrag geändert von NaN (17. Dezember 2015 14:05)


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#25 17. Dezember 2015 14:01

Jamman
Server-Pate
Ort: Greimerath
Registriert: 21. März 2013
Beiträge: 98

Re: [GELÖST] Begriffe (automatisch?) mit dem Glossar verlinken

Bei mir ist es auch die Version 1.0, mit der alles gut läuft.

Vielleicht dann noch eine Idee ... weil mir Dancer's Ansicht mit dem ? am Cursor bekannt vorkommt...   glasses
Ich habe die Scriptcalls incl. dem JQuery-Aufruf nicht im Head sondern unten im Body eingebaut. Das machte bei mir (und nicht zum 1. Mal) einen Unterschied. Check das doch mal bitte noch.

Gruß
Jamman

Offline