#1 Grafik in der Userbox wechselt der Neuigkeiten entsprechend von Wolfgang 12.10.2013 13:43

avatar

Hallo Florian,
es währe super, wenn die Userbox bei Neuigkeiten die passende Grafik blinkend anzeigen würde.
Ich habe einige Versuche schon gestartet. Es funktioniert, soweit nur eine Neuigkeit ansteht. Stehen mehrere Neuigkeiten an, werden dann auch alle Grafiken angezeigt.

Vielleicht kann man es so gestalten, dass, wenn mehrere Neuigkeiten anstehen, die Grafik nacheinander angezeigt werden. Währe doch super!

Hier mein Ansatz:
Änderungen in "Obere Leiste".

<li id="global-news-li" {{news==true.start}} class="news" {{news==true.end}} style="padding:4px 8px;"> 
<a href="#" class="global-news-link">
{{news==true.start}}

{{user_newmail==true.start}}<img src="{{global_mail_news}}" class="blinker"/>{{user_newmail==true.end}}
{{calendar_new==true.start}}<img src="{{global_calendar_news}}" class="blinker"/>{{calendar_new==true.end}}
{{gallery_new==true.start}}<img src="{{global_gallery_news}}" class="blinker"/>{{gallery_new==true.end}}
{{blog_new==true.start}}<img src="{{global_blog_news}}" class="blinker"/>{{blog_new==true.end}}
{{user_newgbook==true.start}}<img src="{{global_comment_new}}" class="blinker"/>{{user_newgbook==true.end}}
{{admininfo_user_requests==true.start}}<img src="{{global_user_news}}" class="blinker"/>{{admininfo_user_requests==true.end}}

{{news==true.end}}
<strong>{{user_name}}</strong>
<img src="{{global_imageserver}}svg-object_navsub-color1_{{global_nav_fontcolor|urlencode}}-color2_{{global_nav_fontcolor|urlencode}}-color3_FFF.png" alt="" class='dwn' />
</a>

*
*
*
</li>



Hast Du da eine Idee?
Geht das eigentlich ohne großen Aufwand?




Bis dann
Wolfgang

#2 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von florian-zier 12.10.2013 21:42

avatar

Hallo Wolfgang,
für dein Vorgaben musst du noch die bestehende Funktion newsblink() erweitern. Entferne vorher aber die Klasse ".blinker" von den neu hinzugefügten Bildern.

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
 
function newsblink() {
/* Neuigkeiten Icons */
var $ch_list = $('.global-news-link img');
if ($ch_list.filter('.active').length > 0) {
var $activeItem = $ch_list.filter('.active');
$activeItem.removeClass('active');
if ($activeItem.next('img').length > 0) {
$activeItem.next('img').addClass('active');
}
else {
$ch_list.filter(':first').addClass('active');
}
}
else {
$ch_list.filter(':first').addClass('active');
}
$ch_list.not('.active').css('display', 'none');
$ch_list.filter('.active').css('display', 'inline');
/* /Neuigkeiten Icons */
 
$el_list = $('.blinker');
$.each($el_list, function(index, value) {
if($(this).css('visibility') == 'visible') {
$(this).css('visibility', 'hidden');
}
else {
$(this).css('visibility', 'visible');
}
});
}
 



Bei jedem Aufruf der Funktion wird das angezeigte Bild aus- und das jeweils nächste eingeblendet. Da diese Funktion bisher bereits immer wieder aufgerufen wird, um die Icons innerhalb des Menüs (un)sichtbar zu schalten, folgt der Wechsel zwischen den neuen Icons dem gleichen Takt.

#3 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von Wolfgang 17.10.2013 23:26

avatar

Hallo Florian,
tolle Funktion, funktioniert auf Anhieb!!!
Wird immer besser!

Der Wechsel findet im Augenblick mit doppelter Geschwindigkeit statt.
Frage: Kann man die Geschwindigkeit ohne großen Aufwand dem normalen Blinken anpassen?

PS: Der Blink-Zeit ist wohl von Browser zu Browser unterschiedlich.




Nachtrag:
Ich habe da eine Lösung gefunden. Ich hoffe, dass sich die Scripte und Takte nicht stören.
Wenn man die Klasse class="blinker" nicht entfernt, wird im gleichen Rhythmus gewechselt.
Kann man dass so machen ? Spricht etwas dagegen?


Besten Dank
Wolfgang

#4 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von florian-zier 18.10.2013 21:56

avatar

Hallo Wolgang,
schön, dass es dir gefällt. Ich hatte zum Glück gerade eine Benachrichtigung zur Vefügung. Hatte mir schon überlegt, wie ich noch ein zusätzliches Icon bekomme, aber das kam dann kurz darauf auch noch hinzu (wegen Blog-Eintrag oder so).

Wenn du die Geschwindigkeit mit deiner Methode erfolgreich manipulieren kannst, dann spricht natürlich nichts dagegen. Da der Blinker nur die Sichtbarkeit umschaltet, hat er mir im Prinzip nichts genützt. Bei zwei oder mehreren Icons würden sie zwar unsichtbar, aber nicht an der gleichen Position abwechseln. Bei Verwendung von display verschwinden die Icons komplett, sodass andere an ihre Position rücken können.

Die Taktlänge habe ich evtl. etwas verwirrend beschrieben. Die Icons wechseln, sobald die im Menü aus- oder auch wieder eingeblendet werden. Du musst also keinen ganzen Zyklus warten (kompletter Durchlauf mit Ein- und Ausblenden).

#5 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von Wolfgang 19.10.2013 05:51

avatar

Hallo Florian,
es tritt noch ein kleiner Nebeneffekt auf.
Habe ich 6 Meldungen, erscheinen 6 Grafiken schön aufgereiht, für einen Blinkintervall und ordnen sich erst dann an.
Kann man die Grafiken für den ersten Takt ausblenden?

#6 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von florian-zier 19.10.2013 18:18

avatar

Hallo Wolfgang,
da das Skript immer wieder die display-Eigenschaft ändert, sollte es kein Problem sein, diese anfänglich auf none zu setzen. Ob per CSS-Anweisung oder Style-Tag sollte eigentlich egal sein. Dann sollte es initial ausgeblendet sein.

#7 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von Wolfgang 21.10.2013 22:45

avatar

Ja, dass hatte ich dann später auch mal ausprobiert. Funktioniert wirklich perfekt.

#8 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von Wolfgang 26.10.2013 00:04

avatar

Ich muss nochmal nachfragen.

Kann man das Script noch so erweitern, dass, wenn nur ein Ereignis ansteht die Grafik blinkt?

#9 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von florian-zier 26.10.2013 12:50

avatar

Hmm, theoretisch müsste es doch eigentlich bereits blinken. Aber wenn du die Anzahl der Ereignisse zählst, dann könntest du meine Skript-Ergänzung auch in eine IF-Anweisung packen. Sie wird dann nur ausgeführt, wenn die Anzahl der Ereignisse >1.

Vor der Funktion newsblink():

1
2
3
4
5
6
 
<script type="text/javascript">
var newsLength = 0;
{{user_newmail==true.start}}newsLength++;{{user_newmail==true.end}}
{{calendar_new==true.start}}newsLength++;{{calendar_new==true.end}}
[…]
</script>
 



Die Ergänzung zum Wechseln der Icons nur bedingt durchführen:

1
2
3
4
5
 
	/* Neuigkeiten Icons */
if (newsLength > 1) {
[…]
}
/* /Neuigkeiten Icons */
 



Die Klasse .blinker hast du ja noch vergeben, daher sollte es ohne Ausführung der Ergänzung wieder wie vorher funktionieren als alles einfach nur geblinkt hat.

#10 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von Wolfgang 29.10.2013 23:13

avatar

Hallo Florian,
irgendwie haut es noch nicht hin.
Ich hatte vergessen zu erwähnen, dass, wenn man class="blinker" einsetzt, der Effekt eintritt, den Du beschrieben hast.
Bei 4 Neuigkeiten z.B., was auch sehr selten vorkommt, werden nur 2 angezeigt.

#11 RE: Grafik in der Userbox wechselt der Neuigkeiten entsprechend von florian-zier 01.11.2013 18:15

avatar

Hallo Wolfgang,
ich habe nun eine extra Testdatei dafür angelegt. Anders wäre es sonst immer sehr schwer zu testen und so sieht man auch nur die relevanten Teile.

Die Icons sind nun initial ausgeblendet und gewechselt wird nun erst nach einem Zyklus, nicht mehr bei jedem Takt bzw. Aufruf. Beachte, dass ich die Icons jetzt in einen Container (newsIconContainer) gepackt habe. Wäre evtl. nicht zwingend nötig, aber so gibt es keine Probleme, wenn noch andere Bilder vor oder nach dem Usernamen angezeigt werden. Dadurch wird das Skript nur auf die NewsIcons angewendet.

Sollte nur ein einziges Icon vorhanden sein, wird es automatisch in einen normaler Blinker umgewandelt. Du musst die Klasse blinker also auch nicht vorher manuell setzen, das wird vom Skript erledigt.

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz