w czesci serwisu wyswietlanie tresci obsluguje AJAXem, a dokladnie frameworkiem jQuery. Procz oczywistego dynamicznego ladowania uzywam tam efektow, fadeOut, fadeIn oraz animate, ktore 'ubarwiaja' szara wirtualna rzeczywistosc.
Problem nastepuje w momencie, gdy chce wywolac animate() dla zaktualizowanego trescia diva, aby plynnie doskalowal sie do nowej wysokosci:
<?php $("#dzial_content").animate({height: makeAjax.curr}, "slow", function () { $("#dzial_content").fadeIn("slow"); }); ?>
skrypt reaguje tak, jakby tej wysokosci nie dostawal w ogole, mimo ze kilka linijek wyzej jest zczytywana poprawnie. Ponizej wkleje caly kod obslugujacy ladowanie ajaxa i skalowanie divow:
<?php $(document).ready( function() { if($("#dzial_content")) { makeAjax.start(); } }); var makeAjax = new Object({ divH: "0", curr: "0", start: function() { $.listen('click','.pr_link',function() { makeAjax.divH=$("#dzial_content").height(); var content_show = $(this).attr("title"); var newHgB; var newHgL; var newHgM; $(".navi_sel").css("color", "#6c6c6c"); $(this).css("color", "#e35f03"); $.ajax({ method: "get",url: "index.php",data: content_show, cache: false, success: function(html){ $("#dzial_content").fadeOut("slow", function() { makeAjax.curr = $("#dzial_content").html(html).height(); newHgL = $("#left").height() - makeAjax.divH + makeAjax.curr; $("#left").animate({height: newHgL}, "slow"); $.getScript("js/galeria.js"); }); $("#dzial_content").animate({height: makeAjax.curr}, "slow", function () { $("#dzial_content").fadeIn("slow"); }); } }); return false; }); } }); ?>
uzywam tam plug-inu listen, aby wczynae ajaxem linki reagowaly na skrypt.
Skrypt galerii jest dla sprawy nieistotny.
element #left jest podobnie nieistotny - musi byc aktualizowany, gdyz jest pozycjonowany jsem od poczatku.
Cala sprawa rozgywa sie w zdarzeniu success - probowalem roznych kombinacji zagniezdzania funkcji, zawsze konczylo sie tym ze height dla #dzial_content jest zczytywany niepoprawnie (co lepsze dla obliczenia wysokosci #left dziala juz poprawnie). Wyglada to efekt nielinearnosci parsowania kodu - najpierw jest trzaskane animate(), a potem html(), lecz nie wiem jak to rozwiazac.
Wkleje jeszcze fragment html'a:
I css dla tych divow:
#dzial_content_box { width: 670px; float: left; background: url(../images/loader.gif) no-repeat center center; } #dzial_content { width: 670px; float: left; background: #fff; }
Bede wdzieczny za wskazanie rozwiazania lub odeslania do jakiegos przykladu rozwiazujacego problem. Przepytalem juz google na rozne sposoby, lecz milcza jak zaklete.
EDIT:
odpowiem sam sobie, problem rozwiazany
jakby kogos interesowalo to problem tkwil w tym, ze fadeOut ustawia display: none; elementu, a to z kolei traktowane jest jako height: 0;
stad swirowanie .animate()
pare kosmetycznych zabiegow i gra muzyka.