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

I'm using SASS in my project, can you provide guidance on customizing the UI with @aws-amplify/ui

I've recently taken over a Next.js (React) project from another developer and they've used .scss files (SASS) for styling. The specific project I'm working on can be found here https://github.com/codebushi/nextjs-starter-dimension My task n ...

Having trouble retrieving image files from CSS within a Spring MVC Application

I am facing an issue with my Spring MVC application where I cannot get an image to display in a CSS file accessed from a JSP file. The CSS is working fine, but the image just won't show up. It seems like there might be an issue with how I am addressin ...

Tips for properly filling empty spaces in a flexbox layout using HTML

Is there a way to fill in the gap using CSS so that boxes automatically take up the empty spaces, even if they are of different sizes? How can I make sure the boxes adjust automatically as the screen size changes? .c1 { display: flex; flex-wrap: w ...

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

Switch images when hovering

I currently have two dropdown menus called NEW and SHOP. When I hover over the New Menu 1, it should display the corresponding image. Similarly, when hovering over New Menu 2, the related image should be shown in a div with the ".menu-viewer" class. Whil ...

Receiving and monitoring events triggered by a Vue component that was dynamically mounted

I am currently mounting a Vue component dynamically within a mixin to incorporate the resulting HTML into a map popup. While everything is functioning correctly, I am facing an issue with listening to events emitted by the component. I am unsure of how to ...

Comparison between bo-html and bo-text

As I was going through the documentation for the bindonce directive, a question popped into my head regarding the distinction between bo-html and bo-text. bo-html: This evaluates "markup" and displays it as HTML within the element. bo-text: ...

Struggling to transmit data to material dialog in Angular2+

I am facing an issue with my Material Dialog not working properly. Can anyone point out what I might be missing? product-thumbnail.ts I will use this to trigger the dialog export class ProductThumbnailComponent implements OnInit { @Input() product: Pr ...

What is a reliable method for consistently updating backend C# with user-side JS data whenever it is altered?

I'm working on a front end JS application that includes visual sliders. I need to send the updated slider information to the C# backend (ASP.NET) whenever a user makes changes. After some research, it seems like AJAX is the most efficient way to achie ...

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Currently, I am utilizing DataTable to display 3 separate tables with the help of tabs, along with a search function. However, every time I load the page, I encounter a reinitialization error. Here is the snippet of my code: _datatables.forEa ...

A simple guide to running Express Js and MongoDB from the command line and gracefully closing the terminal

Is there a way to run an Express project without the terminal being visible or easily closed? I need my server to stay running, but I don't want the user on the local PC to be able to see or close the terminal. Any suggestions on how to achieve this ...

It is not possible to attach separate links to images in a JavaScript slider

I am struggling with linking individual images in a JavaScript slider for a client's website. The slider is fully functional and works well, but I can't seem to figure out how to link the images properly. When I remove items from <--ul class= ...

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

Apply a dynamic function to assign a background color to a specific class

Currently, I have a function called getBackground(items) that returns a background color from a JSON file list. Within my application, there is a component that automatically adds a class name (.item-radio-checked) when a user clicks on an item in the list ...

Sorting customization within a complex nested array structure

Sorting a nested array can sometimes be tricky. Consider a JSON structure like the one shown below: var orders = [{ 'orderId': 1, 'sales': [{ 'salesNumbers': 3 }] }, { 'orderId': 2, ...

The grouping functionality of the Material UI Buttongroup seems to be failing to properly

Working on a review score list currently, where I've set up a RadioGroup with RadioButtons. However, the issue is that the RadioButtons are not aligning properly with the RadioGroup. The goal is to have the radiobuttons styled similarly to the exampl ...

Draggable object animation in VueJS allows for smooth movement of

I'm currently working on developing draggable objects in Vue.js from scratch, but I've encountered two issues. After dragging, the object quickly snaps to the target coordinates without any transition effect. I attempted to eliminate the &apos ...

gh-pages: Images that should not be cached

Every time my build server completes a new build, it automatically uploads a pass/fail graphic to the gh-pages branch. I'm looking to showcase this graphic on my project's page. Unfortunately, it appears that gh-pages is caching the image. Any s ...

I'm attempting to retrieve external XML data and showcase it on my HTML page

My goal is to extract any xml tag from the provided sample. However, I am facing an issue with Internet Explorer where I can only retrieve data from the first record. What kind of javascript code should I implement to resolve this problem? <html> ...