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:

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

I am having trouble running the code, PHP seems to be operational as I have tested it with sample PHP code. Can anyone help decipher? I have shared the PHP and HTML code for reference

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Computer Status Checker< ...

phphtml

The setState function in the useState hook is being called only one time when triggered by an EventListener

Within my functional component, I am utilizing the useState hook to store state. When the user reaches the bottom of the page, I want to dynamically add content. To achieve this, I implemented an EventListener for 'scroll' within a useEffect hook ...

javascriptreactjsreact-hooksnext.jsevent-listener

I'm puzzled as to why $document.referrer in AngularJS is returning blank, whereas using document.referrer directly gives me a value

let source = $document.referrer; Looking for the value of $document.referrer and storing it in a variable. ...

jqueryangularjsjqlite

The Jquery ajax function fails to execute after upgrading the framework version from 3.5 to 4.0

After testing with alert, I am facing an issue where the ajax call is not working in my aspx.cs file when switching from .NET framework 3.5 to 4.0. The ajax function being used is: function GetCustomers(pageIndex) { $.ajax({ t ...

c#jqueryasp.netajax

Transmitting a pair of parameters in a solitary AJAX call

Currently, I have a webpage that retrieves user input from $_POST. Here is an example of how it looks: $login=$_POST['name']; Later on, upon clicking a button, it triggers an AJAX request as shown below: var id = $(this).val(); var d ...

phpjqueryajax

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

Tips for utilizing richtextarea with html entities and managing the character limit for storage in a database

When using richtextarea, users can select text and change it to bold or italic. $("#edit2").richtextarea({ toolbar: false }); $("#bold").click(function() { $("#edit2").richtextarea('bold'); }); However, the output is sanitized using htmlenti ...

phpjquerymysql

Ensure that the input remains below ten

My goal here is to ensure that the value in an input element is a non-zero digit (0<x<=9). Here's the HTML tag I'm using: <input type="number" class="cell"> I've experimented with various JavaScript solutions, but so far none h ...

javascriptjqueryhtml

Tips for adding animation to a React state value change triggered by an input

In my React application, I have a form with multiple fields that each contain a text input and a range input. Currently, both inputs share the same state value and onChange function to keep them synchronized. However, I would like to add an animation effe ...

javascriptreactjsanimationreact-hooksgsap

What is the process for uploading files using AngularFire on Firebase Storage?

Despite watching multiple videos and tutorials, I am encountering a 403 error while working with Angular 1. To solve the issue of ng-model not supporting files, I created an Angular directive named file-model: app.directive('fileModel',['$ ...

javascriptangularjsfirebaseangularfirefirebase-storage

Save a JSON object from a URL into a JavaScript variable using jQuery

I am trying to figure out how to use the .getJSON() function to store a JSON object as a JavaScript variable. Can someone guide me through this process? var js = $.getJSON(url, function(data) {...} ); Is it necessary to include the function(data) { ...

javascriptjqueryjson

What is the best way to incorporate Bootstrap's datepicker into a website?

I'm currently working on an AngularJS application. Here is the code I have: <directive date="date" date-format="YYYY-MM-DD" > <input ng-model="Date" type="text"/> </directive> Is there a way to integrate an Angu ...

angularjshtmltwitter-bootstrapdatepicker

What are some methods to make sure that functions in AngularJS do not run at the same time

I am new to the world of JavaScript and I have encountered a problem with one of my functions. The function is designed to retrieve cached resources, but if the resource is not found in the cache, it makes a call to the back-end. The issue arises when thi ...

javascriptangularjspromise

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

Implementing a function to navigate to a different page using jQuery mobile

I'm attempting to pass a function when changing pages in jQuery Mobile, but I keep getting an error that points to `$.ajax` $( ":mobile-pagecontainer" ).pagecontainer( "change", "#schoolperformance", { reload : true, showLoadMsg : false, ...

javascriptjqueryajaxjquery-mobilejquery-mobile-ajax

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

htmlcsstwitter-bootstrap

Having trouble showing the material-ui icon on my navigation menu

How can I use Material-UI icons like <AddOutlinedIcon /> in my nav menu without displaying the actual code before the menu name? Do I need to escape the icon code somehow to make it appear correctly? The intended result is to have a + icon displaye ...

javascriptarraysmaterial-uiiconshtml-escape-characters

Unable to locate 'react' for mdl module

Currently working on my first website using react, following a tutorial available at this link I am attempting to install and utilize the material lite module, but encounter a compilation error when starting npm with the following message: Error: Module ...

javascriptnode.jsreactjsnpm

Tips for obtaining results from a File Reader

I am currently facing an issue with an onchange event in my HTML. The event is intended to retrieve an image from the user, convert it to a data URL, and then send it over socket.io to store in the database. However, I am struggling to figure out how to ac ...

javascriptangularfilereader

The onClick() function in JavaScript is encountering issues on the Firefox OS mobile application

I've been working on an app for Firefox OS mobile devices where I'm trying to trigger a Javascript function onClick() from a div attribute. It's functioning properly in regular browsers, but when I test it in the simulator, the onClick funct ...

javascripthtmlfirefoxonclickfirefox-os