Adjust the size of the image based on its current dimensions, rather than its original dimensions

My goal is to scale an image with the ID "room" by a parameter of +1 or -1, which represents +-10% of the constant scaling factor.

This is my current approach:

function scalar(scaleP100){ /* scaleP100 ranges from +1 to -1 */
                    var addX = $('#room').width()*10*scaleP100/100;
                    var addY = $('#room').height()*10*scaleP100/100;
                    var newW = $('#room').width() + addX;
                    var newH = $('#room').height() + addY;
                    $('img#room').css({'width':newW,'height':newH});
                    console.log(newW +','+ newH+':'+$('img#room').length);
                    return false;
}

This function is triggered by mousewheel detection and has two stages: +10% increase from the original size and -10% decrease from the original size. However, I am facing an issue where it scales according to the original size instead of the current size.

I am unsure about what mistake I am making in my code. Any suggestions?

To further illustrate any points that may not have been explained clearly, feel free to visit (scroll outside the image only).

Thank you!

Answer №1

There are two elements in your code with the same id: <div id="room"> and <img id="room">. While this should work, it is best practice to keep your HTML cleaner by avoiding duplicate ids.

function scalar(scaleP100){ /* scaleP100 is +1 or -1 (no  other posible value)*/
    var addX = $('img#room').width()*10*scaleP100/100;
    var addY = $('img#room').height()*10*scaleP100/100;
    var newW = $('img#room').width()+ addX;
    var newH = $('img#room').height()  + addY;
    $('img#room').css({'width':newW,'height':newH});
    console.log(newW +','+ newH+':'+$('img#room').length);
    return false;
}

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

Steps to create a persistent bottom modal with scrollable content

I'm currently using Bootstrap 4.6 within my Angular application. I have implemented a modal that expands to full-screen on mobile devices, and now I want to add a fixed footer with scrolling body content. I've attempted to adjust the height of t ...

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3. My goal is to achieve the following: I have experimented with pull and push commands, but it seems like I still need more practice. Code: <div class="container"> ...

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...

Is there a way to define the maximum width of a table row?

My issue involves setting the max-width of a table row. Below is my CSS code: table tr { max-width: 1580px; margin-left: auto; margin-right: auto; padding-left: 50px; padding-right: 50px; } However, I am facing difficulties as the padd ...

Tips on arranging images in a horizontal layout

My images are appearing vertically instead of horizontally when I try to align them. What am I doing wrong? <div class="col-1 text-right pt-4"> <div class="row d-block"> < ...

Exploring the process of looping through JSON data using jQuery

What is the best way to loop through JSON data using jQuery? [{"id":"856","name":"India"}, {"id":"1035","name":"Chennai"}, {"id":"1048","name":"Delhi"}, {"id":"1113","name":"Lucknow"}, {"id":"1114","name":"Bangalore"}, {"id":"1115","name":"Ahmedaba ...

Is JavaScript necessary for this task in PHP?

Hi everyone, I recently discovered a way to style a PHP echo in a more visually appealing manner. Instead of presenting an unattractive colored box right away, I was wondering if there is a way to only display the box when the user selects the calculation ...

Why is the Ajax call not selecting the image in the ASP.NET form?

I've been working on a project using asp.net core and I encountered an issue with sending an ajax request to the controller. Specifically, my ajax function is causing me some trouble when it comes to uploading images/files. Currently, whenever a user ...

What is the best way to hide a div containing a ul list when all <li> elements within it have the display property set to none

Having an issue with my search feature. I have 6 different categories as shown below. When searching for something, I want the category box with no results to be hidden - all li elements should have display: none properties. <div class="category"> ...

Displaying a dynamic view following several asynchronous ajax requests using Backbone

I am working with a backbone view and I have a scenario where I need to render HTML after two asynchronous calls have completed: initialize: function (model, options) { team.fetch({ success: function (collection) { ...

Tips for minimizing unnecessary rerenders in child components that rely on cached information from the parent component

check out the sandbox here Application maintains state to compute a memoized value, which is then passed as props to the Options. When a change occurs in the state triggered by a callback function in Option, it causes a rerender of the main Application, r ...

Troubleshooting Problems with Ajax File Uploads

Welcome to My Unique HTML Form <center> <form enctype="multipart/form-data"> {{ csrf_field() }} <label class="fileContainer"> <input type="file" id="uploadFile" name="input_upload_file[]" multiple /&g ...

Troubleshooting a potential JSON problem when linking Angular JS with Firebase

My current challenge is figuring out how to properly format firebase data to work seamlessly with Angular. I have a functional view that works with ng as a static display, and within the $scope it is defined like this: $scope.standardItems = [{ name: ...

Easiest method for implementing event emitter in ES6

Here is the current setup for my event emitter: class Table { set onDiscard(cb) { this._onDiscard = cb; } notifyDiscard(s) { if (this._onDiscard) { this._onDiscard(s); } } } Dealing with multiple events using this method can b ...

UI-grid: Triggering a modal window from the filter header template

Is there a way to create a filter that functions as a simple modal window triggered by a click event, but can be displayed on top of a grid when placed within the filterHeaderTemplate? I have encountered an issue where the modal window I created is being ...

Issues with jQuery '.ajax()' requests falling short

I'm currently attempting to make a jQuery .ajax() call to a public web service, but I seem to be struggling with finding the correct syntax. I've experimented with various implementations. For example: $.ajax({ url: 'http://www.geognos.c ...

Which is better: express.Router() or app.get() for serving routes

I am currently working with Express 4 server for Node.js Express comes with a built-in router, which is utilized as follows: in app.js var router = express.Router(); app.use(router); app.use('/users', usersRoutes); in userRo ...

Utilizing MVC to serialize objects, lists of objects, and collections into Json format

Decoding json retrieved from the controller. It seems that in order to avoid errors, I have to use "ToString()" on the key element when returning a dictionary. What could be causing this behavior? Can someone confirm if the examples provided below demonstr ...

Converting a CSV string into an array only when there is a line break in the body

Need help to convert a CSV string into an array of array of objects. Struggling with handling \n in the incoming request, causing issues with splitting and code errors. The string format includes messages enclosed in ". "id,urn,title,body,ri ...