Resize a div within another div using overflow scroll and centering techniques

Currently, I am working on implementing a small feature but am facing difficulties with the scroll functionality. My goal is to zoom in on a specific div by scaling it using CSS:

transform: scale(X,Y)

The issue I am encountering lies in determining the correct left and top scroll values within the parent div. I need assistance in calculating the new left and top positions each time the user clicks on the "More zoom" button. If necessary, I am open to utilizing the translate CSS property.

I am open to using jQuery for this task, although I believe it boils down to a math problem :)

One important detail: It is essential that the image expands from the center.

Image Preview:

https://i.sstatic.net/YRl6S.jpg

You can find the code example here:

Fiddle example

javascriptjqueryhtmlcss

Answer №1

It's important to also consider the transform-origin property when working with transformations:

// Grab element references
var foo = document.querySelector('#foo');
var bar = document.querySelector('#bar');

// Adjust bar within foo
// The third options argument is not required but can be customized, refer to the README for defaults
// https://github.com/soulwire/fit.js

var zoom = 1;
var trans = 50;
var moreZoom = document.querySelector('#moreZoom');
moreZoom.onclick = function(e){
console.log(foo);
     bar.style.transform = 'scale(' + (zoom + 0.1) + ',' + (zoom + 0.1) + ')';
     zoom = (zoom + 0.1);
     bar.style.transformOrigin = (50 / zoom) +'px  ' +(50 / zoom )+'px';
}
#foo {
    background: #36D7B7;
    height: 200px;
    width: 400px;
    padding: 50px;
     overflow: auto;
    
}
#bar {
    background-image: url('http://www.space.com/images/i/000/028/001/original/wing-small-magellanic-cloud-galaxy-1920.jpg?interpolation=lanczos-none&fit=around%7C1440:900&crop=1440:900;*,*');
    background-size:cover;
    height: 100%;
    transform:scale(1);
    width: 100%;
   
}
<script src="https://rawgithub.com/soulwire/fit.js/master/fit.js"></script>
<button id="moreZoom">
More Zoom
</button>

<div id="foo">
    <div

http://jsfiddle.net/as20h6t4/5/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the capabilities of Angular 2 and delving into inquiries regarding IIS

I'm diving into the world of Angular 2 as a beginner. Previously, I used to include JavaScript (like jQuery.js) in my HTML and then upload the finished page to my IIS website. Now that I'm learning Angular 2, I've had to install Node.js, NP ...

javascriptnode.jsangularnpmiis-7

Using $(this) while inside a callback function

I am currently in the process of switching from using prompt() to jPrompt() because Internet Explorer blocks prompt() from running. The issue I'm facing is that $(this) no longer functions correctly with jPrompt() since it doesn't return a value ...

jquery

Generate numerous div elements by utilizing ng-repeat

I am trying to generate 'n' red blocks with text (where n represents the number of elements in an array), but unfortunately, I am seeing a blank page. <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angu ...

javascripthtmlangularjsangularjs-ng-repeat

``Is there a more SEO-friendly option instead of using an iframe?

I am looking for a solution to easily share my content with other websites without the issues I currently face. Presently, I use an iframe which poses two problems: <iframe width=“540”; height=“700” frameborder=“0” src=“http://www.energi ...

phpjavascriptajaxiframeseo

Opacity is causing issues with hover effects in CSS

I'm facing an unusual CSS challenge. Check out this simple code snippet below that showcases the issue: <html> <head> <style> .hover { float: right; } .hover:hover { background-color: blue; ...

csshoveropacity

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

I am working on an Angular app (using Angular 11.2.4 with Bootstrap 4.5.3) and facing an issue where the navbar is not rendering correctly on screens smaller than ~580 pixels wide. Even when I click the toggler to 'expand' the collapse region, n ...

htmlangularbootstrap-4angular-ui-bootstrap

Having Trouble with jQuery On Function

There seems to be an issue with the first on click event in the following js file - it is not working, while the second one is functioning correctly. I considered using delegate(), but after reading through this article, I don't believe that delegate( ...

jquery

Using jQuery to send information to a freshly opened tab and retrieve the response

I'm attempting to transfer information from ClassA to ClassB. To achieve this, I've set up a hidden form within the view page of ClassA and submitted it to ClassB. <form id="invisible_form" action="classB" method="post ...

phpjquery

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml

The callback function in Ajax is returning an undefined response, causing an Uncaught Reference

Code: query = "http://localhost:8080/working_login.php?name=" + name + "&password=" + pass; console.log(query); $.ajax({ type: "GET", url: query, dataType: "script", success: function(data){ console.log(data); con ...

phpjquery

Integrating security with Asp.net Webservices: Using jQuery AJAX to Safely Access the We

What is the most effective method to ensure security when utilizing webservices with Ajax? It is important to protect against unauthorized remote calls outside of the application. Here is an example of a webservice: [WebService(Namespace = "http://tempur ...

jqueryasp.netajaxweb-services

Customize data appearance in Django Admin interface

I am working with a model that has a json field. The data stored in this field may not always be pretty-printed, and I am okay with it as long as it is valid. However, when the data is displayed in Django admin, I would like it to be pretty printed for eas ...

javascriptdjangojsondjango-admin

What is the best way to identify errors in an express listen callback function?

My current code is set up to verify if there was an error while initiating Express: express() .listen(port, (err: Error) => { if (err) { console.error(err); return; } console.log(`Express started`); ...

javascriptnode.jstypescriptexpresserror-handling

Using CSS to duplicate images in multiple repetitions horizontally

In the process of developing a UHD project that involves showcasing large images, I have encountered limitations with iOS and certain mobile browsers. While stationary browsers pose no issue, iOS only supports PNG images up to 5 megapixels in resolution, w ...

jqueryioscss

Unexpected resizing occurs when SVGs are nested within each other

I am experimenting with using nested inline SVGs to creatively position smaller svg images within an svg container. However, I am finding it challenging to grasp the guidelines for sizing nested SVG elements. svg { display: block; } Here is my query - ...

htmlcsssvg

Using Jquery to utilize next() function along with removeClass()

https://i.sstatic.net/6xlR6.png The image above demonstrates what I am trying to achieve - when a row is clicked, it should hide, the next row turns red and clicking on that hides it too, moving on to the next available row in the sequence. $(document).r ...

jqueryhtml

.npmignore failing to exclude certain files from npm package

I'm facing an issue with a private module on Github that I am adding to my project using npm. Despite having a .npmignore file in the module, the files specified are not being ignored when I install or update it. Here is what my project's packag ...

javascriptnode.jsnpm

Slide up using jQuery to the left direction

I am looking to design a weekly calendar that slides the old week left or right when switching to a new week. Does anyone have any suggestions on how I can implement this feature? I'm currently struggling to come up with a good solution. Any help is ...

jqueryjquery-animate

Failure to specify the variable type can lead to the creation of automatic global variables

Recently, I stumbled upon this http://www.w3schools.com/js/js_scope.asp page which introduced me to the concept of "Automatic Global variables". Here is an example of how it works: // You can use carName variable here function myFunction() { carName ...

javascriptangularjs

How to align text to the left and image to the right using CSS

I'm fairly new to CSS and struggling with a design issue. I want to display a series of stacked divs on my page, each containing text and one or more images. My goal is to have the text left-aligned and vertically centered, while the images are right ...

csshtmllayout