Dokumentgröße auslesen

[noneofthem]

Hallo!
Ich hab ein kleines Problem. Und zwar möchte ich, dass mein Script die Größe des Dokumentes ausliest und dann 4 von mir festgelegte divs an diese Größe anpasst. Vorher soll noch mein Wert habstand davon subtrahiert werden.

Das ganze klappt in Chrome wunderbar, nur Firefox macht da zicken. Hat jemand eine Idee, was ich da falsch gemacht habe? Nutze für das Script die Jquery Bibliothek

  
var habstand = 307  
  
  
$(document).ready(function(){  
    var hohe = document.height;  
        $("#kapitel1").css("height",hohe - habstand);  
	$("#kapitel2").css("height",hohe - habstand);  
	$("#kapitel3").css("height",hohe - habstand);  
	$("#kapitel4").css("height",hohe - habstand);  
  
});  
  

[suit]

Das ganze klappt in Chrome wunderbar, nur Firefox macht da zicken.

Definiere "zicken".

[noneofthem]

Das ganze klappt in Chrome wunderbar, nur Firefox macht da zicken.

Definiere "zicken".

also bei firefox verändert sich die größe überhaupt nicht, als ob das script ignoriert würde

[suit]

Das ganze klappt in Chrome wunderbar, nur Firefox macht da zicken.

Definiere "zicken".

also bei firefox verändert sich die größe überhaupt nicht, als ob das script ignoriert würde

Ja, das dachte ich mir bereits :)

Hast du denn schon debug-Ausgaben gemacht um nachzuvollziehen ob alle Werte an den entsprechenden Stellen so sind, wie du sie erwartest?

Hast du schon in die Fehlerkonsole geschaut?

[noneofthem]

Das ganze klappt in Chrome wunderbar, nur Firefox macht da zicken.

Definiere "zicken".

also bei firefox verändert sich die größe überhaupt nicht, als ob das script ignoriert würde

Ja, das dachte ich mir bereits :)

Hast du denn schon debug-Ausgaben gemacht um nachzuvollziehen ob alle Werte an den entsprechenden Stellen so sind, wie du sie erwartest?

Hast du schon in die Fehlerkonsole geschaut?

es wird kein fehler ausgegeben. ich hab auch die werte überprüft, in firefox lässt er die height angabe meines divs komplett unangetastet :/

[ChrisB]

Hi,

ich hab auch die werte überprüft, in firefox lässt er die height angabe meines divs komplett unangetastet :/

Du solltest nicht nur prüfen, welcher Wert zu setzen versucht wird (ja offenbar keiner, oder ein falscher), sondern erst mal, ob die Werte, die du zur Berechnung heranziehst, auch problemlos ermittelt werden können.

MfG ChrisB

[noneofthem]

Hi,

ich hab auch die werte überprüft, in firefox lässt er die height angabe meines divs komplett unangetastet :/

Du solltest nicht nur prüfen, welcher Wert zu setzen versucht wird (ja offenbar keiner, oder ein falscher), sondern erst mal, ob die Werte, die du zur Berechnung heranziehst, auch problemlos ermittelt werden können.

MfG ChrisB

so ich hab mal nachgeschaut und bei firefox scheitert es schon daran, dass er die höhe des dokumentes nicht auslesen kann. wenn ich den wert per alert ausgeben will kommt nur "undefined". was kann ich da tuen?

[suit]

so ich hab mal nachgeschaut und bei firefox scheitert es schon daran, dass er die höhe des dokumentes nicht auslesen kann. wenn ich den wert per alert ausgeben will kommt nur "undefined". was kann ich da tuen?

Den Beitrag von molily lesen :)

[ChrisB]

Hi,

$("#kapitel1").css("height",hohe - habstand);

Das Ergebnis der Subtraktion enthält keine Angabe der Einheit - ausschließlich im Sonderfall 0 beinhaltet es also eine gültige Längenangabe.

MfG ChrisB

[suit]

$("#kapitel1").css("height",hohe - habstand);

Das Ergebnis der Subtraktion enthält keine Angabe der Einheit - ausschließlich im Sonderfall 0 beinhaltet es also eine gültige Längenangabe.

Das ist im Fall von jQuery kein Problem.

[MudGuard]

Hi,

$("#kapitel1").css("height",hohe - habstand);
Das Ergebnis der Subtraktion enthält keine Angabe der Einheit - ausschließlich im Sonderfall 0 beinhaltet es also eine gültige Längenangabe.
Das ist im Fall von jQuery kein Problem.

Welche Einheit setzt jQuery denn dann?
Denn dem Browser wird es egal sein, ob der Wert von einem jQuery- oder einem anderen Javascript gesetzt wird ...

cu,
Andreas

[suit]

$("#kapitel1").css("height",hohe - habstand);
Das Ergebnis der Subtraktion enthält keine Angabe der Einheit - ausschließlich im Sonderfall 0 beinhaltet es also eine gültige Längenangabe.
Das ist im Fall von jQuery kein Problem.

Welche Einheit setzt jQuery denn dann?

Die, die bereits gesetzt ist (bzw. wenn keine exisitert, px) - das ist in der Doku leider nur sehr indirekt beschrieben.

Denn dem Browser wird es egal sein, ob der Wert von einem jQuery- oder einem anderen Javascript gesetzt wird ...

Die css-Methode von jQuery reicht den Wert aber nicht einfach 1:1 durch, das Ding kann etwas mehr als nur einfach eine lesbarere Variante von style zu sein :)

Beispielsweise wäre auch diese Notationsform denkbar:

.css('height', function(index, value) {  
  return 10;  
});

Auch wenn dieses Beispiel etwas unsinnig ist, wenn das zweite Argument als funktion übergibt die nichts anderes tut als nur einen Wert rauszurotzen.

Aber sowas lässt sich z.B. verwenden um die aktuellen wert auszulesen und auf ein anderes anzuwenden

$('#foo').css('height', function(index, value) {  
  $('#bar').css('height', value * 2);  
  return value/2;  
});

Das sorgt dafür, dass #bar doppelt so hoch wird wie foo und sich die höhe von foo auf die Hälfte reduziert.

[molily]

Welche Einheit setzt jQuery denn dann?

Die, die bereits gesetzt ist (bzw. wenn keine exisitert, px) - das ist in der Doku leider nur sehr indirekt beschrieben.

Nein. jQuery verwendet nicht die Einheit, die der aktuelle Wert besitzt. Das hieße ja, dass .css('height', '2') zu height: 2em führen würde, wenn vorher height: 1em gesetzt war. Das kann jQuery gar nicht, weil der computed value, den jQuery auslesen kann, immer in Pixel ist (bei Eigenschaften, welche als px als Einheit erlauben bzw. als Pixelwerte angewendet werden). jQuery hängt einfach px dran, wenn man einen Number-Wert übergibt und wenn es sich nicht um eine Eigenschaft handelt, die eine reine Zahl erlaubt (wie line-height, font-weight, opacity usw.).

Das kann man im Code sehr einfach nachvollziehen:

https://github.com/jquery/jquery/blob/255460e4836e86b86f48dd5b7d2a2cbf3f996de2/src/css.js#L98
https://github.com/jquery/jquery/blob/255460e4836e86b86f48dd5b7d2a2cbf3f996de2/src/css.js#L50

(Hier ist der Code von jQuery 1.7.1 verlinkt.)

Mathias

[molily]

jQuery verwendet nicht die Einheit, die der aktuelle Wert besitzt. Das hieße ja, dass .css('height', '2') zu height: 2em führen würde

Ups, es muss natürlich .css('height', 2) heißen.
.css('height', '2') wird nochmal anders behandelt, dafür gibt es einen Hook:

https://github.com/jquery/jquery/blob/255460e4836e86b86f48dd5b7d2a2cbf3f996de2/src/css.js#L186

Dabei wird der String wird zu Number konvertiert und in jedem Fall 'px' drangehängt.

Mathias

[suit]

Dabei wird der String wird zu Number konvertiert und in jedem Fall 'px' drangehängt.

Wenn ich den Code richtig lese bedeutet das aber, dass relative Werte  (wie sie in der Doku beschrieben werden) nur mit px funktionieren.

z.B. das hier:
.css('left', '+=10');

[molily]

$(document).ready(function(){
    var hohe = document.height;

Es gibt kein document.height. Zumindest wüsste ich nicht, wo das definiert ist. Wo hast du das her? Der zuständige Standardentwurf kennt es nicht.

Mit $(document).height() kannst du die Höhe des Dokuments in Erfahrung bringen.

Davon abgesehen scheint es mir, als könntest du die Aufgabe auch einfach mit CSS, genauer mit absoluter Positionierung erreichen.

Mathias

[noneofthem]

$(document).ready(function(){
    var hohe = document.height;

Es gibt kein document.height. Zumindest wüsste ich nicht, wo das definiert ist. Wo hast du das her? Der zuständige Standardentwurf kennt es nicht.

Mit $(document).height() kannst du die Höhe des Dokuments in Erfahrung bringen.

Davon abgesehen scheint es mir, als könntest du die Aufgabe auch einfach mit CSS, genauer mit absoluter Positionierung erreichen.

Mathias

ahh dein post wurde mir zuerst nicht angezeigt. aber das war es! vielen dank!