Question

UPDATE: I have given this a couple shots to no avail! Right now in my jsfiddle I have my work so far.

http://jsfiddle.net/virtuapete/x2pnC/2/

Below is the code used to “center” the “home” div. Looking at it I realized its not aware of where the “home” div is currently located, therefore it blindly applies movement based on the array positioned with its origin in view in the upper left.

    container.overscroll({
    showThumbs:  false,
    scrollLeft:  1125,
    scrollTop:   1125
});

// Center "home" div in viewport
var gear = $('#gear');
gear.click(function() {
    var $foo = $('.id0'),
        elWidth = $foo.width(),
        elHeight = $foo.height(),
        elOffset = $foo.offset();
    container
        .scrollTop(elOffset.top + elHeight/2 - viewportHeight/2)
        .scrollLeft(elOffset.left + elWidth/2 - viewportWidth/2);
});

In it you can see the colored div array does not start out centered (the center div is outlined with a red border, follow the arrow on the edge of the viewport to find it if you like), I wish it was. I found the options for Overscroll and there is a top & left offset for the starting position of the overscrolled object. Unfortunately it is asking for an integer for both in what looks like its use of JQuery scrollTop & scrollLeft. Maybe I can insert a pre-calculated variable in there instead of a straight integer? I currently have it set to 1125px for each to get it in the view port for now atleast.

Theoretically I think its finding out the coordinate of the center of the “home” div on overscrolled object and aligning that on top of the calculated coordinate for the center of the viewport. what does that look like programatically and is that the most efficient way of approaching the problem?

Answer 1

change elOffset = $foo.offset(); to elOffset = $foo.position()

.offset() returns the position of an element relative to the visible area (viewport). .position() returns the position relative to the containing element (parent). that’s why you can’t calculate how much to scroll off to the left and top coz you got the wrong values.

i cannot center it well though, must be the margins between boxes throwing me off target but here’s another part i changed:

container.scrollTop(elOffset.top - ((viewportHeight - elHeight) / 2)).scrollLeft(elOffset.left);

i updated fiddle here.