У меня небольшая проблема, поэтому позвольте мне описать вам мою ситуацию:
У меня есть сайт с 2 основными областями. A со ссылками навигации и где отображается контент.
Я использую ajax, чтобы при нажатии на ссылку происходили следующие шаги:
1) содержимое в #main fadea out
2) загружен новый контент
3) изменилась высота #main
4) показывается новый контент.
Но по некоторым причинам для некоторых страниц высота #main не будет правильно отрегулирована. это будет слишком коротко, сокращая содержание. Я заметил, что это происходит только в первый раз, когда вы загружаете страницу, что заставляет меня думать, что проблема в том, что браузер не может правильно рассчитать высоту, пока все данные не будут загружены. Но я не понимаю, почему это происходит, поскольку функция обратного вызова не должна запускаться, пока все не будет загружено, верно?
Во всяком случае, вот код. Я надеюсь, что вы, ребята, можете помочь мне. Спасибо!
$("a:not('.noajax')").live("click", function(e){
e.preventDefault();
//Load new page
var link = $(this).attr("href");
loadpage( link );
});
function loadpage(href) {
//Keep fixed the main container
var old_height = $(".outermain").innerHeight();
$("#main").css({"height":(old_height)});
//Fade out the interior
$(".outermain").fadeOut(100, function(){
//Prepare interior to calculate new height
$(".outermain").css({"display": "block", "visibility": "hidden"});
//Load new page
$(".outermain").load(href + " .innermain", function(){
var new_height = $(".outermain").innerHeight();
var rolloutspeed = 700 - (new_height / 30);
rolloutspeed = 600;
$("#main").animate({"height":new_height}, rolloutspeed , "easeOutBack", function(){
$(".outermain").css({"visibility": "visible", "display":"none"}).fadeIn(function(){
$("body").removeClass("ajaxblocked");
});
});
});
});
}
и это HTML:
<section id="main">
<div class="outermain">
<div class="innermain clearfix">
...
</div>
</div>
</section>