Hi,
Im jQueryUI's animate to resize the page's content area and fade into
new pages on navigation (progressive enhancement).
It's working great, heres some code of it:
<code>
$('#content').css('height', heights[$('.current').attr('href').match(/
[a-zA-Z\.]+$/)]);
$('.load').bind('click', function(e)
{
$('.current').removeClass('current');
e.preventDefault();
var page =
$(this).attr('href').match(/[a-zA-Z\.]+$/);
//run the effect
$("#layer").fadeOut(500);
$('#menu-' + page).addClass('current');
$("#content").animate({height:
heights[page] + "px"}, 500,
'linear', function()
{
$("#layer").load("dev.php", {
page: page, index:'false' },
function()
{
$("#layer").fadeIn(500);
});
});
});
</code>
The problem is that when the new page is smaller then the current one,
the DOM document will shrink, and if the viewport of the document
wasnt at the top, in firefox 3.5.3. the "scrolling upwards" in the
document viewport is either really choppy or instantanious. The
transitions are working fine in IE8 and Chrome.
Does anyone know a fitting solution? Perhaps something with manually
scrolling the document viewport before shrinking it.
Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
