#1 Begrüßung nach dem Login von Wolfgang 01.05.2013 18:29

avatar

Hallo Florian,
ich habe das Script eingebaut, dass eine Begrüßung nach dem Login anzeigt.
Dieses Script funktioniert wunderbar im Standard-Template über den Login-Button.
Im Gaja-Template gibt es noch eine direkte Login-Eingabe (siehe Anhang). Hier funktioniert das Script nicht mehr.
Läßt sich da etwas machen?


<style type="text/css">
.success {
z-index:4;
position: absolute;
top:250px; /*Position vom oberen Bildrand*/
width:600px; /*Breite der Begrüßung*/
padding:20px;padding-bottom:20px; /*Ausrichtung der Schrift*/
background-image:url(http://www.bilder-hochladen.net/files/1tys-rd-d240.png); /*Hintergrundbild*/
background-color:#D0D0D0;
color:#000000; /*Schriftfarbe*/
font-size:16px; /*Schriftgröße*/
border:2px ridge #000000; /*Rand*/
border-radius:20px; /*Rundung der Ecken*/
text-align:center; /*Zentrierung der Schrift*/
}
</style>

<script type="text/javascript" language="javascript">
function successLogin(){
document.getElementById('successLogin').style.display='none';
}
if(document.referrer=='http://104774.homepagemodules.de/login.php') {
document.write('<center><table width="100%" cellspacing="0" cellpadding="0" border="0" id="successLogin"><tr><td><img style="position:relative;bottom:-10px;width:30px;border:0px;" src="http://www.bilder-hochladen.net/files/1tys-nx.png"> Herzlich Willkommen im Forum für Hilfe, Tricks und Tipps!<br><a style="color:#aa000000;font-size:9px;" href="http://104774.homepagemodules.de/t569f30-Begruessung-Webseite-vor-dem-Forum-anlegen.html">Zum Script</a></td></tr></table></center>');
window.setTimeout('successLogin();',6000);
}
</script>




Bis dann und im Voraus
Wolfgang

#2 RE: Begrüßung nach dem Login von florian-zier 04.05.2013 14:17

avatar

Hallo Wolfgang,
evtl. könnte, solange der User nicht eingeloggt ist, mithilfe entsprechender Template-Variablen ein Skript eingebunden werden, welches ein Cookie setzt.
Dieses Cookie signalisiert sozusagen, dass der User aktuell nicht eingeloggt ist, da ja der Refferrer leider nicht dafür verfügbar ist.
Nach dem Login wird dann über ein anderes Skript auf Existenz des Cookies geprüft und ggf. eine Meldung angezeigt.
Gleichzeitig wird das Cookie gelöscht, damit die Meldung beim Wechsel auf eine andere Seite nicht mehr angezeigt wird.

Das wäre so meine Idee zur Umsetzung, wenn man sich nicht darauf verlassen kann, dass der User sich über eine Login-Seite einloggt.
Wie ich aber gerade gesehen habe, wurde das Problem wohl bereits gelöst.
Vielleicht kann Sachse ja mitteilen, worin das Problem lag.

Ansonsten wäre eben obiger Ansatz meine Idee zur Lösung des Problems.
Gib einfach nochmal Bescheid, falls weiterhin Bedarf an einer umgesetzten Lösung besteht.

#3 RE: Begrüßung nach dem Login von Wolfgang 04.05.2013 20:57

avatar

Hallo Florian,
so wie es aussieht, hat Sachse den obigen Login herausgenommen.

Die User haben somit nur den normalen Login, der mit "Refferrer" ja funktioniert.

Bis dann und besten Dank
Wolfgang

#4 RE: Begrüßung nach dem Login von florian-zier 05.05.2013 23:32

avatar

Hallo Wolfgang,
nach ein wenig Ausprobieren habe ich denke ich eine relativ einfache Methode zur Umsetzung gefunden.

Folgendes JavaScript habe ich vor das schließende Body-Tag im Template-Element Untere Leiste gesetzt:

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
{{user_registered==true.start}}
if (xGetCookie('UserIsGuest') == 'true') {
xSetCookie('UserIsGuest', '', -1);
// Benutzerdefinierte Aktionen nach Login:
alert('Willkommen im Forum!');
}
{{user_registered==true.else}}
xSetCookie('UserIsGuest', true);
{{user_registered==true.end}}
</script>
 


Der untere Teil des Skripts wird ausgeführt, wenn der User nicht eingeloggt ist, er setzt einfach nur ein Cookie.
Mit dem oberen Teil wird schließlich, sofern ein Cookie gesetzt war, eine entsprechende Meldung ausgegeben.

Statt dem alert wäre es natürlich schöner, eine eigene Methode aufzurufen, welche die Begrüßung wie gewünscht vornimmt.
Sie kann dann z.B. in einer externen Skript-Datei bequem jederzeit angepasst werden.
Natürlich wäre auch eine globale Variable denkbar, welche im Administrations-Bereich des Forums gepflegt wird und den entsprechenden Skript-Teil beinhaltet.

Die Position des Skriptes ist relativ egal, ich habe es in die Untere Leiste getan, damit der Inhalt und andere Skripte komplett geladen werden können ohne durch die Alert-Meldung blockiert zu werden.
Außerdem kann ich dieses Template einfach wieder zurücksetzen, da ich dort aktuell sonst keine Änderungen vorgenommen habe.
Wenn die Begrüßung früher erscheinen soll, schiebe das Skript einfach in einen Bereich im Template weiter oben.
Aber ich denke es ist besser, wenn im Hintergrund das Forum bereits geladen wurde und zu sehen ist.


In Xobor-Foren werden anscheinend standardmäßig Funktionen zum Setzen von Cookies angeboten.
Deshalb habe ich einfach xSetCookie() und xGetCookie() verwendet, welche bereits existierten.

Solltest du aus irgendeinem Grund alternative Methoden brauchen, helfen dir evtl. folgende weiter (URL in Kommentar):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<script type="text/javascript">
// @link http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery/1460174#1460174
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = escape(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length, c.length));
}
return null;
}
function deleteCookie(name) {
setCookie(name, "", -1);
}
</script>
 



Die Aufrufe für get und set würden dementsprechend durch die anderen Methoden ersetzt.
Einzig die Methode xSetCookie('UserIsGuest', '', -1); würde durch die ergänzte deleteCookie('UserIsGuest'); ersetzt.

Sie sollten aber wirklich nur nötig sein, wenn die eigentlich bestehenden Xobor-Methoden nicht zur Verfügung stehen.


Viel Spaß damit und noch eine gute Nacht!

#5 RE: Begrüßung nach dem Login von Wolfgang 07.05.2013 19:59

avatar

Hallo Florian,
ich habe das erste Script ausprobiert. Super Idee!
Interessanterweise funktioniert es wirklich nur richtig vorm Abschluss des schließenden Body-tag (</Body>).
Ich habe "alert" mit "document.write + zeitbedingte Ausgabe" ersetzt.
Stimmt das Script so, kann man es vereinfachen?



<style type="text/css">
.success {z-index:1;position:absolute;width:600px;top:320px;padding:20px;padding-bottom:20px;background-image:url(http://www.bilder-hochladen.net/files/1tys-rd-d240.png);background-color:#ffffff;color:#000000;font-size:16px;border:2px ridge #000000;border-radius:20px;text-align:center;cursor:pointer;}
</style>


<script type="text/javascript">

{{user_registered==true.start}}
function successLogin(){
document.getElementById('successLogin').style.display='none';
}

if (xGetCookie('UserIsGuest') == 'true') {
xSetCookie('UserIsGuest', '', -1);

// Benutzerdefinierte Aktionen nach Login:
document.write('<center><table width="35%" cellspacing="0" cellpadding="0" border="0" id="successLogin"><tr><td class="success"><img style="position:relative;bottom:-10px;width:30px;border:0px;" src="http://www.bilder-hochladen.net/files/1tys-nx.png"> Herzlich Willkommen im Forum für Hilfe, Tricks und Tipps!<br><small>Hier geht es zum Script: <a style="color:#aa0000;" href="http://104774.homepagemodules.de/topic-threaded.php?board=104774&forum=30&threaded=1&id=569&message=1505/"><u>Begrüßungstext nach dem Login</u></a></small></td></tr></table></center>');
window.setTimeout('successLogin();',8000);
}

{{user_registered==true.else}}
xSetCookie('UserIsGuest', true);
{{user_registered==true.end}}

</script>




Gruß
Wolfgang

#6 RE: Begrüßung nach dem Login von florian-zier 11.05.2013 20:57

avatar

Hallo Wolfgang,
ich habe mich jetzt nochmal mit dem Skript beschäftigt.
Es ist nun so angelegt, dass große Teile des Skripts und Styles ausgelagert werden könnten.
Außerdem habe ich das document.write() vermieden und den Quelltext übersichtlich direkt ins Template gesetzt.

Folgender Block funktioniert komplett eigenständig im Template:

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
 
{{user_registered==true.start}}
<style type="text/css">
#successLogin {
display:none; /* standardmäßig ausgeblendet */
z-index: 4;
position: absolute;
top: 250px; /* Position vom oberen Bildrand */
width: 600px; /* Breite der Begrüßung */
padding: 20px 20px; /* Ausrichtung der Schrift (oben/unten links/rechts) */
text-align: center; /* Zentrierung der Schrift */
background-image: /* Hintergrundbild */
url(http://www.bilder-hochladen.net/files/1tys-rd-d240.png);
background-color: #D0D0D0; /* Hintergrundfarbe - Wird nur bei fehlendem Hintergrundbild wirksam! */
color: #000000; /* Schriftfarbe */
font-size: 12px; /* Schriftgröße */
border: 2px ridge #000000; /* Rand */
border-radius: 20px; /* Rundung der Ecken */
}
#successLogin .successTitle {
font-size: 16px;
display:inline;
}
#successLogin > img {
position:relative;
width:30px;
bottom:-10px;
border:0px;
}
#successLogin a {
color:#aa0000;
text-decoration:underline;
}
</style>
 
<div id="successLogin">
<img src="http://www.bilder-hochladen.net/files/1tys-nx.png" />
<div class="successTitle">
Herzlich Willkommen im Forum für Hilfe, Tricks und Tipps!
</div>
<div class="successText">
Hier geht es zum Script:
<a href="http://104774.homepagemodules.de/topic-threaded.php?board=104774&forum=30&threaded=1&id=569&message=1505/">
Begrüßungstext nach dem Login
</a>
</div>
</div>
 

<script type="text/javascript">
/**
* Benutzerdefinierte Aktionen nach Login.
*/
function doAfterSuccessLogin() {
// Zeit bis zum Ausblenden des Dialogs:
var successLoginTimeout = 8000;

// Willkommens-Dialog einblenden:
$('#successLogin').show();
// Willkommens-Dialog nach [successLoginTimeout] ms ausblenden:
window.setTimeout(function() {
$('#successLogin').hide();
}, successLoginTimeout);
}
function isSuccessLogin() {
if (xGetCookie('UserIsGuest') == 'true') {
xSetCookie('UserIsGuest', 'false', -1);
window.addOnloadEvent( // $(document).ready(... || $(document).load(...
function() {
doAfterSuccessLogin();
}
);
}
}
isSuccessLogin();
</script>
{{user_registered==true.else}}
<script type="text/javascript">
function setUserIsGuest() {
xSetCookie('UserIsGuest', true);
}
setUserIsGuest();
</script>
{{user_registered==true.end}}
 


Das sieht jetzt möglicherweise viel mehr aus als vorher, allerdings habe ich auch alles aus document.write() übersichtlicher formatiert und die Style-Tags in den CSS-Block gesetzt.
Die Tabelle war übrigens überflüssig, da daraus sowieso nur die eine Zelle positioniert wurde.
Wenn du die Zeilenumbrüche aus HTML-Code und Style wieder entfernen würdest, sähe das alles auch wieder etwas kleiner aus.
Ich empfehle aber, es übersichtlich zu lassen um spätere Änderungen zu vereinfachen und es besser lesbar zu halten.

Die Funktion doAfterSuccessLogin() enthält dann letztlich die Anweisungen, welche nach dem Login abgearbeitet werden.
Da die Foren ja eigentlich alle mit jQuery ausgestattet sind, habe ich zwecks Einfachheit und Kompatibilität hier auch einige jQuery-Anweisungen verwendet.

Damit das Skript automatisch gestartet wird, habe ich die Xobor-Funktion window.addOnloadEvent(... verwendet, welche den Onload ergänzt.
Da ich bereits andere Onloads-Skriptseitig definiert habe, hat die jQuery-Anweisung $(document).load(... leider nicht funktioniert.
Und $(document).ready(... kommt leider nicht mit Onload im Body-Tag wie bei dir im Forum klar, bei mir hat das aber durchaus funktioniert.
Die ready-Funktion wird nach Laden des Quelltextes ausgeführt, die load-Funktion erst nach Laden aller Inhalte wie z.B. Bilder.
Probiere also einfach aus, ob ready bei dir funktioniert oder nutze eine der beiden anderen Anweisungen.


Theoretisch könntest du jetzt auch alles zwischen den Style-Tags in externe CSS-Dateien auslagern.
Ebenso könnten auch alle (drei) benannten functions in eine externe JS-Datei verlegt werden.
Das würde den ganzen Block im Template wieder etwas verkleinern, außerdem sind kleinere Änderungen so ohne das Template zu verändern möglich.

Die gekürzte Version könnte dann etwa so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 

{{user_registered==true.start}}
<div id="successLogin">
<img src="http://www.bilder-hochladen.net/files/1tys-nx.png" />
<div class="successTitle">
Herzlich Willkommen im Forum für Hilfe, Tricks und Tipps!
</div>
<div class="successText">
Hier geht es zum Script:
<a href="http://104774.homepagemodules.de/topic-threaded.php?board=104774&forum=30&threaded=1&id=569&message=1505/">
Begrüßungstext nach dem Login
</a>
</div>
</div>
 
<script type="text/javascript">
isSuccessLogin();
</script>
{{user_registered==true.else}}
<script type="text/javascript">
setUserIsGuest();
</script>
{{user_registered==true.end}}
 
 



Der HTML-Code für die eigentliche Meldung könnte auch wieder skriptseitig eingebunden werden.
Dann würde der Container eben nicht mehr in der Seite ausgegeben und Syntax-Highlighting in einem externen Editor wäre nicht möglich.
Dafür würden wirklich alle Änderungen später in externen Dateien stattfinden und nicht mehr im Template.

Ist eben Geschmackssache, ich konnte mich nicht so richtig entscheiden, welches die bessere Variante ist.
Du kannst es ggf. probieren auszulagern, ansonsten gib einfach nochmal Bescheid, dann werde ich es ins Skript auslagern.
Versuche aber, document.write() besser zu vermeiden.
jQuery kann HTML-Elemente relativ einfach erzeugen und dann in das DOM einhängen.


Dann wünsche ich dir noch einen schönen Abend...

#7 RE: Begrüßung nach dem Login von Wolfgang 12.05.2013 17:20

avatar

Hallo Florian,
bei mir funktionierte es im Business-Template, aber nicht im Standard-Template!
Ich dachte, dass nur folgende Zeile fehlt aber dem ist nicht so:

<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/...ry-1.7.1.min.js"></script>

Was fehlt?


Gruß
Wolfgang

#8 RE: Begrüßung nach dem Login von florian-zier 12.05.2013 21:54

avatar

Hallo Wolfgang,
ob jQuery tatsächlich läuft, kannst du wohl am einfachsten feststellen, wenn du dir die Versions-Nummer ausgeben lässt:

1
 
$().jquery
 


Einfach in der Konsole des Browsers ausführen oder kurz in der Website einbinden (natürlich erst nachdem jQuery eingebunden wurde).

Ansonsten hast du evtl. das Problem mit den verschiedenen Onloads.
Folgende Methode sollte den Onload mit einem von Xobor eingebundenen Skript erweitern:

1
 
window.addOnloadEvent(...
 


Diese Methoden sind welche von jQuery:

1
 
$(document).ready(...
 

1
 
$(document).load(...
 



ready wird nach dem Laden der Seitenstruktur aufgerufen, es ist also alles bekannt was geladen wird.
load wird erst aufgerufen, nachdem Elemente wie auch Bilder bereits komplett geladen wurden.

Ersteres kann dazu führen, dass das Dialog-Bild evtl. erst nach einer kurzen Verzögerung nachgeladen und angezeigt wird.
Letzteres braucht evtl. sehr lange, wenn ein Skript, Bild o.ä. sehr lange zum Laden braucht, der Dialog erscheint später aber definitiv inkl. Bild (falls abrufbar).


Probiere also mal die Anzeige der jQuery-Version und an entsprechender Stelle die verschiedenen Onload-Varianten aus.
Sie sind in der Methode isSuccessLogin() bereits vorsichtshalber auskommentiert als Alternativen gelistet.
Normalerweise muss an dieser Methode eigentlich nicht geändert werden, aber in diesem Fall wird die benutzerdefinierte Methode doAfterSuccessLogin() mit der Anzeige des Dialogs ja wohl erst gar nicht aufgerufen, was in diesem Fall möglicherweise diese Änderungen erfordert.

Ich drücke dir die Daumen, dass diese Änderungen den Fehler bereits behebt.
Vielleicht kannst du sonst auch nochmal mit ein paar alerts im Skript feststellen, wie weit es durchlaufen wird.
Ob es an den verschiedenen gemischten Onloads liegt, kommt nicht so sehr auf das Template an.
Denn schließlich kann Onload an mehreren Stellen definiert werden, sowohl im Standard als auch in einem anderen Template.
Das soll natürlich nicht aussschließen, dass irgendwo anders kein Fehler auftreten könnte, welcher nur im Standard-Template erzeugt wird.

Ich hoffe, dass dir das bereits weiterhilft und wünsche dir viel Glück dabei!

#9 RE: Begrüßung nach dem Login von Wolfgang 15.05.2013 16:56

avatar

Hallo Florian,
es funktioniert!

Habe folgendes festgestellt:
Wichtig ist, dass im Standard-Template jQuery aktiviert ist.
Obere Leiste:
<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>[/u]
Außerdem, so wie Du es beschrieben hast, das Script vor dem End-tag </Body> (Untere Leiste) eintragen.

***************

Ich habe noch ein kleines Problem!
Ich bekomme die Meldung nicht zentriert!

<Center> <style="align:center"> align="Center"
funktionieren nicht, oder ich habe es nicht richtig platziert?

Mit z.B. left="600px" währe es eine Behelfslösung, aber keine Zentrierung.

Verhindert ein Eintrag in der CSS die Zentrierung?




Gruß
Wolfgang

#10 RE: Begrüßung nach dem Login von florian-zier 15.05.2013 23:58

avatar

Hallo Wolfgang,
super, dass es zumindest schonmal funktioniert!

Die fehlende Zentrierung ist in der Tat nicht ganz so toll.
Aber die kannst du mit einem kleinen Trick relativ einfach erreichen.
Da du eine bekannte Container-Breite von 600px hast, wird folgende Ergänzung in der richtigen Style-Anweisung die Zentrierung erledigen:

1
2
3
4
5
6
7
 
<style type="text/css">
#successLogin {
[...]
left:50%;
margin-left:-300px; /* Hälfte der Container-Breite */
}
</style>
 


Wichtig ist eben nur, die Hälfte der Container-Größe als margin-left zu setzen, aber als negativer Wert.
Die Center-Tags um den Container sind damit dann auch wieder überflüssig.
Ich vermute mal, dass das vorher mit der Tabelle funktioniert hat, war fast schon mehr ein Bug, da es bei einer so absolut positionierten Zelle eigentlich nicht hätte klappen können.
Oder es hätte zumindest jetzt wieder klappen müssen.


Ich bin davon ausgegangen, dass Xobor-Foren sowieso jQuery an Board haben.
Damit du vielleicht auf die extra Bibliothek verzichten kannst, könntest du die jQuery-Anweisungen ersetzen.

Die jQuery-Anweisungen ...:

1
2
 
$('#successLogin').show();
$('#successLogin').hide();
 


... würden ersetzt durch:

1
2
 
document.getElementById('successLogin').style.display = 'block';
document.getElementById('successLogin').style.display = 'none';
 



Allerdings darf der Onload dann auch nicht mit den beschriebenen jQuery-Alternativen $(document).ready(... oder $(document).load(... gesetzt werden.
Du müsstest den Aufruf per window.addOnloadEvent beibehalten oder eine eigene Alternative bereitstellen.

So würde aber die zusätzliche Ladezeit für ein zusätzliches Framework wegen zwei verwendeten Methoden wegfallen.
Außerdem wird wohl nur in anderen Templates autom. jQuery bereitgestellt und wahrscheinlich damit immer mal wieder geupdatet.


Na dann noch eine gute Nacht!

#11 RE: Begrüßung nach dem Login von Wolfgang 16.05.2013 01:29

avatar

Wow! Funktioniert!

jQuery brauche ich auch, weil ich die Zu- und Aufklapp-Funktion der "Kategorien" eingebaut habe, hinzu kommt noch die neue Funktion "Beitrag gelesen, in Arbeit".
Gebraucht habe ich es auch für die Lupen-Funktion- die echt super war. So wie dass aussieht waren die Scripte nur eine DEMO-Version und funktionieren nicht mehr!
Ich habe schon Ausschau nach einer anderen Lupen-Funktion gehalten.

Bis dann

#12 RE: Begrüßung nach dem Login von Wolfgang 07.09.2013 21:33

avatar

Hallo Florian,
ich habe da etwas entdeckt!

Wenn eine Email im Business-Template verschickt wird, wird dieses durch "Die Nachricht wurde versendet!" quittiert.
Interesanter Weise wird hier auch die classes ".success" verwendet.

Um nicht den Rahmen zu haben, wie bei der Begrüßung, müsste also in der Begrüßung die classes umbenannt werden. In z.B. ".success2"

Gruß
Wolfgang

#13 RE: Begrüßung nach dem Login von florian-zier 08.09.2013 22:44

avatar

Danke für diesen nachträglichen Hinweis!
Passende Klassennamen sind eben schnell vergeben …

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz