Smilies einfügen

Profi

Wohnort: SN

Sonntag, 23. September 2007, 19:20

Hallo Fabian,

seit längerem stört mich, dass man auf der Eintragungsseite Smilies nur immer am Ende des Textes einfügen kann. Eigentlich stelle ich mir das so vor: Cursor an die gewünschte Stelle setzen, Smilie anklicken, fertig. Nachträglich mal irgendwo im Text eines einfügen geht aber leider nicht automatisch. Egal, wo der Cursor steht, der Smilie wird immer am Ende eingefügt. Also muss man den Smilie von Hand mit

milie: einfügen (Smilie durch den entsprechenden Namen ersetzt).

Hier gleich mein Vorschlag, mit dem man durch Klicken auf den Smilie diesen dort einfügen kann, wo der Cursor steht. Die einzige Voraussetzung derzeit: eigene Eintragungsseite. Falls das neue Feature Zuspruch findet, kannst Du es vielleicht auch in die Standardseiten einbauen.

Man muss lediglich das JavaScript auf der Eintragungsseite:

Quellcode

<script language="JavaScript">
<!--
function Smilie(SmilieCode)
   {
   document.neu.nachricht.value = document.neu.nachricht.value + SmilieCode;
   }

function Popup($url)
   {
   window.open($url,"Hilfe","width=320,height=300,left=0,top=0,scrollbars=yes");
   }
//-->
</script>

etwas modifizieren in

Quellcode

<script language="JavaScript" type="text/javascript">
<!--
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie4up = (is_ie && (is_major >= 4));
var is_gecko = (agt.indexOf('gecko') != -1);

function uni_tag(front, end)
   {
   document.neu.nachricht.focus();
   if (is_ie4up)
      {
      document.neu.nachricht.caretPos.text = front + document.neu.nachricht.caretPos.text + end;
      }
      else
         {
         if (is_gecko)
            {
            edit = document.neu.nachricht;
            edit.value = edit.value.substring(0, edit.selectionStart) + front +
                         edit.value.substring(edit.selectionStart, edit.selectionEnd) + end +
                         edit.value.substring(edit.selectionEnd, edit.value.length);
            }
            else document.neu.nachricht.value += front + end;
         }
   }

function Smilie(text)
   {
   text = ' :' + text + ': ';
   front = ''; 
   uni_tag('', text);
   }

function storeCaret(textEl)
   {
   if (textEl.createTextRange)
      {
      textEl.caretPos = document.selection.createRange().duplicate();
      }
   }

function Popup($url)
  {
  window.open($url,"Hilfe","width=320,height=300,left=0,top=0,scrollbars=yes");
  }
//-->
</script>

Die Leerzeichen und Doppelpunkte beim Aufruf des Scripts können entfallen, da sie vom Script selbst eingesetzt werden, also z. B.

	Quellcode
1 2 3 4 5	javascript: Smilie(' :wink: ') durch javascript: Smilie('wink')

ersetzen. Leider konnte ich die notwendige Browserweiche nicht testen, da ich nur IE habe.

EDIT 09.08.2008: Was noch gefehlt hat, mein Dank an Increase, ist die notwendige Ergänzung der Definition der textarea:

	Quellcode
1	<textarea name="nachricht" cols="XX" rows="YY" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this)"></textarea>

XX und YY sind natürlich durch die Spalten- und Zeilenanzahlen des eigenen Textfeldes zu ersetzen.

Die besten Grüße von Uwe

Dieser Beitrag wurde bereits 7 mal editiert, zuletzt von »Mister« (9. August 2008, 16:11)

Zum Seitenanfang

Fabian

Administrator

Beiträge: 1 854

Wohnort: München

2

Montag, 24. September 2007, 13:47

Hi Uwe,

ziemlich cooles Feature! Herzlichsten Dank!

Wenn sich der ein oder andere hier noch positiv dazu äußern würde, bau ich das Teil gerne ein!

Mir erscheint es jedenfalls äußerst sinnvoll!

Beste Grüße,
Fabian Karg

>>> www.flf-book.de

Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an

Zum Seitenanfang

blankecker

Anfänger

Beiträge: 5

3

Sonntag, 7. Oktober 2007, 20:42

RE: Smilies einfügen

Absolut coole Idee! Wäre ein echte Bereicherung des Gästebuchs...

Grüsse Gerd

Zum Seitenanfang

Mister

Profi

Beiträge: 236

Wohnort: SN

4

Montag, 8. Oktober 2007, 02:25

RE: Smilies einfügen

Hallo,

ich hätte vielleicht auch noch was für den GB Code, also fett, kursiv usw. Da die Darstellung im Eingabefeld aber wie bei HTML mit Tags anstelle der Attribute selbst erfolgt, wird man so ein mächtiges Durcheinander erzeugen, wenn mehrere Formatierungen zugleich benutzt werden sollen. Da müsste ich noch mal schauen, ich glaube, ich habe auch schon eine grafisch formatierte Anzeige irgendwo gesehen.

Was aber mit dieser Vereinfachung bestimmt kommen wird: Die Spielmätze werden versuchen, sich gegenseitig zu übertrumpfen, was bunte Gästebucheinträge anbelangt. Ob ich das will? In diesem Zusammenhang @Fabian: Wäre es möglich, dass zumindest die Bestätigungsseite schon die endgültige Formatierung des neuen Gästebucheintrages zeigt, also so schön mit Formatierungen und Smilies?

@Gerd: Du hast doch eine eigene Eintragungsseite (http://www.blank-eck.de/blnew/html/eintag_verfassen.html), wenn Du meine Anleitung benutzt, kannst Du das sofort haben.

Die besten Grüße von Uwe

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Mister« (8. Oktober 2007, 02:29)

Zum Seitenanfang

Fabian

Administrator

Beiträge: 1 854

Wohnort: München

5

Montag, 8. Oktober 2007, 16:26

RE: Smilies einfügen

Zitat

Original von Mister
Wäre es möglich, dass zumindest die Bestätigungsseite schon die endgültige Formatierung des neuen Gästebucheintrages zeigt, also so schön mit Formatierungen und Smilies?

Hi Uwe,

das war wiedermal eine gute Anregung! Die Formatierungen auf der Eintragsbestätigungsseite sollten jetzt im wesentlichen der im eigentlichen Gästebuch entpsrechen. Ich hoffe, es haben sich keine Fehler eingeschlichen

Beste Grüße,
Fabian Karg

>>> www.flf-book.de

Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an

Zum Seitenanfang

Mister

Profi

Beiträge: 236

Wohnort: SN

6

Montag, 8. Oktober 2007, 19:11

RE: Smilies einfügen

Hallo Fabian,

es funktioniert tatsächlich! :] :] :] Wie hast Du das nur so schnell hinbekommen? Besten Dank.

Die besten Grüße von Uwe

Zum Seitenanfang

Daniel

Profi

Beiträge: 227

Wohnort: BW

7

Sonntag, 30. März 2008, 00:13

Hallo,

ich hab ma wieder 'nen kleinen Vorschlag zur Verbesserung

...
Und zwar die Kürzel der Smilies - ich finde die jetzigen etwas umständlich

... daher z.B.:

	Quellcode
1 2 3 4 5 6 7 8 9 10	:bigsmile: --> :D :smile: --> :) :wink: --> :P :cheesy: --> (: :love: --> <3 :cool: --> 8) :smoke: --> :Q :confused: --> :'( :sad: --> :( :evil: --> :C

(Ihr wundert euch vieleicht, warum ich dei Smilies jetzt in 'nem Code-Fenster poste... ganz einfach

, wusste net, wie ich die Smiliegrafiken anders unterbinden soll...

)

...so oder so ähnlich, vieleicht hat ja jemand noch an besseren Vorschlag

...

Oh, sry, ich merke gerade, dass der Beitrag garnet hier rein kommen sollte... - hätte eher zu "Smilies einfügen" rein müssen"...
____________________________
//Edit von Jens: habs verschoben

//

Grüße,
Daniel

>>>http://www.fsghannsklemm.de<<<
My software never has bugs. It just develops random features... xP

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Daniel« (30. März 2008, 00:53)

Zum Seitenanfang

Fabian

Administrator

Beiträge: 1 854

Wohnort: München

8

Dienstag, 1. April 2008, 20:41

Hallo Incraese,

vielen Dank für diesen Tipp! Das werd ich gerne bei Gelegenheit so umwandeln!

Etwas problematisch ist dabei nur, dass die alten Codes ja auch weiterhin funktionieren müssen!

Ich habe mir das ganze dennoch soeben auf der Todo-Liste notiert!

Viele Grüße,
Fabian Karg

>>> www.flf-book.de

Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an

Zum Seitenanfang

Daniel

Profi

Beiträge: 227

Wohnort: BW

9

Donnerstag, 18. Dezember 2008, 00:34

Hey an alle, die eigene Smilies uneingeschränkt nutzen wollen!

Endlich geschafft... innerhalb der letzten 1 1/2 - 2 Std. hab ich ein Script entworfen, das es möglich macht eigene Smilies (so viel man will) in seinem GB zu verwenden!

So funktionierts (hier im Beispiel werden Smilies verwendet, die sich auf dem Server increase-web.de befinden):

1. Auf der Eintragungsseite folgendes JS-Script zwischen "<head>" und "</head>" einfügen:

Quellcode

<script type="text/javascript">
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie4up = (is_ie && (is_major >= 4));
var is_gecko = (agt.indexOf('gecko') != -1);
function Smilie(text){
	document.neu.nachricht.focus();
	if(is_ie4up){
		document.neu.nachricht.caretPos.text = document.neu.nachricht.caretPos.text + text;
	}
	else{
		if(is_gecko){
			edit = document.neu.nachricht;
			edit.value = edit.value.substring(0, edit.selectionStart) +
			edit.value.substring(edit.selectionStart, edit.selectionEnd) + text +
			edit.value.substring(edit.selectionEnd, edit.value.length);
		}
		else{
			document.neu.nachricht.value += text;
		}
	}
}
function storeCaret(textEl){
	if (textEl.createTextRange){
		textEl.caretPos = document.selection.createRange().duplicate();
	}
}
</script>

2. Zwischen "<body>" und "</body>" folgendes einfügen/ändern:

Quellcode

<a href="javascript:Smilie(' :D ')"><img src="http://www.increase-web.de/content/bilder/smilies/bigsmile.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :) ')"><img src="http://www.increase-web.de/content/bilder/smilies/smile.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :P ')"><img src="http://www.increase-web.de/content/bilder/smilies/cheeky.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' 8) ')"><img src="http://www.increase-web.de/content/bilder/smilies/cool.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' =) ')"><img src="http://www.increase-web.de/content/bilder/smilies/happy.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' ;) ')"><img src="http://www.increase-web.de/content/bilder/smilies/wink.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :-* ')"><img src="http://www.increase-web.de/content/bilder/smilies/kiss.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :] ')"><img src="http://www.increase-web.de/content/bilder/smilies/pleased.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :O ')"><img src="http://www.increase-web.de/content/bilder/smilies/redface.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :\'( ')"><img src="http://www.increase-web.de/content/bilder/smilies/crying.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :( ')"><img src="http://www.increase-web.de/content/bilder/smilies/sad.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' X( ')"><img src="http://www.increase-web.de/content/bilder/smilies/mad.gif" border="0"></a>&nbsp;
<a href="javascript:Smilie(' :C ')"><img src="http://www.increase-web.de/content/bilder/smilies/evil.gif" border="0"></a>
<br>
<textarea name="nachricht" cols="35" rows="8" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this)"></textarea>

Die Smilie-Kürzel und die Url's (bsp.: "http://www.increase-web.de/content/bilder/smilies/bigsmile.gif") können durch die gewünschten/benutzerdefinierte Kürzel und Url's ersetzt werden... Zusätzlich lassen sich natürlich mehrer Kürzel und Url's hinzufügen.

Auf der Seite, die auf den FLF Book- Server hochgeladen wird, muss folgendes geändert werden:

1. zwischen <head></head> das neue Javascript einfügen:

Quellcode

<script type="text/javascript">
var xx = 0;
function SerchAndReplace(){
	var SmilieCode = new Array();
		SmilieCode[0] = ":D";
		SmilieCode[1] = ":P";
		SmilieCode[2] = "8)";
		SmilieCode[3] = ":'(";
		SmilieCode[4] = ":C";
		SmilieCode[5] = "=)";
		SmilieCode[6] = ":-*";
		SmilieCode[7] = "X(";
		SmilieCode[8] = ":]";
		SmilieCode[9] = ":O";
		SmilieCode[10] = ":(";
		SmilieCode[11] = ":)";
		SmilieCode[12] = ";)";
	var SmilieImg = new Array();
		SmilieImg[0] = '<img src="http://www.increase-web.de/content/bilder/smilies/bigsmile.gif" align="absmiddle">';
		SmilieImg[1] = '<img src="http://www.increase-web.de/content/bilder/smilies/cheeky.gif" align="absmiddle">';
		SmilieImg[2] = '<img src="http://www.increase-web.de/content/bilder/smilies/cool.gif" align="absmiddle">';
		SmilieImg[3] = '<img src="http://www.increase-web.de/content/bilder/smilies/crying.gif" align="absmiddle">';
		SmilieImg[4] = '<img src="http://www.increase-web.de/content/bilder/smilies/evil.gif" align="absmiddle">';
		SmilieImg[5] = '<img src="http://www.increase-web.de/content/bilder/smilies/happy.gif" align="absmiddle">';
		SmilieImg[6] = '<img src="http://www.increase-web.de/content/bilder/smilies/kiss.gif" align="absmiddle">';
		SmilieImg[7] = '<img src="http://www.increase-web.de/content/bilder/smilies/mad.gif" align="absmiddle">';
		SmilieImg[8] = '<img src="http://www.increase-web.de/content/bilder/smilies/pleased.gif" align="absmiddle">';
		SmilieImg[9] = '<img src="http://www.increase-web.de/content/bilder/smilies/redface.gif" align="absmiddle">';
		SmilieImg[10] = '<img src="http://www.increase-web.de/content/bilder/smilies/sad.gif" align="absmiddle">';
		SmilieImg[11] = '<img src="http://www.increase-web.de/content/bilder/smilies/smile.gif" align="absmiddle">';
		SmilieImg[12] = '<img src="http://www.increase-web.de/content/bilder/smilies/wink.gif" align="absmiddle">';
	var content = document.getElementById('ReplaceArea').innerHTML;
	var searchedCode = SmilieCode[xx];
	var alternativeCode = SmilieImg[xx];
	if((content == null) || (searchedCode == null)){
		return null;
	}
	if((content.length == 0) || (searchedCode.length == 0)){
		return content;
	}
	if((alternativeCode == null) || (alternativeCode.length == 0)){
		alternativeCode = "";
	}
	var length_searchedCode = searchedCode.length;
	var length_alternativeCode = alternativeCode.length;
	var pos = content.indexOf(searchedCode, 0);
	while (pos >= 0){
		content = content.substring(0, pos) + alternativeCode + content.substring(pos + length_searchedCode);
		pos = content.indexOf(searchedCode, pos + length_alternativeCode);
	}
	if (0 >= pos && xx <= SmilieCode.length){
		xx++
		setTimeout("SerchAndReplace()",1);
	}
	document.getElementById('ReplaceArea').innerHTML = content;
	return content;
}
</script>

2. Den Body-tag ergänzen:

	Quellcode
1	<body onload="SerchAndReplace();">

3. Vor "" das einfügen:

	Quellcode
1	<span id="ReplaceArea">

4. Nach "" den Span-tag schließen:

	Quellcode
1	</span>

Nach diesen Änderungen sollte eigentlich alles funktionieren...
Nun hoffe ich, dass ich nichts vergessen habe (bin schon 1 1/2 Stunden zu lang wach

).

Falls die Änderungen nicht funktionieren sollten bitte auf "Rechtschreibung" überprüfen und den Fehler melden...
Ausführlichere Beschreibung auf Anfrage...
Bei anhaltenden Problemen wird natürlich geholfen...

Getestet mit IE7, FF und Opera...

Sollte sich jemand für die Smilies interessieren, bitte kopieren und auf den eigenen Server hochladen!!! - Ich möchte auf jeden Fall überflüssigen Traffic auf dem Alright Reserved- Server vermeiden! DANKE

Wenn sich jemand die Auswirkungen des Scriptes anschauen möcht, kann er dies gerne unter http://www.flf-book.de/Benutzer/Alright-Reserved.htm tun.

/////////EDIT:\\\\\\\\\
--Kompletter Beitrag--

/////////EDIT2:\\\\\\\\\
Rechtschreibfehler in Template 1. Code Zeile 12 entfernt ([71] zu [7])
Verbesertes JS-Schnipsel von Uwe (Mister) eingefügt

Grüße,
Daniel

>>>http://www.fsghannsklemm.de<<<
My software never has bugs. It just develops random features... xP

Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von »Daniel« (4. März 2009, 18:51)

Zum Seitenanfang

Mister

Profi

Beiträge: 236

Wohnort: SN

10

Freitag, 19. Dezember 2008, 10:49

Hallo Daniel,

Chapeau! Chapeau! :] Wenn das wirklich so funktioniert, wovon ich doch ausgehe, ist das ein würdiges Weihnachtsgeschenk an die Gästebuchnutzer! Doch Gutes ist nicht so gut, dass man es nicht noch ein wenig besser machen könnte. =)

Da "function Smilie(text)" nun nicht wirklich mehr was zu tun hat (gut, man könnte die Leerzeichen vorn und hinten einfügen lassen und diese beim Aufruf des Scripts weg lassen), könntest Du, um den Code noch etwas zu vereinfachen, uni_tag in Smilie umbenennen, anstelle end text schreiben und front weglassen.

Also so:

Quellcode

<script type="text/javascript">
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie4up = (is_ie && (is_major >= 4));
var is_gecko = (agt.indexOf('gecko') != -1);
function Smilie(text)
   {
   document.neu.nachricht.focus();
   if(is_ie4up)
      document.neu.nachricht.caretPos.text = document.neu.nachricht.caretPos.text + text;
      else
         {
         if(is_gecko)
            {
            edit = document.neu.nachricht;
            edit.value = edit.value.substring(0, edit.selectionStart) +
            edit.value.substring(edit.selectionStart, edit.selectionEnd) + text +
            edit.value.substring(edit.selectionEnd, edit.value.length);
            }
            else
               document.neu.nachricht.value += text;
         }
   }
</script>

Dann gibt es da bei 1. (Template) in Zeile 12 noch einen kleinen Fehler: der Index [71] muss natürlich [7] heißen, sonst gibt es kein

(Sowieso kein guter Smilie

)

Edit: Der Hilfetext für die Smilies stimmt jetzt natürlich auch nicht mehr (Anzahl), da müsstest Du einen eigenen machen.

Weihnachtliche Grüße von Uwe

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Mister« (19. Dezember 2008, 11:00)

Zum Seitenanfang

Daniel

Profi

Beiträge: 227

Wohnort: BW

11

Freitag, 19. Dezember 2008, 11:58

Moin moin Uwe,

erst 'mal DANKE für Dein Lob. =)

Dein vereinfachtes JS-Schnipsel nehme ich natürlich gerne an

Ohh, klar... 71 muss natürlich 7 heißen

thx

ebenfalls Weihnachtliche Grüße
und

Grüße,
Daniel

>>>http://www.fsghannsklemm.de<<<
My software never has bugs. It just develops random features... xP

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Daniel« (19. Dezember 2008, 11:59)

Zum Seitenanfang

Fabian

Administrator

Beiträge: 1 854

Wohnort: München

12

Freitag, 19. Dezember 2008, 15:32

Hey Daniel,

ich bin wahrlich begeistert! Geniales Skript! Da muss ich wirklich meinen Hut ziehen

Jetzt müssen wir wirklich endlich mal eine Sammlung solcher nützlicher Skripte veröffentlichen! Damit auch wirklich alle User davon profitieren können!

Nochmals ganz vielen lieben Dank!

Viele Grüße,
Fabian Karg

>>> www.flf-book.de

P.S.: Vielen Dank natürlich auch an Uwe für die Verbesserungstipps!

// EDIT: Die andere Anfrage habe ich mal hierhin verschoben. damit die Übersichtlichkeit nicht leidet

Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an

Zum Seitenanfang

serendipity

Schüler

Beiträge: 11

13

Montag, 22. Dezember 2008, 19:24

Super! Vielen vielen Dank, Daniel. Habs gleich engebaut und alles klappt wunderbar! Jetzt müssen sich meine Gäste nicht mehr mit dem ellen-langen URL-code meiner Smileys rumärgern!

Daaankeschöön,
Sara

Zum Seitenanfang

Moni

Fortgeschrittener

Beiträge: 83

Wohnort: BW

14

Dienstag, 23. Dezember 2008, 14:51

Mensch Ihr seid einfach der Wahnsinn

Klappt super! Jetzt wäre es natürlich noch klasse, wenn das ganze auch für Xhtml wäre :rolleyes:

@Fabian,

wäre es denn möglich die Buttons bzw. das Script so zu machen, dass man zweisprachig fahren (deutsch/englisch) könnte?

Z.B.

Bild hochladen- durchsuchen/browse

eintragen/submit
zurücksetzen/reset

Funktioniert soweit schon:
http://www.flf-book.de/Benutzer/house-of-blue-eyes.htm

Ein dickes Dankeschön an DAniel und auch an Uwe!!!

Lg
Moni

LG
Moni

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Moni« (23. Dezember 2008, 19:59)

Zum Seitenanfang

Fabian

Administrator

Beiträge: 1 854

Wohnort: München

15

Dienstag, 23. Dezember 2008, 23:40

Hi Moni,

der "Durchsuchen" - Button kann leider nicht manuell übersetzt werden. Die Beschriftung wird abhängig von der Sprache des Betirebssystems bzw. Browsers automatisch durch den Browser ausgegeben.

Darauf kann man leider (zumindest meines Wissens nach

) keinen Einfluss nehmen.

Viele Grüße,
Fabian Karg

>>> www.flf-book.de

Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an

Zum Seitenanfang

Fabian

Administrator

Beiträge: 1 854

Wohnort: München

16

Dienstag, 23. Dezember 2008, 23:48

Noch eine kleine Nachfrage bzw. der Zweisprachigkeit:

Möchtest Du dann alle Texte zweisprachig haben? Oder würdest Du Dir eine kleine Flagge o.ä. wünschen wo der User die Sprache umschalten kann?

Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an