Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Mittwoch, 6. April 2016

Shoutbox am Rand - ohne Javascript

lulu
Vor einiger Zeit habe ich ein Tutorial online gestellt in dem ich erkläre, wie eine Shoutbox mithilfe von Javascript am Seitenrand angezeigt werden kann. Daraufhin wurde ich mehrfach darauf hingewiesen, dass das auch einfacher geht - ohne Javascript. Und das ist natürlich völlig richtig ^_^ Aus diesem Grund folgen hier nun weitere Möglichkeiten, um eine Shoutbox in eurer Design zu bzw. eure Website zu integrieren.

Ohne Script - Ganz simpel mit CSS

Ganz simpel, nichts muss eingebunden werden oder geladen werden. Wir erstellen ein div mit der id "slideout". Dieses Div sorgt später dafür, dass die Box "aufgeht" wenn wir mit der Maus darüber fahren. Innerhalb dieses Divs können wir einen Text oder ein Bild (in meinem Beispiel ist es ein Bild) definieren. Dies ist der Bereich, auf den mit der Maus die Shoutbox geöffnet oder geschlossen werden kann. Darunter, immer noch innerhalb des "slideout" divs, erstellen wir nochmal ein Div mit der ID "shoutbox". In dieses Div fügen wir unseren Shoutbox Code rein.
<div id="slideout">
    <img src="shoutbox.png" />
    <div id="shoutbox">
        <!-- Hier kommt dein Shoutbox Code hin !-->
    </div>
</div>
Danach müssen wir per stylesheet noch dafür sorgen, dass die Shoutbox auf und zugeht.
Das sieht so aus:
#slideout {
    position: fixed;
    top: 40px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#shoutbox {
    position: fixed;
    top: 40px;
    left: -250px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#slideout:hover {
    left: 250px;
}
#slideout:hover #shoutbox {
    left: 0;
}

Fertig :) 

4 Kommentare:

  1. Ah, so geht das also mit der Shoutbox. *_* Ich muss zugeben, ich wusste zuvor gar nicht, wie das geht und bin für dein Tutorial (wie auch für deine anderen tollen Tutorials) sehr, sehr dankbar. Du erklärst alles leicht verständlich und hach, das ist einfach toll. <3 Vielleicht mach ich demnächst auch endlich eine Shoutbox für Code Geass. xD Ist so eine Shoutbox denn vor Botattacken oder so sicher? Ich hatte vor langer, langer Zeit mal eine gehabt, aber da wurde ich irgendwie richtig zugespammt, deswegen habe ich, seitdem ich Webseites mache, immer nur ein Gästebuch drin. xD

    AntwortenLöschen
    Antworten
    1. ^////////////////////^ daaaaanke! Ich freu mich ja immer über jeden Kommentar von dir *_* das ist wirklich lieb! Ich werd ja noch ganz rot hihi ^/////////////^ Ich fände eine Shoutbox auf Code Geass super :D Gerade für kleine Nachrichten sind sie wirklich super praktisch. Auf PinkPearl habe ich mit cbox gar keine Probleme mit bots (jedenfalls nicht mehr seit ich den captcha aktiviert habe ;)) Vielleicht wäre das ja was?

      Löschen
  2. Uhhh, danke *o* Endlich weis ich
    wie das funktioniert x3
    Ich freue mich auf weitere deiner
    tollen Tuts C:

    AntwortenLöschen
    Antworten
    1. Daaanke <3 ^/////////////^ immer wieder gerne :* Es kommen auf jeden Fall noch mehr solcher Tutorials online *_*

      Löschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates