The issue of height and width always being zero in Chrome when using Classic ASP with JavaScript

Within my markup, I have an image field that I am setting the source for using JavaScript. I am in need of its height and width, so I utilized the image.height() and image.width() methods. Despite working properly in Internet Explorer, these methods do not seem to be functioning in Chrome. I attempted to use image.height and image.width instead, but unfortunately, no values were returned.
Moreover, I also tried changing the prop method to attr for setting the image src, which resulted in the same outcome. Below is a snippet of my code:

function new()
{
timg = new Image();
    timg.src=fpath; 
}

I call this code within another method:

function Size(timg) {

        var con=150;
        th=timg.height;
    alert("th="+th); //this always returns Zero in Chrome
        tw=timg.width;
    alert("tw="+tw); //this also returns Zero in Chrome
        }

If anyone has any advice or suggestions, please let me know!

Answer №1

Have you attempted the following:

<script>
var tw = document.getElementById('YourElemId').clientWidth;
document.getElementById('result').innerHTML = tw;
</script>

<div id="result"></div>

For information on browser compatibility, please visit https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

If you are unable to retrieve the width of the image with id="YourElemId", try wrapping your image within a div with id="YourElemId" and then use document.getElementById('YourElemId').clientWidth. You can test this by adding a border and setting a max-width in the div style like so: border:1px solid #000;max-width:?px;

I have found that the clientWidth property may not work for elements with display:inline. Elements such as span, img, and others are inline by default. You can try setting your element with id="YourElemId" to display:block;

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

Combine the array elements by date in Angular, ensuring no duplicates are present

How can array data be merged based on the date while avoiding duplicates? See the code snippet below: [ { date: [ '2019-12-02 08:00:00', '2019-12-03 08:00:00' ], upload:["47.93", "47.46", "47.40", "47.29" ], download: ["43.90", ...

Unleashed placement and drifting

Is it possible to style this layout without specifying an exact height for "Element 1"? Code Element1 { positon: relative; width: 100%; height: auto; /* Avoiding specific height */ } Inner1 { position: absolute; top: xyz px; left: xyz px; } Inner2 { po ...

Is the process.env.NODE_ENV automatically set to 'production'?

While examining someone else's code, I noticed this particular line. if (process.env.NODE_ENV === 'production') { ... The application in question is a node.js app with express server and reactjs front-end. If we were to deploy it on Heroku ...

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

Create a design where the logo seems to be suspended from the navigation bar using bootstrap

My goal is to achieve a navigation bar similar to the one shown in this image: Using Bootstrap 3, the code below is what I have implemented for my navigation: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <di ...

Getting a specific index from an array using the Angular ng-repeat Directive: A step-by-step guide

I am trying to retrieve a specific index in an array using the ng-repeat directive. Currently, it is displaying information for all indexes... I only want to display the information for the second index as an example... This is my main.js: app.controll ...

Optimal utilization of JSON in JavaScript API: Enhancing Performance, Reinforcing Maintainability, and Optimizing Resources

Currently, I am working on developing an application using Laravel and VueJS (along with Vuex). Although I do not have much experience in working with these frameworks or front-ends, I am curious to know the best practices for utilizing the data received f ...

Swap out a module with a different one in a node.js environment

In the scenario where a node.js application consists of numerous files referencing a particular module (like underscore), and there is a need to replace that module with another (such as lodash), the typical approach involves globally replacing the names a ...

What is the best way to incorporate a new attribute into an array of JSON objects in React by leveraging function components and referencing another array?

Still learning the ropes of JavaScript and React. Currently facing a bit of a roadblock with the basic react/JavaScript syntax. Here's what I'm trying to accomplish: import axios from 'axios'; import React, { useState, useEffect, useMe ...

Is there a way to modify the edit button to become a save button and include a cancel button?

Is there a way to toggle between an edit button and a save button, along with a cancel option? $('#edit').click(function() { $(this).hide(); $('#save, #cancel').show(); }); $('#cancel').click(function() { $('#ed ...

jquery-validation error in gulp automations

I've encountered a sudden error in my gulp build related to jQuery validation. There haven't been any recent changes that would trigger this issue. Interestingly, one of my colleagues is experiencing the same problem, while another one is not. We ...

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript Currently working with an array of functions like this private listeners: ((name: string) => void)[] = []; Successfully adding functions to the array within another function. Now looking to trigger those ...

Step-by-step guide on displaying SVG text on a DOM element using Angular 8

I have a FusionChart graph that I need to extract the image from and display it on the same HTML page when the user clicks on the "Get SVG String" button. I am able to retrieve the SVG text using this.chart.getSVGString() method, but I'm unsure of ho ...

Utilizing AngularJs to connect server-generated HTML content to an iframe

My Angular app functions as an HTML editor that transmits the template to a server for rendering with dynamic data. The rendered content is then sent back to the client, where it needs to be placed inside an iframe for preview purposes. It appears that ng- ...

I am looking to loop through an array nested within a JSON object and display it in a table column using

Within my JSON data, there is an array that I need to loop through in <td> tags. The functionality I am working on involves creating a table based on user input. The user specifies the number of rows, input columns, and output columns. I have three a ...

Incrementing and decrementing a textbox value by one using onClick

I'm looking for help with a JavaScript solution without using jQuery or any plugins, specifically for Cordova/PhoneGap. I am new to JavaScript and learning as I go, so please bear with me. My goal is to create a functionality where there is a textbox ...

The method models.User.fromURI is unsuccessful

When I try to call models.User.fromURI as shown below: models.User.fromURI("spotify:user:" + user, function (user) { $(div).html("<b ><a style=\"color:#FFFFFF\" href=\"spotify:user:" + user.username + "\">" + us ...

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

I'm encountering some issues trying to install next-auth in my project built with Next.js and React

I recently set up my Next.js project with React using yarn create next-app. However, I am facing an issue as the next-auth package is not installed in my project. Currently, my node version is LTS 16.15.1, yarn version is 1.22.18, and npm version is 8.9. ...

The AngularJs project is currently experiencing issues when trying to function as a single page web application

I'm currently working on incorporating AngularJS into an existing web project that uses jQuery. Here is a snippet of my code: <div class="medya" ng-repeat="d in data" masonry-item-dir> <a href="{{d.Url}}" class="onizleme"><img src="{ ...