#1 Themen, Titel, Pfad und Activity Feeds mit Überlauf - Teil 1-3 → Es kommt vor, dass die Überschriften ungewöhnliche Längen erreichen und sich mit Beitragsdatum anderen Links den Platz teilen müssen! von Wolfgang 25.04.2021 09:57

avatar

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!

  • Eine Lösung wäre ein Überlauf!
  • Das Ende der Überschrift wird dann mit den berühmten drei Punkten angezeigt!
  • Nach einem Klick auf die Überschrift wird dann der ganze Inhalt angezeigt und keine Informationen gehen verloren!
  • Wichtig! Soll der Beitragstitel immer angezeigt werden, muss hierfür die Option unter "Admin > Layout > Farben & Einstellungen > Optionen > Beitragstitel immer anzeigen" auf "ja" stehen!



Installation fürs Xobor (v6)























  • 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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<style>
.card-title .ttitle, .ttitle h3 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right:20px; cursor:pointer;}
.toggleTitel {white-space: normal !important; overflow:visible !important; text-overflow:clip !important;}
</style>

<script>
window.addEventListener('load', function(){
 
$(document.body).on('click', ".card-title", function(e) {
e.preventDefault();
$('.ttitle',this).toggleClass('toggleTitel');
});
 
$(document.body).on('click', "div.ttitle", function(e) {
e.preventDefault();
$('h3',this).toggleClass('toggleTitel');
});
 
})
</script>
 






Thema im Support: Themen-Überschrift







Wolfgang

#2 RE: Themen, Titel, Pfad und Activity Feeds mit Überlauf - Teil 1-3! von Wolfgang 28.04.2021 17:39

avatar

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!

Installation fürs Xobor (v6) & Mobil






















  • 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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<style>
.tooltip-inner {max-width: 290px !important;}
</style>

<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) + "&nbsp;...").tooltip();
}
});

 
if (isMobile()) {
var clickedDisabledLink = false;
$('.disabledLink').on('click', function(e) {
if (!clickedDisabledLink || clickedDisabledLink != this) {
e.preventDefault();
e.stopPropagation();
clickedDisabledLink = this;
}
});
};
 
});
</script>
 




Spoiler mit einem Klick öffnen und schließen!


Thema im Support: Themen-Überschrift







Bis dann und besten Dank an Creator für seine unermüdliche Unterstützung!
Wolfgang

#3 XXL - Länge für Überlauf einstellbar, mit Überlauf-Button - Teil 3 von Wolfgang 24.05.2021 09:09

avatar

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.

Neu! Mit dem Überlauf-Button kann die Überlauf-Funktion dauerhaft ein- und ausgeschaltet werden!
Vorteilhaft kann es sein, die Überlauffunktion z.B. in der Desktop-Ansicht auszuschalten, um die maximale Länge eines Titel oder die einer Überschrift sofort zu sehen.
Will man eine Vielzahl von Zeilenumbrüchen in der mobilen Ansicht vermeiden, ist es eher ratsam den Überlauf eingeschaltet zu lassen!


Folgende Bereiche sind mit Überläufen ausgestattet:

  • Kategorien-Titel
  • Foren-Titel
  • Themen-Titel
  • Beitragstitel
  • Überschrift
  • Activity Feed
  • Die Pfade
  • Last-Thread
  • Bildergalerie: Album-Titel







Installation - Xobor (v6) & Mobil
(In Zusammenarbeit mit Creator)






























  • 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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<style>
/**** Format Tooltipp ****/
.tooltip > .tooltip-inner {
max-width: 290px !important;
/* border-radius:5px; */
/* font-size:13px !important; */
/* background-color: #2f6483; */
/* color: #ffffff; */
/* padding:10px; */
}
 
/**** Pfeilfarbe Tooltipp ****/
/*
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {border-top-color: #2f6483 !important;}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {border-right-color: #2f6483 !important;}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {border-bottom-color: #2f6483 !important;}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {border-left-color: #2f6483 !important;}
*/
/* .arrow::before {border: none !important} */
</style>

<script>
window.addEventListener('load', function ( ) {
// Mobil-Funktion
function isMobile() {
return $(window).width() < 768;
};
 
if (isMobile()) {
// Mobil - Überlauflänge
var maxTitleLength_1 = 45 // Länge Überlauf Kategorien-Titel + Foren-Titel + Themen-Titel + Beitragstitel + Überschrift + Album-Titel
var maxTitleLength_2 = 40 // Länge Überlauf AF
var maxTitleLength_3 = 30 // Länge Überlauf Pfad + Last-Titel
} else {
// Desktop - Überlauflänge
var maxTitleLength_1 = 75 // Länge Länge Überlauf Kategorien-Titel + Foren-Titel + Themen-Titel + Beitragstitel + Überschrift + Album-Titel
var maxTitleLength_2 = 60 // Länge Überlauf AF
var maxTitleLength_3 = 30 // Länge Überlauf Pfad + Last-Titel
};
// Für Links mit Hinweistext
function shorten(selector, maxLength) {
$(selector).each(function() {
var text = $(this).html();
if (text.length > maxLength) {
$(this).addClass('disabledLink red-tooltip');
if ($(this).attr('href')){
var textt = text +'<br><i><small>Mit einem Klick gehts weiter!</small></i>'; // Hinweistext bei Verlinkungen
}else{
var textt = $(this).text();
};
// Überlauf und Tooltipp
$(this).attr({'title': textt, 'data-html':'true'}).html(text.substr(0, maxLength) + "&nbsp;... ");
// Für Tooltipps ohne Verlinkung
if (isMobile()) {
$(this).tooltip({trigger: 'click'});
} else {
$(this).tooltip();
};
};
});
};
// Bereiche mit Überlauf
shorten('.ttitle a span, .card-header span.ttitle,.firstrow .ttitle.mt-2,.cat .card-header h5.card-title, .ftitle a, h3.page-header small', maxTitleLength_1);
shorten('.actinfo a', maxTitleLength_2);
shorten('.breadcrumb-item a:nth(1),.breadcrumb-item a:nth(2),.breadcrumb-item.active,.lasttitle a', maxTitleLength_3);
 
// Zweifach-Klick Mobil
if (isMobile()) {
var clickedDisabledLink = false;
$('.disabledLink').on('click', function(e) {
if (!clickedDisabledLink || clickedDisabledLink != this) {
e.preventDefault();
e.stopPropagation();
clickedDisabledLink = this;
};
});
};

});
</script>
 




  • Skript 1+2 müssen installiert werden!


  • Das Skript 1, der Überlauf-Button, wird als PIugin 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 PI's 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 PIugin 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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<style>
/**** Format Tooltipp ****/
.tooltip > .tooltip-inner {
max-width: 290px !important;
/* border-radius:5px; */
/* font-size:13px !important; */
/* background-color: #2f6483; */
/* color: #ffffff; */
/* padding:10px; */
}
 
/**** Pfeilfarbe Tooltipp ****/
/*
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {border-top-color: #2f6483 !important;}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {border-right-color: #2f6483 !important;}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {border-bottom-color: #2f6483 !important;}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {border-left-color: #2f6483 !important;}
*/
/* .arrow::before {border: none !important} */
</style>

<script>
window.addEventListener('load', function ( ) {
// Mobil-Funktion
function isMobile() {
return $(window).width() < 768;
};
 
if (isMobile()) {
// Mobil - Überlauflänge
var maxTitleLength_1 = 45 // Länge Überlauf Kategorien-Titel + Foren-Titel + Themen-Titel + Beitragstitel + Überschrift + Album-Titel
var maxTitleLength_2 = 40 // Länge Überlauf AF
var maxTitleLength_3 = 30 // Länge Überlauf Pfad + Last-Titel
} else {
// Desktop - Überlauflänge
var maxTitleLength_1 = 75 // Länge Länge Überlauf Kategorien-Titel + Foren-Titel + Themen-Titel + Beitragstitel + Überschrift + Album-Titel
var maxTitleLength_2 = 60 // Länge Überlauf AF
var maxTitleLength_3 = 30 // Länge Überlauf Pfad + Last-Titel
};
// Für Links mit Hinweistext
function shorten(selector, maxLength) {
$(selector).each(function() {
var text = $(this).html();
if (text.length > maxLength) {
$(this).addClass('disabledLink red-tooltip');
if ($(this).attr('href')){
var textt = text +'<br><i><small>Mit einem Klick gehts weiter!</small></i>'; // Hinweistext bei Verlinkungen
}else{
var textt = $(this).text();
};
// Überlauf und Tooltipp
$(this).attr({'title': textt, 'data-html':'true'}).html(text.substr(0, maxLength) + "&nbsp;... ");
// Für Tooltipps ohne Verlinkung
if (isMobile()) {
$(this).tooltip({trigger: 'click'});
} else {
$(this).tooltip();
};
};
});
};
// Bereiche mit Überlauf
function overflow() {
var hidden_cats;
hidden_cats = xobor.cookie.get('cats_h') ? xobor.cookie.get('cats_h').split(",") : [];
if (!hidden_cats.includes("999") ){
shorten('.ttitle a span, .card-header span.ttitle,.firstrow .ttitle.mt-2,.cat .card-header h5.card-title, .ftitle a, h3.page-header small', maxTitleLength_1);
shorten('.actinfo a', maxTitleLength_2);
shorten('.breadcrumb-item a:nth(1),.breadcrumb-item a:nth(2),.breadcrumb-item.active,.lasttitle a', maxTitleLength_3);
};
};
overflow();
// Laden der Überlauf-Funktion
$('.overflow_click').click(function() {
overflow();
});
$('.overflow_hide').click(function() {
location.reload()
});
 
// Zweifach-Klick Mobil
if (isMobile()) {
var clickedDisabledLink = false;
$('.disabledLink').on('click', function(e) {
if (!clickedDisabledLink || clickedDisabledLink != this) {
e.preventDefault();
e.stopPropagation();
clickedDisabledLink = this;
};
});
};

});
</script>
 



Spoiler mit einem Klick öffnen und schließen!


Thema im Support: Themen-Überschrift






Bis dann
Wolfgang

Foren Spende
Hallo !

Wir hoffen, dass dir unser Forum gefällt und du dich hier genauso wohlfühlst wie wir.

Wenn du uns bei der Erhaltung des Forums unterstützen möchtest, kannst du mit Hilfe einer kleinen Spende dazu beitragen, den weiteren Betrieb zu finanzieren.

Deine Spende hilft!

Spendenziel: 42€
122%
 


Xobor Forum Software von Xobor