Höhe eines Elements

[alexf812]

Hallo,

der folgende Code wird ausgeführt nach Klick auf einen Link. Kann mir jemand sagen, warum in der Konsolenausgabe als Höhe immer 0 steht? Wenn ich mir $overlay ausgeben lasse steht eine korrekte Höhe drin

var $close = $('<span class="schliessen">[X] Schliessen</span>');
var $overlay_content = $('<div class="overlay-content">')
                                        .load('content.php',function(){
                                         $(this).before($close);
                                        });
var $overlay = $('<div class="overlay">');
                        
$overlay.append($overlay_content).appendTo('body');
console.log($close.height());

[Ben-]

Weil $close irgendwie nicht ins DOM geschrieben wird (lass dir mal $("body").html() ausgeben), liegt wohl an $(this).before($close);

Mach nen this.append($close); draus, dann gehts.

[alexf812]

Hi,

im DOM muss es aber sein, denn wenn ich $close.length ausgebe erhalte ich 1. Ich kann auch auf $close.text() zugreifen und bekomme den Text angezeigt. before() habe ich genommen, damit das Element vor dem div erscheint, mit append() würde es innerhalb des div erscheinen

[Ben-]

Dann wird das wohl nicht gehen, "before" (bevor) ".overlay-content" nix gibt. Ich weiß nicht, wie JQuery das intern selektiert, aber anscheinend muss im DOM erstmal was vor dem Element ".overlay-content" existieren, bevor du mit "before" was dort einbinden kannst. Aber .overlay-content wird ja erst nach irgendwo hinzugefügt.

var $close = $('<span class="schliessen">[X] Schliessen</span>');
var $overlay_content = $('<div class="overlay-content">');
var $overlay = $('<div class="overlay">');
                        
$overlay.append($overlay_content).appendTo('body');
$overlay_content .load('content.php',function(){$(this).before($close);});
console.log($close.height());	alert ($("body").html());

das hier funktioniert z.B.

€dit: Wie gesagt, es stand vorher nicht im DOM, kann man mit firebug bei "HTML" auch sehen. Die 1 hast du zurückbekommen, weil $close als Variable existiert und text() kann scheinbar auch auf Variablen zugreifen, wenn der Inhalt HTML ist (würde auch Sinn machen, denn Jquery holt sich ja intern auch nur das HTML von der selektierten klasse/id/whatever in ne Variable und sucht den Text darin)

[alexf812]

Hi,

mit deiner leztten Lösung bekomme ich nun auch eine Höhenangabe angezeigt, aber wenn ich mir $('body').html() ausgeben lasse sehe ich keinen unterschied. Das span-Tag ist in beiden Fällen nicht da.
Was ich nicht verstehe, warum es dann auf der Seite alles korrekt angezeigt wird, dort fehlt der Link zum Schliessen nicht, das war aber ach in meiner ersten Lösung so.

Edit: Wenn ich alert($('body').html()) entferne, dann wird mir ebenfalls keine Höhenangabe angezeigt. Also bei mir funktioniert deine Lösung genauso wie meine .-)

[Ben-]

Oo
Also bei mir ist es da. Wird sowohl beim Alert angezeigt, als auch im DOM.

Kann es sein, dass bei dir ein umschließendes

$(document).ready(function() {

});

fehlt?

[alexf812]

folgendes funktioniert bei mir: (sind nur Auszüge)

buildOverlay : function(content){

                    var $close = $('<span class="schliessen">schliessen</span>');
                    var $background = $('<div id="overlay-bg">');

                    $background.appendTo('body');

                    $('<div class="overlay">')
                        .prepend($close)
                        .append(content)
                        .appendTo('body')
                        .css({'visibility' : 'hidden'})
                        .height(function(){

                            // hier noch einige Berechnungen, aber $close.outerHeight() geht

                            $overlayContent.height($overlayHeight-$close.outerHeight()-$padding).parent().css({'visibility' : 'visible'});

                        });

                    $close.click(function(){
                        $(this).parent().empty().remove();
                        $background.remove();
                    })

                },

// hier dann der Content:
$('<div class="'+this.config.classname+'">').load(this.config.content,function(){
                        overlay.buildOverlay($(this));
                    })

[alexf812]

Oo
Kann es sein, dass bei dir ein umschließendes

$(document).ready(function() {

});

fehlt?

hmm... sollte da sein. Ich habe $(function(){}) genutzt, das ist ja aber das gleiche, nur in Kurzform.

$(function(){
      $('a').click(function(e){
           e.preventDefault();
           // hier dein Code...
      )};
)}

EDIT: Merkwürdig, ich habs paar mal probiert auch mal mit $(document).ready() und auch nicht bei Klick..immer das gleiche Ergebnis. Höhe 0 und das span-Tag fehlt in der Ausgabe. Also irgednwas mach ich falsch...