Home Blog Portfolio Development Contact Us Recommends
Building One Application at a Time

Archive for January, 2009

Jquery Auto Scroll on Click

Tuesday, January 6th, 2009

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!