Erledigt: ausfahrbares Sideboard

 


Jim Sonic
Überläufer

01.07.07
04:39 Uhr
Hat jemand von euch eine Idee, wie sich in Wordpress eine ausfahrbare Sidebar realisieren lässt? Ich will erstmal keine Sidebar angezeigt bekommen. Erst bei mouseover über einen Button soll die komplette Sidebar seitlich rechts ausfahren. So wie die Schubladen bei manchen Musikplayern.

Es gibt ein Ajax Spoiler Plugin, aber ich bekomme es nicht auf die Sidebar angewendet...und auch nicht mit dem Button in Verbindung gebracht...ähm..mist
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
rotor
Veteran

01.07.07
12:23 Uhr
ich denke das müsste dann per javascript sein, und in dem falle hat die moo libary bestimmt etwas dafür parat: http://mootools.net/ ()
leider hab in in richtung js nix drauf und kann ansonsten nicht weiterhelfen ^^
Link zu diesem Beitrag in die Zwischenablage kopieren
rotor
Veteran

01.07.07
12:30 Uhr
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

01.07.07
13:55 Uhr
Danke für den Tipp. Ich habe mir schon gedacht, dass es mit damit geht. Prototype hat auch einen Slide-Befehl. Allerdings fehlt mir noch das Verständnis für die genaue Anwendung auf die Sidebar in Wordpress bzw. auf einen Button. Ich probier mal etwas herum..
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

02.07.07
02:42 Uhr
mein Problem ist jetzt folgendes:

hiermit kann ich meine sidebar so einbinden, dass sie genau richtig angezeigt wird.

<div id=“sidebar“><?php get_sidebar(); ?></div>

jetzt soll sie aber beim mouseover „hereinfahren“. mein Menüpunkt dafür sieht so aus

<a href=“#“ id=“sidebar“ mouseover=“new Effect.BlindRight(this, {duration: 16})“>Sidebar ausfahren<span><?php get_sidebar(); ?></span></a>

aber das klappt leider gar nicht. ich glaube nicht, dass es am script liegt, sondern eher an der Einbindung? Ist das vom Prinzip her überhaupt so richtig?
Link zu diesem Beitrag in die Zwischenablage kopieren
Abalone
Gast

02.07.07
10:43 Uhr
Auf die Schnelle: es muss onmouseover heissen. Ob das schon die Lösung ist, weiß ich nicht.
Link zu diesem Beitrag in die Zwischenablage kopieren
kero
Gast

02.07.07
11:21 Uhr
js:
  1. window.addEvent('domready', function(){
  2. var mySlide2 = new Fx.Slide('sidebar', {mode: 'horizontal'});
  3. $('toggle2').addEvent('mouseover', function(e){
  4. e = new Event(e);
  5. mySlide2.toggle();
  6. e.stop();
  7. });
  8. });
Quelltext in Zwischenablage kopieren

html:
  1. <a id="toggle2" href="#" name="toggle2">toggle</a>
  2. <div id="sidebar"><?php get_sidebar(); ?></div>
Quelltext in Zwischenablage kopieren

geht das?
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

02.07.07
13:46 Uhr
Der Knopf „toggle“ erscheint zwar, aber hat keine Funktionalität. Muss das div mit der „id=sidebar“ nicht in den Link eingebaut werden?
Link zu diesem Beitrag in die Zwischenablage kopieren
kero
Gast

02.07.07
14:04 Uhr
hast du die anderen js-dateien (?) richtig eingebunden?
ersetz mal mouseover durch click und klicke dann den link.
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

02.07.07
14:16 Uhr
oh, ist das mootools oder prototype/scriptaculous? ich habe nur zweite eingebunden, weil ich gehört hab, dass man nur ein Framework einbinden soll.. planlos

kann ich mootools problemlos zusätzlich einbinden?
Link zu diesem Beitrag in die Zwischenablage kopieren
kero
Gast

02.07.07
14:36 Uhr
das kommt in den head:
  1. <script type="text/javascript" src="/mootools.svn.js"></script>
  2. <script type="text/javascript" src="/demos.js"></script>
  3. <script type="text/javascript">
  4. window.addEvent('domready', function(){
  5. var mySlide = new Fx.Slide('sidebar', {mode: 'horizontal'});
  6. $('toggle').addEvent('mouseover', function(e){
  7. e = new Event(e);
  8. mySlide.toggle();
  9. e.stop();
  10. });
  11. });
  12. </script>
Quelltext in Zwischenablage kopieren

dazu einfach die beiden js-dateien nehmen:
http://demos.mootools.net/demos/mootools.svn.js
http://demos.mootools.net/scripts/demos.js

und in den body kommt dann das:
  1. <a id="toggle" href="#" name="toggle">button</a>
  2. <div id="sidebar"><?php get_sidebar(); ?></div>
Quelltext in Zwischenablage kopieren

bei mir funktionierts.
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

02.07.07
15:43 Uhr
es klappt nicht...muss der Link nicht auch das div umschließen?

was hast du denn im stylesheet fuer die Sidebar drin?

die mootools.svn.js ist auch mal ganze 180 kb groß...ein bissel viel fuer einen effekt...
Link zu diesem Beitrag in die Zwischenablage kopieren
kero
Gast

02.07.07
15:47 Uhr
ich hab keine stylesheets. ich hatte nur die beiden js dateien und die eigentliche html datei.

wenn du auch die beiden js dateien im gleichen ordner wie die html datei hast, gehts. wenn nicht, nimm mal testweise die anderen frameworks raus und schreib in das sidebar-div nur ein paar wörter rein.

eingebunden ists ja richtig?
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

02.07.07
17:44 Uhr
das script funktioniert jetzt auch bei mir...allerdings wenn ich mootools auskommentiert habe ouw

scheinbar kann prototype auch mit fx.slide umgehen..

das sideboard ist allerdings von beginn an ausgefahren. wie kann ich dem script denn sagen, dass die sidebar von beginn an nicht sichtbar, also eingefahren sein soll?
Link zu diesem Beitrag in die Zwischenablage kopieren
Jim Sonic
Überläufer

03.07.07
03:18 Uhr
ah..ein Plugin hat mootools heimlich geladen. daher funktionierts. weisst du denn wie ich das script ändern muss, damit die sidebar zunächst unsichtbar ist und erst bei mouseover rechts ausfährt?
Link zu diesem Beitrag in die Zwischenablage kopieren
rotor
Veteran

03.07.07
10:12 Uhr
Jim Sonic schrieb am 02.07.07, 15:43 Uhr:

es klappt nicht...muss der Link nicht auch das div umschließen?

was hast du denn im stylesheet fuer die Sidebar drin?

die mootools.svn.js ist auch mal ganze 180 kb groß...ein bissel viel fuer einen effekt...

irgendwo gibt es eine web-ap., die einem ermöglicht eine abgespeckte moo datei zu bekommen, also zugeschnitten auf das was du nur brauchst, aber ich hab das bis jetzt nur einmal gesehen als ich unserem programierer über die schulter geschaut hab – mom
öhm, dass sollte es sein: http://icebeat.bitacoras.com/mootools/packito/
Link zu diesem Beitrag in die Zwischenablage kopieren
 
#