CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Simon Hyrnet
Simon Hyrnet

Reputation: 25

Keep selected div centered when zooming

I have this HTML code:

<div class="inner">
    <div class="nhood">
        <div class="image"></div>
    </div>
</div>

And this CSS:

.image {
    width: 4000px;
    height: 4000px;
    background: beige;
    margin: 150px;
    position: absolute;
}

.nhood {
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background: black;
}

The .image div is filled with 400 divs, all floating left, creating a huge 'chess'-pattern, the code is the following:

.image > div {
    border: 1px dotted;
    width: 5%;
    height: 5%;
    float: left;
    box-sizing:border-box;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    user-select: none;
}

You are able to click on any cell to show its info, and the whole .image div is draggable. Now if you have selected a cell and you ZOOM (which basically only shrinks/extends the 4000x4000 div to 2000x2000 or the other way round) it zooms in ANYWHERE but I want to keep focus on the cell that was selected earlier.

I have made an image of this: http://smimoo.lima-city.de/zoom.png

I hope this was any clear...

EDIT:

JS

    function zoomIn() {
    $(draggable).animate({
                    height: '4000',
                    width: '4000',
                    borderWidth: 0
                }, 600, function() {
                    $divs.animate({
                        borderWidth: 0
                    });
                });
}

    function zoomOut() {
            $(draggable).animate({
                height: '2000',
                width: '2000',
                borderWidth: 0
            }, 600, function() {
                $divs.animate({
                    borderWidth: 1
                });
            });

EDIT2:

This is my js to center the function (written before Mario helped me out):

function centerField() {
        var myObject = $(draggable).find('.selected');

        var docWidth = ($(viewport).width() / 2) - (myObject.outerWidth()/2);
        var docHeight = ($(viewport).height() / 2) - (myObject.outerWidth()/4);

        var myOff = myObject.offset();
        var distanceTop = myOff.top - docHeight;
        var distanceLeft = myOff.left - docWidth;

        var position = $(draggable).position();
        var left = position.left;
        var top = position.top;
        var right = left - $(viewport).width() + draggable.outerWidth(true);
        var bottom = top - $(viewport).height() + draggable.outerHeight(true);

        if(left - distanceLeft > 0) {
            distanceLeft = left;
        }

        if(right - distanceLeft < 0) {
            distanceLeft = right;
        }

        if(top - distanceTop > 0) {
            distanceTop = top;
        }

        if(bottom - distanceTop < 0) {
            distanceTop = bottom;
        }

        $(draggable).animate({
            left: '-=' + distanceLeft,
            top: '-=' + distanceTop
        }, { duration: 200, queue: false });

    }

Upvotes: 0

Views: 1642

Answers (1)

Mario A
Mario A

Reputation: 3363

Assume that the selected div has the class .selected, this function will center the div:

function centerSelected() {
    var selectedElement =  $('.image .selected');
    var p = selectedElement.position();

    var w = $('.nhood').width();
    var h = $('.nhood').height();

    var offsetX = (w/2)-p.left - (selectedElement.width() / 2);
    var offsetY = (h/2)-p.top - (selectedElement.height() / 2);

    if(offsetX > 0) offsetX = 0;
    if(offsetY > 0) offsetY = 0;

    $('.image').css('left', offsetX + 'px');
    $('.image').css('top', offsetY + 'px');
}

Just call centerSelected after every zoom operation.

Here is a jsfiddle with slightly modified css to get the presentation work: http://jsfiddle.net/q1r95w3g/3/

Edit If you want the div to get centered during jQuery animation, you can call centerSelected in the step callback of the animate method, e.g.:

function zoomIn() {
    $(draggable).animate({
      height: '4000',
      width: '4000',
      borderWidth: 0
    },{
      duration: 600,
      complete: function() {
        $divs.animate({
          borderWidth: 0
        });
      },
      step: function(now, fx) {
         centerSelected();
      }
   });
}

Upvotes: 1

Related Questions