jQuery outerHeight() returns 0 even with jQuery(window).load()

Question

After i loaded content with ajax i wanna get the outerHeight of the loaded elements.

Ajaxload file:

$('#workshop').submit(function(event){



        $.ajax({
        url: URL,
        type: 'POST',
        data: $('#workshop').serialize(),
        success: function(data){

            var string = '<div class="section" id="result"></div>';

            if(prevent == true){
                 $('#container #result').html($("#main .inside>.mod_article", data));

                 $.getScript( scriptURL, function() {
                        });
            }else{
                $('#container').append(string);
                $('#container #result').html($("#main .inside>.mod_article", data));


                    $.getScript( scriptURL, function() {
                        });


                prevent = true;

            }

    });
        event.preventDefault();
});

The script loaded looks like :

var height;
var top ;

function scroll_down(){

jQuery(window).load(function(){
    $('.result_control .up').css({'display' : 'block'});

    top = $('.item_wrapper>.inner').css('top');
     height =  $('.item_wrapper>.inner>.item').outerHeight(true);

});

console.log(top);
console.log(height);

}


function scroll_up(){
console.log('up');
}

$('.item_wrapper').mousewheel(function(event, delta, deltaX, deltaY){
if(delta > 0){
    scroll_up();
}else if(delta < 0){
    scroll_down();
}
 });

The HTML of the loaded elements :

<div class="item_wrapper">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

The css code of these elements :

.section#result .workshopfilter .filterresult .item_wrapper {
overflow: hidden;
width: 100%;
height: 65%;
position: relative;
clear: both !important;
}
.section#result .workshopfilter .filterresult .inner {
position: absolute;
top: 0px;
width: 100%;
clear: both !important;
 }
.section#result .workshopfilter .filterresult div.item {
float: left;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 2%; 
width: 27%;
background-color: #ffff00;
color: #333;
height: 250px;
padding: 2%;
position: relative;
display: block;
font-family:'AmericanTypwrterITCW01- 731031';
}

.css() returns object

.outerHeight returns 0

The elements are visible and displayed:block. I dont know how to fix it to get the right properties.

Can you give us an html sample containing the .item_wrapper container. — OlivierH, Nov 07 '13 at 09:28
Have you confirmed that your `$('.item_wrapper>.inner>.item')` code actually selects an element? — Richard Peck, Nov 07 '13 at 09:28
@RichPeck If i do console.log() on this it will returns all div.item i also tried it with .first() because there are multiple matched elements on the "$('.item_wrapper>.inner>.item')" selector — lhadameck, Nov 07 '13 at 10:12
What is returned if you type directly $('.item_wrapper>.inner>.item').outerHeight(true); into your browser's javascript console ? Of course after the submit of your #workshop form — OlivierH, Nov 07 '13 at 10:17
So you're calling the `.item` elements -- do you want to load all of their heights, or just the first one? From my understanding, outerheight only works for one element, so you might just want to run it on the containing DIV? — Richard Peck, Nov 07 '13 at 10:31
@RichPeck i want the outerHeight of one item to work with that property. outerHeight only works for one element but outerHeight returns the property of the first matched element. Otherwise i also tryed to specify it with .first() — lhadameck, Nov 07 '13 at 10:34
I'm trying to understand how your outerHeight is going to work -- you only want to select the first element? What's the reason for selecting the element? I think your problem is systemic (it's related to how your function works, rather than the .outerHeight not working) — Richard Peck, Nov 07 '13 at 10:37
@RichPeck All items got the same height so it isnt't relevant which item will return the value. I developing a function where the .inner will change the "top" property onclick or onscroll but i need to know when the last items are displayed therefore i need calcalute it depending on the outerheight property. The problem is i need to do it with outerHeight because the site is responsive so i need variable values. — lhadameck, Nov 07 '13 at 10:45
Okay, thanks for your information. Let me think about it a bit more :) — Richard Peck, Nov 07 '13 at 10:56
@RichPeck thank you for your help. Looking forward to your answer :) — lhadameck, Nov 07 '13 at 11:02
@RichPeck if i specify it with .first() it returns a function — lhadameck, Nov 07 '13 at 11:06
try it : $('.item_wrapper>.inner>.item').each(function(){ console.log($(this).outerHeight()); }); — OlivierH, Nov 07 '13 at 11:11
@OlivierH returns 30times "0" and 30times "297". But there are only 30 times div.item The number of div.item is depending on the result of the form. — lhadameck, Nov 07 '13 at 11:15
Now i got the right value with using : $('.item_wrapper>.inner>.item').each(function(){ if($(this).outerHeight(true) != "" && $(this).outerHeight(true) != 0 ){ height = $(this).outerHeight(true); } }); — lhadameck, Nov 07 '13 at 11:22
What Oliver & I are suggesting, I think, is that `.outerHeight` is not being used correctly. As demonstrated by your recent test, it *is* bringing back correct numbers.... but you want to take the first element's height & multiply by 30 to get the total items height? — Richard Peck, Nov 07 '13 at 11:22

score 0 · Answer 1 · answered Nov 07 '13 at 09:28

since ajax is async. you need to specify the variables inside the callback function of load () which in you case is outside

 jQuery(window).load(function(){
    $('.result_control .up').css({'display' : 'block'});
    top = $('.item_wrapper>.inner').css('top');
    height =  $('.item_wrapper>.inner>.item').outerHeight;

    console.log(top);  //here
    console.log(height); //here

});

since you have your console.log outside the load callback function.. console.log is called before the load completes hence giving you nothing

That didn't fix my problem, still returns 0 I think the problem isn't caused by that the elements aren't loaded when i request the outerHeight of the elements. I was reading alot of possible fixes for equaly problems , but nothing works. — lhadameck, Nov 07 '13 at 10:13

jQuery outerHeight() returns 0 even with jQuery(window).load()

1 Answers1