Transferring data from jQuery to HTML

Is there a way to incorporate the width and height of an uploaded image into the HTML img src at the bottom of my page using jQuery within Umbraco?

<script>

    function getMeta(varA, varB) {
        if (typeof varB !== 'undefined') {
            alert(varA + ' width ' + varB + ' height');
        } else {
         
            var img = new Image();
            img.src = varA;
            img.onload = function () {
                getMeta(this.width, this.height);

            }
        }
    }
    getMeta("@image.Url()")
</script>

    <img src="@image.Url()" width="" height="" border="0" alt="@Model.Value("mapImage") 
    mapImage" usemap="#Map" />

The width and height attributes are currently left empty, but I need them to be populated with the dimensions of the uploaded image. These values should be dynamic based on the size of the image for other functions as well.

Any help would be greatly appreciated. Thank you :)

htmljquerycss

Answer №1

Great news! This code utilizes pure JavaScript without any reliance on jquery.

Furthermore, you can simplify your data model by directly updating the image element with the proper dimensions. Just do this:

img.onload = function () {
  const imgElement = document.querySelector('img'); // find the image element in your HTML
  imgElement.style.width = `${this.width}px`; // set the width using pixels
  imgElement.style.height = `${this.height}px`; // do the same for height
}

By following these instructions, your image will be perfectly resized to match the original proportions.

Answer №2

After making sure I understood your request correctly and you have a uploaded image (the source obtained by calling @image.Url()), and you wish to apply its dimensions on another image (with id templateImg), here is the code snippet:

<img id="templateImg" src="https://cdn.vox-cdn.com/thumbor/prZDWmD_4e4Js7KCRJ2JDrJOqO0=/0x0:939x704/1400x1050/filters:focal(0x0:939x704):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/49610677/homersimpson.0.0.jpg" />

      <script type = "text/javascript">

         var uploadedPic = 'https://i.pinimg.com/736x/dd/50/38/dd5038cdbfde2a8f1583bd84f992f862.jpg';
    
         function getMeta(src) {
           return new Promise(resolve => {
                 var img = new Image();
                 img.src = src;
                 img.onload = function () {
                    resolve({
                       width: this.width, 
                       height: this.height
                    });
                 }
           })
         }
         getMeta(uploadedPic)
           .then(dimensions => {
              document.getElementById('templateImg').style.width = `${dimensions.width}px`;
              document.getElementById('templateImg').style.height = `${dimensions.height}px`;
           });   
            
      </script>

This was a functional example using actual images. Now, simply replace the line var uploadedPic... with the following Razor code:

<text>
var uploadedPic = '@image.Url()';
</text>

(assuming this represents the path to your uploaded image) and everything should work smoothly.

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

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver

Is there a way to access the source code of a page without having to open Firefox using Selenium?

I am looking to create a web crawler that can save links of pages without the need to open a browser. I have already successfully implemented this functionality in a Windows application using the code below. Can someone please assist me in achieving this ...

htmlselenium-webdriver

CSS: Even when text is concealed using text-overflow:ellipses, it remains in existence

I am dealing with a ul element that contains li's of varying lengths but with a fixed width. Each li also has some icons within it. <ul> <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li> &l ...

csshovercss-position

Text alignment validation in jQuery

utilizing the validation capabilities of the jQuery validation plugin check out: http://jsfiddle.net/Kn3v5/205/ <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <div> <form id ...

jquerycssvalidation

How about displaying the Ajax response as an image?

I'm working on a script that pulls an image link, which seems to be functioning correctly. However, I am struggling with how to display the link as an image. Can someone please assist me with this? <script src="//ajax.googleapis.com/ajax/li ...

javascriptjqueryhtmlajax

Javascript textfield button function malfunctioning

Here is the code I have created: HTML: <form method="post" id="myemailform" name="myemailform" action="form-to-email.php"> <div id="form_container"> <label class="descriptio ...

javascriptjqueryhtml

Sticky navigation bar anchored to the top of the webpage using CSS and HTML

Currently, I am in the process of learning CSS3 and HTML5 but I'm facing some confusion. My goal right now is to create a webpage with a fixed navigation bar at the top that scrolls along with the page. Although the navbar is fixed at the top and doe ...

htmlcss

Display a "Saving...." animation on the screen as a record is being saved to the database

There are a couple of ways to approach this design: One option is to use a gif file. When the Save button is clicked, a "Saving..." gif file will be displayed on screen for a hardcoded delay before the record is saved to the database. However, this may ...

c#jqueryajaxasp.net-mvc-3razor

Unable to load more content in JQuery Mobile version 1.11.1 when attempting to click for additional content

My news app features a homepage with headlines displayed, and when a user clicks on the "load more" link, additional headlines are loaded. However, after updating my jquery mobile version from 1.8.3 to 1.11.1, the "load more" link no longer functions prope ...

jqueryajaxjquery-mobile

Incorporating an iframe seamlessly into a div element with scroll functionality

To start off, you can find the code in this JSFiddle link I am attempting to include an iframe as if it were a div. I understand how to do this with a regular iframe, but the one I am using contains a slider, resulting in two vertical scroll bars appearin ...

htmlcssiframe

Reset the input field upon button press

Is there a way to clear the input field after pressing the button? <div class="form-group autocomplete"> <div class="input-group search"> <input id="search" name="searchterm" type="search" class="form-control form-control search-input" pl ...

javascripthtmlbutton

Refreshing one Select based on the onchange event of another Select in CodeIgniter

Hey there, I’m new to CI and running into an issue: On my view page, I have a form with two select boxes. I want to dynamically update one select box (items) with data from the database based on the selection made in the other select box (category). Can ...

phpjavascriptjquerycodeigniter

Utilizing JSON with JQueryUI autocomplete in a Ruby on Rails environment

Hello everyone, I am currently working on an autocomplete form field and I seem to be having some trouble formatting the JSON data that needs to be passed into it. The JSON is returning in the following format: {"users":["12345","23456","34567", ... ]} ...

jqueryruby-on-railsrubyjquery-uiautocomplete

Display text below image in a reduced size for "mobile" screen

I am encountering an issue with my website where the font overlaps the image when viewed on a smaller device. How can I adjust the HTML or CSS to ensure that the text appears below the image on mobile devices? Below is the snippet of my HTML and CSS code: ...

pythonhtmlcssdjango

Creating an HTML and CSS Dropdown Navigation Menu with Mouse-over Functionality

Is it possible to create a mouse-over dropdown menu using CSS and HTML? I have noticed websites like Google that have implemented such menus, where passing through triggers a hidden tag to become visible. Can anyone provide source code for this idea? Than ...

javascripthtmlcssajax

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

javascriptjqueryhtmljquery-ui

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

htmlcsstwitter-bootstrap

Issue with child div not properly fitting inside parent div

I am working with three different divs in my code. There is one parent div and two child divs. The styling for the parent div looks like this: #parent { overflow:auto; margin: 0 auto; margin-top:37px; min-height: 100%; width:875px; } Now, let ...

csshtml

Error message when using Vue Global Filter: Value undefined is not defined

Trying to format currency, I initially attempted to use a global filter in Vue: Vue.filter('formatMoney', (val) => { if (!value) return '' val = val.toString() return val.replace(/\B(?=(\d{3})+(?!\d))/g, ",") ...

javascripthtmlvue.jsfilter

Accessing data with Ajax using functions outside of the Ajax function

Is there a way to access variable data from an external source in my code? Any assistance would be greatly appreciated. ...

jqueryajax