Hi i have a jquery content animation, everything works fine except for the content loading.
$(function() {
var newHash = "",
$mainContent = $("#main_content"),
$pageWrap = $(".big_col"),
$main_menu = $("a.main_menu"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("body").delegate("a.main_menu", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.fadeOut(200, function() {
$mainContent.hide(function() {
$(".loader").show();
var page = newHash.replace(/\..+$/, '');
var page = page.replace(/!/, '');
var data = 'page=' + page;
$.ajax({
url: "main_content/action.php",
type: "POST",
data: data + "&request=ajax",
cache: false,
success: function (html) {
$mainContent.html(html);
$("#main_content").ready(function() {
//var loaded = 0;
$(".loader").hide();
_gaq.push(['_trackPageview', '/it_'+page]);
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
}, 300);
});
$main_menu.removeClass('current');
$('a[href="#' + newHash + '"]').addClass('current');
return false
});
//});
}
});
});
});
};
});
$(window).trigger('hashchange');
});
this is the code, i tried almost everything i read here on stack overflow and other sites but nothing seem to work(the .ready you see in the code i pasted is just the last thing i tried) I tried with .load, bind load, live load, img .lenght, .ready, everything both selecting the images or the whole div but still nothing seems to work.
Any suggestions? Thanks
edit the thing is that without any function trigger, the script works just fine. If i use any of those trigger(except for .ready but then it doesn't do what it should) the script stops at that trigger(where i hide the loader) it doesn't go any further.