Box an der Seite mit "slide-out" Funktion

[MDX]

Hallo,
ich habe ein kleines Problem.
Und zwar will ich gerne so eine Box wie bei schülerVZ

an der linken und an der rechten Seite haben.
Möglichst auch mit einem Bild, was dann acuh so wie auf dem Bild an der Seite klebt. Jedoch links zwei und rechts zwei.
Beim klick darauf, sollen diese Boxen dann jeweils "ausfahren" und den Inhalt anzeigen. Erst wenn man die komplette Box wieder verlässt, soll diese weider hineinfahren.
Während die Box sichtbar ist, soll das Bild, wo man raufklicken muss verschwinden/überdeckt werden.
Hat jemand da vielleicht eine Idee, wie ich das anstellen könnte? Danke schonmal.

BTW: Falls dass das falsche Forum ist, bitte verschieben, aber es passt eig zu HTML, CSS und JS...

 

[SpiceLab]

so eine Box wie bei schülerVZ

Irgendwas stimmt mit deinem Link nicht.

Bild existiert nicht!

Und auf der SVZ-Seite muß man scheinbar ein registriertes Mitglied sein, um diese Boxen in Aktion zu Gesicht zu bekommen. Ich konnte sie dort zumindest nicht ausfindig machen.

Beim klick darauf, sollen diese Boxen dann jeweils "ausfahren" und den Inhalt anzeigen. Erst wenn man die komplette Box wieder verlässt, soll diese weider hineinfahren.
Während die Box sichtbar ist, soll das Bild, wo man raufklicken muss verschwinden/überdeckt werden.
Hat jemand da vielleicht eine Idee, wie ich das anstellen könnte? Danke schonmal.

BTW: Falls dass das falsche Forum ist, bitte verschieben, aber es passt eig zu HTML, CSS und JS...

Jo, schließlich versammeln sich ja auch alle drei genannten Sprachen in dem Webdokument

Deinen Wunsch kannst du dir letztenendens aber nur unter Zuhilfenahme von JS erfüllen, denn HTML stellt hier das "statische" Gerüst bereit, CSS schmückt es nach Belieben aus, und JS sorgt für die "Dynamik".

Das Rad muß aber nicht neu erfunden werden, denn glücklicherweise stellen JS-Frameworks wie beispielsweise jQuery entsprechende Effekte bereit.

 

[MDX]

Irgendwas stimmt mit deinem Link nicht.
Und auf der SVZ-Seite muß man scheinbar ein registriertes Mitglied sein, um diese Boxen in Aktion zu Gesicht zu bekommen. Ich konnte sie dort zumindest nicht ausfindig machen.

Also hab den Link aktualisiert, aber eig passiert da nichts beim draufklicken, da öffnet sich nur so ein fenster mit einer umfrage, aber ich will halt nur zeigen, wie die Box an der linken Seite (bzw. rechten) aussehen soll

Deinen Wunsch kannst du dir letztenendens aber nur unter Zuhilfenahme von JS erfüllen, denn HTML stellt hier das "statische" Gerüst bereit, CSS schmückt es nach Belieben aus, und JS sorgt für die "Dynamik".

Ja dachte ich mir eigentlich schon.

Das Rad muß aber nicht neu erfunden werden, denn glücklicherweise stellen JS-Frameworks wie beispielsweise jQuery entsprechende Effekte bereit.

Also jQuery kenn ich schon, aber ich weiß nicht wie ich das hinbekomme, das auf der einen Seite die Box links ist (also das geht mt position:absolute und dann die Angaben etc. wäre nicht so ein Problem), aber dass sie dann beim mousover rausfährt und erst wenn man wieder weggeht wieder reinfährt. Eigentlich genau wie hier: http://demo.kryn.org/admin (admin:admin) und dann auf der linken Seite "Erweiterungen".

 

[SpiceLab]

Der Quellcode deiner heute genannten Seite offenbart doch alles, was dich interessiert

Dort wird mootools genutzt.

Grundsätzlich läuft das so ab: Beim Überfahren der Box (onmouseover-Event) wird die Box sichtbar bzw. reingeschoben, und beim Verlassen mit dem Mauszeiger (onmouseout) tut sie selbiges.

 

[MDX]

Ich würde aber gerne ein Lösung in jQuery haben, da dass das JS Framework ist, was ich sowieso schon benutze, und womit alles andere realisiert ist...
Deswegen wäre es schön wenn vllt jemand einen Anfang dafür hat, oder eine ganze Lösung... Außerdem gibt es zw Motools und jQuery immer wieder Probleme :/

 

[Paspirgilis]

Da ist es wahrscheinlich interessanter wenn cih dir nur den Link zum JQuery Docu gebe zum Positioning.
http://jqueryui.com/demos/position/
JQuery UI is dann wahrscheinlich auch schon mit bei dir.
Falls nich kurze erklärung:
JQuery UI ist so eine Art zusatz für JQuery, mit ein paar echt coolen sachen dabei.
Das tolle daran ist, dass man den Code wie einen Satz lesen kann
schaus dir einfach mal an.

 

[SpiceLab]

Ich würde aber gerne ein Lösung in jQuery haben, da dass das JS Framework ist, was ich sowieso schon benutze, und womit alles andere realisiert ist...
Deswegen wäre es schön wenn vllt jemand einen Anfang dafür hat, oder eine ganze Lösung... Außerdem gibt es zw Motools und jQuery immer wieder Probleme :/

Mootools ist hier nicht auf meinem Mist gewachsen, sondern kam aus deiner Ecke mit dem genannten Beispiel-Link.

Stattdessen hatte ich hier gestern in meiner ersten Antwort jQuery als (das populärste Framework) ins Rennen geschickt, und dir den Link zu den Effekten dieses Frameworks empfohlen, die du für dein Vorhaben zur Auswahl hast.

Sorry, wenn du dort nicht vorbeischaust, um deinen Horizont zu erweitern, und deine Vorstellungen in die Tat umsetzen zu können, kann ich dir hier auch nicht weiterhelfen

Wenn ich Interesse an einem belanglosen u. oberflächlichen Plausch verspüre, werd' ich dem mit-an-Wahrscheinlichkeit-grenzender-Sicherheit nicht hier im Forum nachgehen ;-)

Vielen Dank für's Gespräch!

Ciao!

 

[Jan-Frederik Stieler]

Hi,

$(function(){
	$('#button').click(function(){
		$('#slidebox').animate({width:'toggle'},slow);		   
	});			   
});

Viel Spass