Doch fangen wir (wie immer ;)) von vorne an.
Was ist eine Shoutbox?
Eine Shoutbox (SB), ein Tagboard oder eine elektronische Pinnwand ist ein kleiner Bereich auf (meist privaten) Webangeboten, der als eine Art Mini-Gästebuch fungiert und somit die Lücke zwischen Gästebuch/Forum und einem echten Chat schließt. wikipedia.orgEine Shoutbox ist vergleichbar mit einem kleinen Chat. Man kann in dieser Box ohne sich anmelden zu müssen Nachrichten hinterlassen. Eine Shoutbox bietet sich bei kleineren Nachrichten an, da sie meistens eine Zeichen Begrenzung hat und dadurch bei großen Nachrichten schnell unübersichtlich wird. Eine Shoutbox kann zum Beispiel kostenlos auf cbox erstellt werden.
Shoutbox am Websiten Rand einblenden
Einige Webseiten zeigen ihre Shoutbox inzwischen am linken oder rechten Seiten Rand an. Fährt man mit der Maus darüber, "slidet" die Shoutbox auf und der Besucher kann hineinschreiben.
Hier ein kleines Beispiel: Beispiel anzeigen.
Ich verwende dazu immer das Script von DynamicDrive.com.
- Lade Shoutbox am Rand.zip herunter und entpacke die Datei.
Die mmenu.js muss uns eigentlich gar nicht groß interessieren. Die Einstellungen der Shoutbox, die für uns Interessant sind und die wir bearbeiten müssen stehen in der menuItems.js. Öffne deshalb diese Datei mit einem Editor wie zum Beispiel Notepad++ (Windows Editor reicht aber auch). - Öffne nun deinen Shoutbox Code ebenfalls in einem Editor (Editor öffnen: "Datei neu" auswählen und dort den Shoutbox Code einfügen).
- Ganz wichtig: Alle Anführungszeichen (") und Zeilenumbrüche müssen Ersetzt bzw. Entfernt werden. Der ganze Shoutbox Code muss in einer Zeile stehen. Die Anführungszeichen (") könnt ihr mit einem Hochzeichen (') ersetzen.
- Kopiere diese eine Zeile jetzt und wechsele in die bereits geöffnete menuItems.js. Dort steht ziemlich weit unten "HIER KOMMT DEIN SHOUTBOX CODE OHNE ZEIELNUMBRUCH REIN!" Den Text zwischen diesen Anführungszeichen kannst du löschen. Füge hier deinen Shoutbox Code, denn du eben kopiert hast (mit ersetzten Anführungszeichen und ohne Zeilenumbruch! (Schritt 3)) ein.
- Lade die beiden Javascript Dateien auf deinem Server hoch.
- Öffne die Textseite, in der der <head> Bereich deines Designs steht (meistens die index.html oder header.php). Füge dort direkt über </head> folgenden Code ein:
<script src="mmenu.js" type="text/javascript"></script>
Dieser Code ruft und läd die beiden Javascript Dateien.
<script src="menuItems.js" type="text/javascript">
/***********************************************
* Omni Slide Menu script - (c) John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/
</script>
Das komplette Beispiel gibt es auch hier zum Downloaden.
Bei Fragen oder Problemen könnt ihr mir gerne jederzeit eine EMail schicken oder einen Kommentar hinterlassen.
EDIT 30.3.16. 13:00 Uhr: Ich werde demnächst noch ein Tutorial erstellen, in dem ich weiteren Methoden (auch ohne Javascript) für das Einbinden von Slide Shoutboxen erkläre.
Danke für das Tutorial :)
AntwortenLöschenLeider klappt das Ganze mobil nicht so toll (bzw. schwebt die Box dann durch die Gegend, wenn man den Code nicht für mobile Geräte ändert), daher hab ich mich gegen so eine tolle Slide-Shouti entschieden :(
//Misfits ist eine zugegebenermaßen ziemlich dämliche Serie, die mir aber viel Freude bereitet hat :D Ja, nächstes Ostern wird dann hoffentlich besser! Heute geht es noch in einen japanischen Supermarkt, das wird wahrscheinlich mein Highlight der Woche. Und keine Sorge, ich war ja bis vor ein paar Tagen auch ziemlich passiv unterwegs xD
Bitte bitte <3 <3
LöschenAh ich muss zugeben, an mobile Geräte habe ich Shoutbox mäßig noch überhaupt nicht gedacht ^^" Das könnte wirklich ein Problem sein. Ich muss das mal noch testen - vll bringe ich dann bald noch ein Shoutbox Tutorial online ;)
Ich war eben auf Misfits aber ganz verstehe ich es nid xD Ein Japanischer Supermarkt *_____* Ich finde es immer so schade, dass es bei uns so was nicht gibt T___T
Bitte bitte <3 <3
LöschenAh ich muss zugeben, an mobile Geräte habe ich Shoutbox mäßig noch überhaupt nicht gedacht ^^" Das könnte wirklich ein Problem sein. Ich muss das mal noch testen - vll bringe ich dann bald noch ein Shoutbox Tutorial online ;)
Ich war eben auf Misfits aber ganz verstehe ich es nid xD Ein Japanischer Supermarkt *_____* Ich finde es immer so schade, dass es bei uns so was nicht gibt T___T
Tolles Tutorial! -^__^-
AntwortenLöschenAlso bei mir bleibt die Shouti in der mobilen Ansicht am Rand kleben. XD Ich denke das hat oft was mit dem Browser/Smartphone zu tun. Keine Ahnung. Es wird immer kleine/große Unterschiede geben. Es ist ein Ding der Unmöglichkeit so zu coden, dass es bei jedem so aussieht wie bei einem selbst. ^.^"
Daaaaaaaaaaaaaaaaaaaaanke :* Das kann gut sein, dass es mit den Browsern zu tun hat. Ich hab das bei mir noch gar nie getestet ^^" Muss ich wirklich mal machen.
LöschenDas stimmt, je nach Browser und Monitorgröße sieht es eh immer anders aus :/ Gar nicht so einfach^^
Daaaaaaaaaaaaaaaaaaaaanke :* Das kann gut sein, dass es mit den Browsern zu tun hat. Ich hab das bei mir noch gar nie getestet ^^" Muss ich wirklich mal machen.
LöschenDas stimmt, je nach Browser und Monitorgröße sieht es eh immer anders aus :/ Gar nicht so einfach^^