jquery Höhe ermitteln

[nierewa]

Hallo,

folgendes Problem.

Ich möchte mit jQuery die Höhe eines Div ermittel. Diese Höhe möchte ich dann einem Element geben.
Ich kenne mich mit Jquery nicht sehr aus, aber das funktioniert schon mal

$(document).ready(function(){ 
var hoehe_header = $('#header').innerHeight();
alert(hoehe_header);

$('#element').height(hoehe_header);
});

Allerdings habe ich das Problem das der Div vom Inhalt verändert wird und somit die ausgelesene Höhe nicht stimmt. Sie wird mit 95px ausgelesen, hat aber 157px.

Da es die $(window).load funktion nicht mehr gibt, benutze ich das Pendant dazu:

$(window).on('load', function (){
var hoehe_header = $('#header').outerHeight();
alert(hoehe_header);

$('#element').height(hoehe_header);
});

Das funktioniert, aber erst wenn die Seite schon geladen ist. Man sieht dann natürlich wenn sich die Höhe des Elementes ändert.

Bekommt man das hin das man nichts von der Änderung mitbekommt?
Und wenn ja, wie?

Danke

 

[Defender1st]

Verstehe ich es richtig? Du versuchst die endgültige Höhe von einem DIV zu ermitteln, dessen Inhalt noch nicht vollständig geladen ist?

Das wird nicht gehen.

 

[Cool Master]

Was hast du vor? Ein Header sollte eigentlich seine höhe nicht ändern.

 

[netzgestaltung]

Hi,

0. Das Phänomen nennt sich "Flash of unstyled Content" oder FLOUC
1. Könntest du ein Timeout setzen um auf das fertigladen des inhalts zu warten.
2. Statt auf "load" könntest du auf ein anderes Event warten, zb bei "ready" sollten alle bilder (vermutlich verändert sich die höhe des divs wegen eines geladen bildes)
3. Wenn der Div innherhalb des Headers liegt sollte der dessen höhe automatisch erhalten, wenn sie nicht näher definiert wird und kein "float" innerhalb verwendet wird. Wird ein Float verwendet, könnte ein clearfix oder eine umstellung auf flex-box helfen
4. Wenn alles nichts hilft könntest du im CSS schon mal eine erwartbare höhe festlegen und der Sprung wäre dann kleiner
5. Du könntest nochmal die HTML Struktur überarbeiten, damit das nicht nötig ist.

 

[DubZ]

gibt es denn kein Event auf das du zugreifen kannst, welches die Änderung des Inhaltes auslöst? Was genau löst die Änderung des Inhaltes aus?

 

[nierewa]

Hallo,

zuerst mal danke für die Antworten.

Ich hab die Seite jetzt umgabaut so daß ich das nicht mehr brauche.

Aber rein informativ:

Könntest du ein Timeout setzen um auf das fertigladen des inhalts zu warten.

Wie mache ich das?

 

[netzgestaltung]

also der nachteil eines timeouts ist die festgelegte zeit, wärend das laden oft unterschiedlich lange dauert.

ansonsten:

;(function(){
  var timer,
      my_action = function(){
        timer = clearTimeout(timer);
        
        timer = setTimeout(function(){
          console.log('3 Sek später');
        }, 3000);
      };
      
  my_action();
})();

Ergänzung (3. Juni 2020)

Das lässt sich so in die browser konsole einfügen und testen.

Ergänzung (3. Juni 2020)

weiters ist zu beachten, das setTimeout die ausführung in den asyncronen bereich schiebt, dh wenn innerhalb eines setTimeouts eine äußere Variable geseändert wird, geschieht das nach der timeoutzeit+der ausführungszeit (Die wieder in jedem Browser anders ist).

manchmal will man das für komplexe operationen, dann sieht man oft ein setTimeout mit 1ms Zeitffenster.

 

[ger.ruler]

lädst du Bilder in deinen

$('#header')

?
In der html oder per Script ?

 

[nierewa]

lädst du Bilder in deinen

Genau. Aber das Bild hat eine Prozentuale Breite und die Höhe auto.

Deshalb wird beim document.ready nicht die richtige Höhe ermittelt, sondern nur die min-height

 

[ger.ruler]

jo, bei document ready wird nur darauf gewartet, dass sich das DOM aufgebaut hat.....
hast du dein bild per html integriert oder lädst du es per JS hinein ?

was mir spontan einfällt ist es, auf das .load event des img-objects zu warten und in der callback die höhe an dein weiteres element zu übergeben

 

[netzgestaltung]

Wenn es mit JS geladen würde könnte man ein event triggern, das die höhenmessung auslöst

$(document).ready(function(){
  var $image = $('<img />').attr('src', 'BILDURL');
   
  $('body').on('myImageLoaded', function(){      
    hoehe_header = $('#header').innerHeight();
    alert(hoehe_header);

    $('#element').height(hoehe_header);
  });

  $image.prependTo('#header');
  $('body').trigger('myImageLoaded');
});

 

[ger.ruler]

$(IMG-ID).load(()=>{
let hoehe_header = $('#header').innerHeight();
alert(hoehe_header);
$('#element').height(hoehe_header);
});

Als Idee basierend auf deinem Code-Schnipsel

Ergänzung (3. Juni 2020)

Wenn es mit JS geladen würde könnte man ein event triggern, das die höhenmessung auslöst

$(document).ready(function(){
  var $image = $('<img />').attr('src', 'BILDURL');
   
  $('body').on('myImageLoaded', function(){      
    hoehe_header = $('#header').innerHeight();
    alert(hoehe_header);

    $('#element').height(hoehe_header);
  });

  $image.prependTo('#element');
  $('body').trigger('myImageLoaded');
});

Es gibt ja in jquery ein event für ein geladenes bild das geht simpler

 

[netzgestaltung]

Joa, jQuery ist ja nicht wirklich nötig für das was hier gemacht wird, daher würde ich auf spezifische events eher verzichten. Allerdings ist es für mich auch schwer deinen obigen code überhaupt zu lesen... ( ()->{ let... } ) . Wirkt halt wie ein kurzsprache ;-)

 

[ger.ruler]

Joa, jQuery ist ja nicht wirklich nötig für das was hier gemacht wird, daher würde ich auf spezifische events eher verzichten. Allerdings ist es für mich auch schwer deinen obigen code überhaupt zu lesen... ( ()->{ let... } ) . Wirkt halt wie ein kurzsprache ;-)

ob das Sinn ergibt oder notwendig ist, dass muss jeder Fragensteller für sich entscheiden Ich möchte ihm halt nur bei seinem spezifischen Problem helfen

Arrow-Functions sind halt super bequem und kürzen etwas Code ab

 

[Sparta8]

weiters ist zu beachten, das setTimeout die ausführung in den asyncronen bereich schiebt, dh wenn innerhalb eines setTimeouts eine äußere Variable geseändert wird, geschieht das nach der timeoutzeit+der ausführungszeit (Die wieder in jedem Browser anders ist).

manchmal will man das für komplexe operationen, dann sieht man oft ein setTimeout mit 1ms Zeitffenster.

Könntest du hierzu ein Beispiel geben?

 

[netzgestaltung]

Leider, habe ich nicht parat. Vielleicht habe ich mich auch schlecht ausgedrückt.

Die Ausführung wird dann hinter den syncronen Ausführungsstack geschoben. Die Millisekunden sind daher nicht garantiert sondern der Mindestintervall bevor die Ausführung wieder in den Stack eingereiht wird.

Bei 1m ist es durchaus warscheinlich, das noch der Grundstack ausgeführt wird und die Ausführung im setTimeout erst danach oder irgendwann dazwischen stattfindet.

Mozilla beschreibt das aber mglw besser (gelbe Note): https://developer.mozilla.org/en-US...synchronous/Timeouts_and_intervals#setTimeout

 

[ger.ruler]

also mit setTimeout operationen zu beeinflussen halte ich persönlich für keine gute idee.... wenn es notwendig ist, auf operationen zu warten dann schreibe ich eine async function und arbeite mit promises.....

setTimeout hat für mich eher einen schmückenden charakter, in slides, beim arbeiten mit zeitlichen komponenten oder wenn ich was ausführen will unabhängig der interaktion des users.....(etwas einblenden, ausblenden, enable oder disable).....

 

[netzgestaltung]

dafür ists auch gedacht, ansonsten sind events/promises quasi immer besser.

 

[nierewa]

Das Bild wird per HTML geladen.

Danke für eure Ausführungen. Werden mir bestimmt das ein oder andere mal helfen
Aber für dieses Projekt hab ich das anders gelöst, ohne jQuery.

 

[ger.ruler]

Das Bild wird per HTML geladen.

Danke für eure Ausführungen. Werden mir bestimmt das ein oder andere mal helfen
Aber für dieses Projekt hab ich das anders gelöst, ohne jQuery.

Und wie bist du vorgegangen ?

Ob du das mit jQuery löst oder mit Vanilla-JS ist eigentlich egal, das eine ist ja nur ein Framework für das andere