Header veschwindeet beim Skalieren

[rt1234]

Hallo,

wenn ich bei meiner Seite das Browserfenster schmäler mache und dann wieder aufziehe, bleibt der Header verschwunden. Erst wenn ich die Seite neu lade ist er wieder da:

http://goo.gl/9o0Kgv

Weiß wer woran das liegt?

 

[bodo92]

Ich konnte den von dir beschriebenen Fehler nicht reproduzieren.
Welchen Browser und welches OS nutzt du?

Edit: Du meinst nicht deinen Header sondern deine Slideshow!?

 

[threadi]

Das von dir eingebaute slidesjs-Script kann hier offenbar ab einem gewissen Zeitpunkt die Höhe nicht mehr bestimmen und setzt das auch niemals mehr zurück. Du könntest versuchen ein resize-Event zu ergänzen, welches den Slider reinitialisiert.

 

[bodo92]

Jop nach Langen suchen hab ich es nun auch gefunden.
Aber ist es nicht ungewöhnlich beim ausblenden dem Element die Breite zu nehmen, wäre da nicht ein einfaches "display: none;" direkt auf die <section> sinnvoller?

 

[threadi]

Das ist ein fertiges JavaScript was diese Eigenschaften setzt. Ich denke das Ausblenden per 0-Höhe ist nicht unbedingt gewollt, eher ein Nebeneffekt der vom Ersteller des Scripts nicht beachtet wurde. Wenn man daran etwas ändern möchte muss man entweder das Script anpassen oder einen alternativen Weg finden.

 

[rt1234]

Danke, Leute. Leider blick ich bei JS Script gar nicht durch. Wie und wo soll ich denn den Resize Event setzen?

 

[Tronjer]

Danke, Leute. Leider blick ich bei JS Script gar nicht durch.

Das ist kein valides Argument. Wenn man etwas nicht kann, dann lernt man es eben.

Die Ursache liegt darin, dass div.slidesjs-container bei unterschreiten einer bestimmten Viewport-Breite per Script einen Inline-Stile von height: 0 zugewiesen bekommt. Insofern hast du folgende Möglichkeiten: a) min-width auf den Body, b) Media-Queries mit !important, um die Inline-Styles zu überschreiben, c) slides.js ändern. Die height wird dort in Zeile 215 festgelegt: height = (this.options.height / this.options.width) * width und in Zeile 220 returned. Da darf als Ergebnis nicht 0 zurückgeliefert werden.

 

[rt1234]

Danke für die Hilfe! Ich hab mir jquery.slides.min.js angeschaut, leider finde ich die Zeilen dort nicht, da das ganze nur 8 Zeilen hat und praktisch alles in Zeile 7 steht. :(

Ich habe nur das gefunden:

c=this.options.height/this.options.width*d,this.options.width=d,this.options.height=c,a(".slidesjs-control, .slidesjs-container",b).css({width:d,height:c})},d.prototype.next=function(b){var c;return c=a(this.element),this.data=a.data(this),a.data(this,"direction","next"),void 0===b&&(b=this.options.navigation.effect),
​

Wenn ich 0 auf einen anderen Wert setze passiert aber nichts, ist das falsch?

 

[scbawik]

leider finde ich die Zeilen dort nicht, da das ganze nur 8 Zeilen hat und praktisch alles in Zeile 7 steht. :(

http://jsbeautifier.org

 

[rt1234]

Das bringt gar nichts, es ist trotzdem in einer Zeile:

http://goo.gl/ZKHvvX

 

[scbawik]

Das bringt gar nichts, es ist trotzdem in einer Zeile:

http://goo.gl/ZKHvvX

Wie wärs wenn du vl auch noch auf "beautify" klickst...

 

[Tronjer]

Ich hatte ja auch nicht von der slides.min.js sondern von der slides.js gesprochen. Die steht im Github Repo des Autors.

 

[rt1234]

Sorry, jetzt kenn ich mich gar nimmer aus. Die slides.js verwend ich ja gar nicht, oder? Hab ich zumindest nicht eingebunden.

 

[scbawik]

Sorry, jetzt kenn ich mich gar nimmer aus. Die slides.js verwend ich ja gar nicht, oder? Hab ich zumindest nicht eingebunden.

…

Die slides.min.js ist die minifizierte Version der slides.js und ist daher nicht gut lesbar.
Funktionsweise der slides.js ist die selbe.