PDA

View Full Version : Animated DIV resizing after asynchronious content load.



as-arturas
22 Jul 2009, 5:55 AM
Hello,

Can you say how to determine div's height in Element.load() Callback function? I want to use it to smoothly resize div to new size after loading (not in "big step" as it is by defaut).

To be clear - below I added full description of problem I have. Just skip it if I explained clear enough what I want already.

---------------------------------------------------------------------------------------------

I am trying to mate ajax'ish page content loading.

Everything works just fine, but I don't like, that on loading div is resizing without animation (in steps - like before displaying "Loading..." text or soon after load finished).

I would like to do in animated (which will smoothly resize on load), but cannot get it working. This example shanges HEIGHT before displaying "Loading...", but I don't know how to resize it back to full size - according to "size" of content loaded.

Here is example code:

HTML:


<div>HEADER</div>
<div id="menu">
<li class="menu-element">
<a href="{someUrl1}" onclick="javascript:return false;">{someText1}</a>
</li><li class="menu-element">
<a class="selected" href="{someUrl2}" onclick="javascript:return false;">{someText2}</a>
</li><li class="menu-element">
<a href="{someUrl3}" onclick="javascript:return false;">{someText3}</a>
</div>
<div id="content">
</div>
<div>FOOTER</div>
Script:


Ext.onReady(function(){
menuElements = Ext.query("a", "li.menu-element", "div#menu");
for(var i = 0; i < menuElements.length; i++){
var mEl = Ext.get(menuElements[i]);
mEl.addListener('click', menuItemClick);
}
});

var menuItemClick = function(evt, el, o){
var container = Ext.get('content');
container.setHeight(200, true);
container.load({
url: el.toLocaleString(),
method: 'POST',
callback: function(el, success, response, options){
el = Ext.get(el);
el.setHeight(el.dom.scrollHeight, true); // THERE IS THE PROBLEM, I GUESS
},
text: 'Loading...',
scripts: false
})
}
---------------------------------------------------------------------------------------------

Thank you for your suggestions.