Java Sub Navigation // Slidetimer + onmouseout Frage

[@pollo]

Guten Abend liebe At'ler guten Morgen liebe Studenten,

ich teste gerade ein par Navigationen für eine Seite aus. Mir schwebt da eine Art herunterfallende Navigation vor.

Ein gutes Beispiel ist die Seite von Playground Blues. Die Navigation soll auf der einen Seite platzsparend, innovativ und trotzdem für den ersten Besuch sichtbar angebracht werden.

Ich habe bei folgendem ersten Testversuch das Problem, dass die Navi

A) Nicht schnell genug zurück slidet
B) Funktioniert der onmouseout nicht wirklich

Das Problem mit B) fällt besonders auf, wenn man von links nach rechts über die Navigation fährt und dabei nicht wartet bis die Buttons komplett ausgefahren sind.

Ich hab zu Testzwecken einmal alle Wraps farbig eingefärbt und 3 weitere Navipunkte eingesetzt. Es handelt sich dabei um jeweils zwei Wrap Pärchen (Wrap1, Wrap2), welche zu weiteren Testzwecken in einem Superwrap befinden. Die Positionierung läuft mittel float. Das Mouseoverbild fährt über das eigentliche Bild. Damit möchte ich bezwecken, dass man nicht umbedingt auf das kleine Navifeld klicken muss, sondern auch auf das Feld drunter.

Ich hoffe die Angaben reichen und das Problem ist klar beschrieben. Einen schönen Abend wünscht

Jan

Das ist unser Problemkind

 

[Peitzi]

Guten Abend liebe At'ler guten Morgen liebe Studenten,

Unverschämtheit!



Ähm dein "Problemkind" führt wieder zu Playground Blues, wo aber alles bestens funktioniert. Das war sicher nicht so geplant, nicht oder?

 

[@pollo]

Ähm dein "Problemkind" führt wieder zu Playground Blues, wo aber alles bestens funktioniert. Das war sicher nicht so geplant, nicht oder?

Ach du heiliger das sind die Semesterferien tut mir leid ich war etwas unsortiert gut das einer aufpasst. :-D

lg

 

[Peitzi]

Ah ja, jetzt gehts, bzw. geht eben nicht.

Problem ist aber, dass man dir so schwer helfen kann, da das Javascript in den externen Dateien liegt, sprich man so nicht auslesen kann.
Am besten wäre es, würdest du es für diese Testzwecke direkt in die HTML einbinden.

 

[@pollo]

Okay Trick17...

Hier müsste man mehr sehen

 

[Witti]

Schau dir mal das hier an. Ich glaube sowas wolltest du oder?
http://www.wittberger.net/dev/at/

Hab das mal schnell mit jQuery zusammen gestöpselt.

 

[@pollo]

Das ist perfekt, perfekter geht es gar nicht!

 

[Witti]

Freut mich, wenn du noch Fragen hast oder Hilfe brauchst => einfach ne PN

 

[@pollo]

Nur eine klitzekleine noch. Wenn ich jetzt ein Bild einfügen möchte (unterschiedliche, welches erst sichtbar ist, wenn der Mouseover aktiv ist. Mit dem Script kann ich ja nur Einfluss auf den Zustand "vor" dem Mauskontakt herstellen.

 

[Witti]

Mein Script macht nix anderes als die Höhe des Divs zu verändern. Du musst das Bild mit Hilfe von CSS so positionieren damit es im Unsichtbaren Teil ist und erst sichtbar wird wenn das Div groß genug ist.

Könntest du mit overflow: hidden steuern im CSS.

 

[@pollo]

Muss ich hierfür den Div (zB. .navpoint1) ändern oder ein weiteres Div Packet in den .navpoint1 kleben?

 

[@pollo]

Über

background-image: url(1.png);
background-repeat: no-repeat;
background-position-y: 50px;

gelöst. Keine gute Lösung?

 

[Witti]

Hab mal ein Update bei meinem Beispiel gemacht.
Ich weiß auch nicht ob meine Lösung die beste ist => ist schon spät :-D

 

[@pollo]

Im Prinzip haben wir ja (s.o.) in unseren Lösungsansätzen einiges gleich (denke ich oder?). Wofür ist eigentlich der overflow.? dass deine Bilder nicht zu sehen ist hängt doch damit zusammen, dass deine Bilder oben einen Rand haben, der zum Glück 20px (Boxhöhe zugeklappt) nicht übersteigen oder?

 

[Witti]

Meine Lösung ist jetzt das was mir schnell eingefallen ist. Meine Bilder haben absichtlich 20px zusätzlich, dass sie nicht zu sehen sind. Das Overflow:hidden braucht man bei diesem Ansatz nicht. Das bräuchte man nur wenn man in die Divs was reinpackt.

Gibt sicher noch eine feinere Lösung als die +20px im Bild. Aber für das ist es mir jetzt eindeutig zu spät Werd es mir morgen nochmals anschaun.

 

[@pollo]

Dann habe ich das aber richtig verstanden ;D das war mir wichtig. Falls das Bild ja keine 20px oben hat, dann bau ich einfach über -> background-position-y: 20px; ein paar Pixel drauf.

Vielen Vielen Dank für den Super Support!

Eine geruhsame Nacht wünsche ich dir =)

 

[Chu]

schaut richtig gut aus also der Link von Wittis Jquery script(nennt man das so bei dem Jquery Framework?)