Have you ever created a page that has hidden div containers that are activated by a link that has a slide down effect on it?  In case you haven’t there is a slight problem when displaying content that needs to be shown and slid down when the trigger is at the bottom of the browser window.  It is quite possible the visitor may never see the effect or the content.

The code below will help with this issue:


function slide_body(container, duration)
{
window.setTimeout( function() {
var p = $(container).position();
var h = $(container).height();
var s = p.top + h;

$('html,body').animate( { scrollTop:s }, 1000 );
}, duration);
}

container (block level element) – the container of the content that is being shown
examples: ‘#container’, ‘.container’, ‘p .container’…

duration (time in milliseconds) – the time it takes for the animation of the sliding content

Comments and questions welcome… video coming soon!

This entry was posted on Tuesday, January 6th, 2009 at 12:02 am and is filed under JavaScript, Jquery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.