Home/ Questions/Q 817515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T02:00:22+00:00

I’m trying to work out how to enlarge all elements on a page, but

  • 0

I’m trying to work out how to enlarge all elements on a page, but keep the centre of enlargement in the centre of the window.

On this page, once the image reaches the top or the left side of the window the centre of enlargement changes. It also changes when you move the image. (exactly what you would expect)

I’m thinking I’d need to take a completely different approach to achieve what I want. But I’m not sure what that approach is..

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, here’s my take.

    Only thing is that I ditched the containers you were using. Is that cheating? Seems like they were only there to get the image centered. No need.

    This works as expected with no side effects.

    Here’s a working demo you can test:

    http://jsfiddle.net/YFPRB/1/

    (You need to click on the pane with the baboon first.)

    HTML

    <body>

<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />

</body>

    CSS

    html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}​

    jQuery

    EDIT: Thanks to @stagas for the reminder to clean up redundancies.

     var $img = $('img');  // Cache the image. Better for performance.

  $img.draggable();


  $img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
      .css({top: ($('body').height() / 2) - ($img.height() / 2)})


  $(document).keydown(function(event) {

      if (event.keyCode == 38) {
          var adjustment = 1.25;
      } else if (event.keyCode == 40)  {
          var adjustment = 0.8;
      } else {
          return;
      }

      var offset = $img.offset();  

      var width = $img.width();
      var height = $img.height();

      var newWidth = width * adjustment;
      var newHeight = height * adjustment;

      var diffWidth = newWidth - width;
      var diffHeight = newHeight - height;

      var hcenter = $('body').width() / 2;
      var vcenter = $('body').height() / 2;

      var leftPercent = (hcenter - offset.left) / width;
      var topPercent = (vcenter - offset.top) / height;

      $img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});

      $img.width(newWidth).height(newHeight);

    });​
    • 0