# Box an der Seite mit "slide-out" Funktion



## MDX (16. September 2010)

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 (16. September 2010)

MDX hat gesagt.:


> so eine Box wie bei schülerVZ


Irgendwas stimmt mit deinem Link nicht.



			
				http://www.mwsbb.de/show/error/404 hat gesagt.:
			
		

> 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.



MDX hat gesagt.:


> 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 (17. September 2010)

spicelab hat gesagt.:


> 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 



spicelab hat gesagt.:


> 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.



spicelab hat gesagt.:


> 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 (17. September 2010)

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 (17. September 2010)

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 (17. September 2010)

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 (18. September 2010)

MDX hat gesagt.:


> 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 (20. September 2010)

Hi,

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

Viel Spass


----------

