Once the content is loaded using AJAX, I need to retrieve 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 that loads appears as follows :
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 code for 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 styling for 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:'AmericanTypewriterITCW01-731031';
}
.css() method returns an object
.outerHeight method returns 0
The elements are visible and displayed:block. I'm unsure how to correct this issue to obtain the accurate properties.