[jQuery] Facebook-Social Plugins mit Sidebar-Button sichtbar machen

[GXBo]

Guten Tag liebe Community.

Ich habe auf folgender Seite ein kleines Problem: http://www.tanz-kult.at/. Ich möchte bei den linken 2 Buttons (werden mittels js-Datei eingebunden) einen 3. Button hinzufügen der folgendes machen soll:

Sobald der User auf diesen Button klickt soll der Live-Stream (Facebook-Social-Plugin) von der linken Seite herein "sliden". Ich möchte 1. diesen Button selbst designen (man könnte dies ja zB über ein Bild das angelickt wird realisieren) und dann sollte (wenn es geht sogar der Bildschirm schwarz werden) der Live-Stream in die Mitte des Bildschirms sliden und dort angezeigt werden bis man auf ein "X" oder "Hier drücken um zu schließen" klickt.

Würde mich sehr freuen wenn mir jemand mit diesem Problem weiterhelfen könnte, bin noch ein kleiner JavaScript-

Danke!

Beispiel zur genaueren Erklärung:
Beispiel - es sollte sich genauso Verhalten, dass wäre natürlich auch cool! Das wenn man mit der Maus über den "Button" geht dass dann der Chat erscheint.

 

[Abro]

Wenn wir jetzt mal das CSS des Buttons weglassen (dürfte ja noch machbar sein ;o)
Dann wäre mein Ansatz auf die Schnelle: http://jsfiddle.net/qMeKm/2/


Noch einmal in der Übersicht:

js // benötigt jquery >= 1.3.2, jquery ui >=1.7 (nimm einfach die neusten, 1.4.2 & 1.8)

$(function()
{
    $('#dialog').dialog(
    {
        autoOpen : false,
        show     : 'drop',
        hide     : 'drop'
    });
        
    $('#opener').click(function()
    {
        $('#dialog').dialog('open');
        return false;
    });
});

<a id="opener" href="#foo">klick me!</a>
        
<div id="dialog" title="Basic dialog">
    <p>Hier kommt das Widget herein.</p>
</div>

 

[GXBo]

Wenn wir jetzt mal das CSS des Buttons weglassen (dürfte ja noch machbar sein ;o)
Dann wäre mein Ansatz auf die Schnelle: http://jsfiddle.net/qMeKm/2/


Noch einmal in der Übersicht:

js // benötigt jquery >= 1.3.2, jquery ui >=1.7 (nimm einfach die neusten, 1.4.2 & 1.8)

$(function()
{
    $('#dialog').dialog(
    {
        autoOpen : false,
        show     : 'drop',
        hide     : 'drop'
    });
        
    $('#opener').click(function()
    {
        $('#dialog').dialog('open');
        return false;
    });
});

<a id="opener" href="#foo">klick me!</a>
        
<div id="dialog" title="Basic dialog">
    <p>Hier kommt das Widget herein.</p>
</div>

thx für die wirklich hilfreiche information

gibt es auch ne möglichkeit die breite dieses dialoges und so einzustellen? und designen kann ich den dialog via css und der id "dialog" oder?

vielen dank nochmal und einen schönen tag!

 

[Abro]

Sicherlich, die ganzen Optionen finden sich unter: http://jqueryui.com/demos/dialog/#animated

Wenn man sich UI herunterläd sind CSS Dateien & imgs mit dabei, daran ist denke ich ziemlich gut zu sehen
welche Möglichkeiten man zum Stylen hat. Du schreibst das CSS dann aber nicht für div#dialog, sondern
für das was jQuery daraus generiert. Also z.B. div.ui-dialog für die umgebende Box, div.ui-dialog-titlebar für den Title, etc.

Weiterhin gibt es viele vorgefertigte Themes mit denen man denke ich schon sehr weit kommt,
die kann man sich unkompliziert zusammenstellen ( http://jqueryui.com/themeroller/ )
und dann muss man nur noch die entsprechenden CSS-Dateien / imgs der "Hauptapplikation" damit ersetzen.