[3.2] Latte - Counter Badge

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Antworten
Benutzeravatar
Neverlands
Mitglied
Beiträge: 16
Registriert: 11.12.2003 13:15
Wohnort: Wien
Kontaktdaten:

[3.2] Latte - Counter Badge

Beitrag von Neverlands »

Hallo,

ich verwende das Theme Latte.
Forum: Pendragon

Ich möchte für einen Navigations-Tab einen Counter anzeigen, der genauso wie z.B. der Private Messages Counter aussehen soll:
[ externes Bild ]

Die Zahl (".bubble" Span) für den Counter lade ich über die overall_header.html von einer, in das Forum integrierten Software EQDKP-PLUS, in den ".counter.auction-count" Span der navbar_header.html:

Code: Alles auswählen

<script> 
	$(function (){
	  $(".auction-count").load("/eqdkp_plus/Guildbank.html .bubble");
	});
</script>
So sieht das Ergebnis der navbar_header.html aus:

Code: Alles auswählen

<li class="tab auktionen responsive-hide non-zero selected" data-responsive-class="small-icon icon-gavel" data-select-match="auktionen" data-responsive-index="-1">
	<a class="nav-link" href="/auktionen">Auktionen</a>
	<strong>
		<span class="counter auction-count"><span class="bubble">1</span></span>
		<span class="arrow"></span>
	</strong>
</li>
Leider wird der Counter auf diese Weise auch dann angezeigt, wenn die Zahl 0 ist.

Meine Frage ist, wie ich für die jeweilige Zahl aus dem ".bubble" Span eine "Variable" erstellen kann, die ich konform zu {PRIVATE_MESSAGE_COUNT} verwenden könnte:
navbar_header.html

Code: Alles auswählen

<li class="tab pm<!-- IF PRIVATE_MESSAGE_COUNT > 0 --> non-zero<!-- ENDIF -->" data-skip-responsive="true" data-select-match="pm">
	<a class="nav-link" href="{U_PRIVATEMSGS}" role="menuitem">{L_PRIVATE_MESSAGES}</a>
	<strong>
		<span class="counter">{PRIVATE_MESSAGE_COUNT}</span>
		<span class="arrow"></span>
	</strong>
</li>
Also beispielsweise so:

Code: Alles auswählen

<li class="tab auktionen responsive-hide<!-- IF AUCTION_COUNT > 0 --> non-zero<!-- ENDIF --> selected" data-responsive-class="small-icon icon-gavel" data-select-match="auktionen" data-responsive-index="-1">
	<a class="nav-link" href="/auktionen">Auktionen</a>
	<strong>
		<span class="counter auction-count"><span class="bubble">{AUCTION_COUNT}</span></span>
		<span class="arrow"></span>
	</strong>
</li>
Ich habe es auch schon mit JS in der overall_header.html versucht (".non-zero" Klasse entfernen, wenn ".bubble" Zahl = 0) aber das funktioniert nur mit fiddle, nicht im Forum selbst:

Code: Alles auswählen

<script> 
$( document ).ready(function() {
	var value = document.getElementsByClassName("bubble").innerHTML == "0";
		if (!value) {
			alert( "Test ist mindestens 1" );
		$('li.auktionen').removeAttr("title");
		} else {
			alert( "Count value is 0!" );
			$('li.auktionen > strong').remove();
			$('li.auktionen').removeClass('non-zero').removeAttr("title");
	}
});
</script>
oder

Code: Alles auswählen

<script> 
$( document ).ready(function() {
	var value = $('.bubble').text() == "0";
		if (!value) {
			alert( "Test ist mindestens 1" );
		$('li.auktionen').removeAttr("title");
		} else {
			alert( "Count value is 0!" );
			$('li.auktionen > strong').remove();
			$('li.auktionen').removeClass('non-zero').removeAttr("title");
	}
});
</script>
Leider bin ich kein Profi und stehe nun komplett an. Habt ihr einen Tip für mich?

Liebe Grüße,
Neverlands
Antworten

Zurück zu „Styles, Templates und Grafiken“