jQuery create a page "map-overview"

Question

I try to create a "page 'map'-overview" like this (or even more complex like this) however I stuck at the calculation, dont know where or how the problem can be eliminated.

Here's what I've done so far:

var Overview = (function() {

    $('.spot').each(function() {
        var el = $(this),
            map = $('#map'),
            point = document.createElement('span');

        point.className = 'point';
        map.append(point);

        var offsetX = el.offset().left, // Might the problem is here,
            offsetY = el.offset().top, // and here?!
            winW = $(window).width(),
            winH = $(window).height(),

            mapWidth = map.width() - $(point).width(),
            mapHeight = map.height() - $(point).height(),

            posX = offsetX / winW * mapWidth,
            posY = offsetY / winH * mapHeight;

        $(point).css({
            top: posY,
            left: posX
        });
    });

})();

I cant figure out, where the problem is. Any ideas how to fix or improve my calculations?

@MikeRobinson I think "issue" was the wrong word, maybe error is better. I (or it) calculates the dimensions not correct, take a look [here](http://jsfiddle.net/ARTsinn/NzBSr/0/show). The "points" are not positioned as excpected... — yckart, Dec 18 '12 at 21:28
Either way, I'm not really sure what you're asking. Could you explain the problem a little better here? I'm all for helping, I just don't know what I'm looking at, what you're expecting, etc... — Mike Robinson, Dec 18 '12 at 22:49
@MikeRobinson Yeah, sorry... I'll try to explain, or better give you an example of what I want to create. Take a look at the [following site](http://www.chromazone-imaging.co.uk/flashindex.html), on the bottom left corner you can see an "map-overview" with all existing elements. Another more advanced example is on Lars Jung's [website](http://larsjung.de/h5ai/), at the top right corner. — yckart, Dec 18 '12 at 23:07

score 1 · Accepted Answer · answered Dec 21 '12 at 21:08

Okay, I've fixed it by myself. Maybe it helps someone else:

var Overview = function() {
    $('body').append('<div class="minimapWrapper"><div class="miniMap"><i class="cursor"></i></div></div>');

    var holder = $("#holder"),
        miniMap = $(".miniMap"),
        spots = holder.find('.spot'),
        holderPos = holder.offset();

    if (spots.length > 0) {
        var holderW = holder.width(),
            holderH = holder.height(),
            mapW = miniMap.width(),
            mapH = miniMap.height();

        spots.each(function() {
            var point = $(this),
                pointPos = point.offset(),
                top = pointPos.top - holderPos.top,
                left = pointPos.left - holderPos.left,

                marker = $(document.createElement('span')),
                markerTop = (mapH * top) / holderH,
                markerLeft = (mapW * left) / holderW;

            markerTop = Math.abs(markerTop);
            markerLeft = Math.abs(markerLeft);

            marker.css({
                top: markerTop,
                left: markerLeft
            })[0].className = 'marker';

            miniMap.append(marker);

            marker.click(function() {
                $('html,body').animate({
                    scrollTop: pointPos.top,
                    scrollLeft: pointPos.left
                });
                return false;
            });
        });
    }
};

jQuery create a page "map-overview"

1 Answers1