Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Das neue Template Xobor (v6).
»
Themen, Titel, Pfad und Activity Feeds mit Überlauf - Teil 1-3 → Überschriften mit Überlänge stören den Platz des Beitragsdatums
Überschriften mit Überlänge - Themen-Überschrift und Beitragstitel mit Überlauf - Teil 1!
Es kommt vor, dass die Themen-Überschrift und der Beitragstitel ungewöhnliche Längen erreichen. Auffällig wird es bei den Beitragstiteln. Hier muss sich der Titel mit dem Beitragsdatum und im Gaia noch mit anderen Links den Platz teilen! Besonders unschön ist das auch in der mobilen Anzeige. Hier werden die Überschriften und Titel, finde ich, in zu vielen Reihen angezeigt!
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 7+19 funktioniert das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile!
Pfadangaben und Activity Feeds mit Überlauf - Teil 2!
Die Themen-Überschriften und Beitragstitel spiegeln sich in den Pfaden und im Activity Feed wieder. Auch hier ist es dann von Vorteil einen Überlauf einzubauen! Besonders gut wirkt sich der Überlauf mobil aus, denn hier wird die Übersicht beibehalten und nicht durch unzählige Zeilen gestört! Damit keine Informationen verloren gehen, wird in der Desktop-Version per "Mouseover" und einem Tooltipp, der komplette Inhalt angezeigt. Auf den mobilen Endgeräten funktioniert das, hier allerdings mit einem Klick. Beim ersten Klick wird der Inhalt über den doch ansehnliche "Bootstrap-Tooltipp" wiedergegeben! Ein weiterer Klick auf die Verlinkung führt zum Ziel!
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 6+40 funktioniert das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile!
Über Zeile 2 kann die Länge des Tooltipps eingestellt werden!
Die Länge des Überlaufs kann über Zeile 12 in der mobilen Version und über Zeile 14 in der Desktop-Version bestimmt werden!
In Zeile 22 kann der Hinweistext für Verlinkungen angepasst werden!
<script> window.addEventListener('load', function ( ) { function isMobile() { return $(window).width() < 768; }
if (isMobile()) { var maxTitleLength = 34; // Länge Überlauf Mobil }else { var maxTitleLength = 60; // Länge Überlauf Desktop }
$('.actinfo a, .breadcrumb-item a, .breadcrumb-item.active').each(function() { var text = $(this).text(); if (text.length > maxTitleLength) { if (!$(this).hasClass('active')) { text = text+'<br><i><small>Mit einem Klick mehr anzeigen!</small></i>'; // Hinweistext bei Verlinkungen $(this).addClass("disabledLink").attr('data-html', 'true'); } $(this).attr('title', text).text(text.substr(0, maxTitleLength) + " ...").tooltip(); } });
if (isMobile()) { var clickedDisabledLink = false; $('.disabledLink').on('click', function(e) { if (!clickedDisabledLink || clickedDisabledLink != this) { e.preventDefault(); e.stopPropagation(); clickedDisabledLink = this; } }); };
XXL - Länge für Überlauf einstellbar, mit Überlauf-Button - Teil 3 Aktualisiert 31.05.21
Möchte man viele Bereiche mit Text-Überlauf einrichten, ist es notwendig und gut, die Längen anzupassen! Schaut man sich die Überschriften an, kann der Text, weil er über die ganze Seite geht, groß ausfallen, im Activity Feed (AF) und im "Last Thread" eher klein! In der mobilen Ansicht ist ein verhältnismäßiges Kürzen von Vorteil! Die folgende Lösung ist mit Überläufen in dreifacher Form gestuft, in der mobilen und in der Desktop-Ansicht! Ist eine Überschrift oder ein Text gekürzt, findet man am Ende 3 Punkte. Fährt man mit der Maus darüber, erscheint der komplette Text als Bootstrap-Tooltipp. In der mobilen Version ist das durch Antippen möglich! Handelt es sich um eine Verlinkung, kann man sich beim ersten Antippen den kompletten Text ansehen und beim zweiten Antippen geht es zum Link-Ziel.
Folgende Bereiche sind mit Überläufen ausgestattet:
Überlauf XXL mit Überlauf-Button zum Ein- und Ausschalten!
Überlauf XXL mit Überlauf-Button zum Ein- und Ausschalten!
Forum-Kategorie, Forum-Thema, Titel "Letzter Beitrag" mit Überlauf XXL
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 23+81 funktioniert das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile!
Über Zeile 4 kann die Länge des Tooltipps eingestellt werden! Durch das Freigeben der Zeile 5-9 kann das Aussehen des Tooltipp angepasst werden. Werden in Zeile 19 die Kommentierungszeichen am Anfang und am Ende entfernt, wird der Tooltipp ohne Pfeil angezeigt! Über Zeile 14-17 kann die Farbe des Tooltipppfeils gesondert angepasst werden!
In Zeile 47 kann der Hinweistext für Verlinkungen angepasst werden!
Die Länge des Überlaufs kann über die Zeilen 31-33 in der mobilen Version und über die Zeile 36-38 in der Desktop-Version bestimmt werden!
Die Zeile 63-65 beinhalten die Bereiche für den Überlauf! In Zeile 63 finden man die Bereiche mit Überlauflänge 1, in Zeile 64 mit Überlauflänge 2 und in Zeile 65 mit Überlauflänge 3 wieder!
Das Skript 1, der Überlauf-Button, wird als Plugin nach "Forum Übersicht - footer" oder "Forum Übersicht - header" kopiert! Der Button wird dadurch unterhalb oder auch oberhalb von der Forum-Übersicht platziert! Wichtig! Beim Anlegen des Plugins ist darauf zu achten, dass unter "Unterstützte Templates" nur "Mobile - Template (177)" angeklickt wird und grau hinterlegt ist!
In Zeile 7 kann der Beschreibungstext angepasst werden!
1 2 3 4 5 6 7 8 9
<div id="cat_999" class="card mb-4 cat mb-3 fadeIn expanded"> <div class="card-header clearfix"> <span class="float-right cattoggler overflow_click"> <a class="catexpand" data-catid="999"><span class="overflow_show form-control btn btn-warning">Ausgeschaltet <span class="xob xob-angle-down"></span> </span></a> <a class="catcompress" data-catid="999"><span class="overflow_hide form-control btn btn-primary">Eingeschaltet <span class="xob xob-angle-up text-white"></span> </span></a> </span> <h5 class="card-title">Text-Überlauf</h5><small class="card-expl">Der Text-Überlauf sorgt für eine Übersichtliche Struktur und verhindert mehrzeilige lange Titel und Überschriften!</small> </div> </div>
Skript 2 wird als Plugin in "Untere Leiste - header" kopiert!
Über Zeile 4 kann die Länge des Tooltipps eingestellt werden! Durch das Freigeben der Zeile 5-9 kann das Aussehen des Tooltipp angepasst werden. Werden in Zeile 19 die Kommentierungszeichen am Anfang und am Ende entfernt, wird der Tooltipp ohne Pfeil angezeigt! Über Zeile 14-17 kann die Farbe des Tooltipppfeils gesondert angepasst werden!
In Zeile 47 kann der Hinweistext für Verlinkungen angepasst werden!
Die Länge des Überlaufs kann über die Zeilen 31-33 in der mobilen Version und über die Zeile 36-38 in der Desktop-Version bestimmt werden!
Die Zeile 67-69 beinhalten die Bereiche für den Überlauf! In Zeile 67 finden man die Bereiche mit Überlauflänge 1, in Zeile 68 mit Überlänge 2 und in Zeile 89 mit Überlänge 3 wieder!