The block seems to vanish partially when the CSS scale is applied

Question

The block seems to vanish partially when the CSS scale is applied

Is there a way to zoom in on a div by clicking on it without parts of the block being hidden after the zoom?

Check out the demo here: http://jsbin.com/xumuzine/2/edit

I've tried using the CSS property transform-origin: 0 0;, but this won't work for me because I need to track the location where I clicked and zoom into that specific place.

Any ideas or suggestions would be greatly appreciated. Thank you!

UPDATE:

Let me clarify my issue.

You can see an updated demo with a click event handler that captures the click coordinates and zooms in to that position here: http://jsbin.com/fecaduxidele/2/edit

The problem arises when I click on a cell, such as number 9, and then cannot scroll the grid back to cell number 1. Any solutions to this problem?

javascript css zooming

Answer 1

Answer №1

If you want to adjust the content size without scaling, you can set it directly and then use background-size property to scale the image accordingly. Here is an example:

#content {
  width: 300px;
  height: 300px;
  background: url(http://placeimg.com/300/300/any);
  background-size: 100%;
}

#content.scaled {
  width: 450px;
  height: 450px;
  /* -webkit-transform: scale(1.5); */
  -webkit-transition: all .5s ease-in-out; 
}

Edit: The above code resolves the issue of scrolling to a specific part of the image. To handle coordinates, you may need to use JQuery animation as CSS alone cannot control scroll position smoothly in this case. You can implement a click handler similar to this:

var x = event.clientX,
    y = event.clientY,
    $this = $(this),
    scaling = !$this.hasClass('scaled');
$this.toggleClass('scaled');
if (scaling) {
  $this.parent().animate({
    scrollLeft: x,
    scrollTop: y
  }, 500);
}

You can see the outcome applied to your second bin here:

http://jsbin.com/jikididizice/1/edit

Answer 2

If you want to adjust the content size without scaling, you can set it directly and then use background-size property to scale the image accordingly. Here is an example:

#content {
  width: 300px;
  height: 300px;
  background: url(http://placeimg.com/300/300/any);
  background-size: 100%;
}

#content.scaled {
  width: 450px;
  height: 450px;
  /* -webkit-transform: scale(1.5); */
  -webkit-transition: all .5s ease-in-out; 
}

Edit: The above code resolves the issue of scrolling to a specific part of the image. To handle coordinates, you may need to use JQuery animation as CSS alone cannot control scroll position smoothly in this case. You can implement a click handler similar to this:

var x = event.clientX,
    y = event.clientY,
    $this = $(this),
    scaling = !$this.hasClass('scaled');
$this.toggleClass('scaled');
if (scaling) {
  $this.parent().animate({
    scrollLeft: x,
    scrollTop: y
  }, 500);
}

You can see the outcome applied to your second bin here:

http://jsbin.com/jikididizice/1/edit

Answer 3

Answer №2

The main concern was when the parent and child elements are the same size, a scrollbar will appear, as demonstrated in this code snippet:

JS Bin

In the provided example, I have set the scroll, width, and height to be equal in px, causing the scrollbar to show.

To resolve this issue, you can set the width and height to 100%, as shown in the following example.

If you wish to remove the scrollbar, simply eliminate the overflow:auto property from the parent element.

JS Bin

Another useful technique is using the transform-origin property to specify where the image should scale from. In the given example, I used center center to ensure scaling occurs from the center.

JS Bin

Answer 4

The main concern was when the parent and child elements are the same size, a scrollbar will appear, as demonstrated in this code snippet:

JS Bin

In the provided example, I have set the scroll, width, and height to be equal in px, causing the scrollbar to show.

To resolve this issue, you can set the width and height to 100%, as shown in the following example.

If you wish to remove the scrollbar, simply eliminate the overflow:auto property from the parent element.

JS Bin

Another useful technique is using the transform-origin property to specify where the image should scale from. In the given example, I used center center to ensure scaling occurs from the center.

JS Bin

Answer 5

Answer №3

Here are a couple of potential solutions:

Try removing the overflow:auto property from the wrapper element. http://jsbin.com/xumuzine/40/
Consider scaling the wrapper element instead of adjusting the contents. http://jsbin.com/mojoyapamuyi/1/

Answer 6

Here are a couple of potential solutions:

Try removing the overflow:auto property from the wrapper element. http://jsbin.com/xumuzine/40/
Consider scaling the wrapper element instead of adjusting the contents. http://jsbin.com/mojoyapamuyi/1/

Answer 7

Answer №4

One possible solution is to experiment with the zoom attribute:

#container.scaled {
  zoom:1.5;
}

Answer 8

One possible solution is to experiment with the zoom attribute:

#container.scaled {
  zoom:1.5;
}

The block seems to vanish partially when the CSS scale is applied

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Express server consistently receives JSON requests that contain no data in the request body

Async/Await function is not behaving as intended

Can anyone guide me on how to combine two strings in Angular2?

Concealing objects identified by a specific id

Get node extensions set up without the hassle of typing in commands

Stop the default value of a keypress when the user is typing

Angularjs changes the "&" character to "&"

Tips for capturing the current terminal content upon keypress detection?

How can I simulate a callback function that was not tested?

What is the best way to implement validation for a textfield to prevent submission if a negative value is entered?

Generating keyframes spontaneously, unable to remove commas

How can you implement a switchable theme feature similar to Twitter on your website?

Troubleshooting: CSS Styles not loading when passed as property in MUI withStyles

Utilizing jQuery to create a fade-in effect for li elements on hover

Encountering issues with node-gyp and node-sass on Ubuntu operating system

Retrieve the property type for the specified object

How can I force a Kendo UI Chart to resize in VueJS?

Posting and deleting data in AngularJS using HTTP requests

D3.js is providing inaccurate tick numbers

Encountering a syntax/parse error while utilizing jQuery within Velocity code