Calculation error causing incorrect top value display in Chrome [bug alert!]

After dynamically creating an element in jQuery and adding it to the page, I applied a class that sets its position to top:50%. Everything appeared fine at first glance, with the element positioned correctly at 50%. However, when attempting to retrieve the value of 'top' using .css('top'), I discovered that it returned an incorrect value of 470 instead of 20. This discrepancy caused errors in the effect that I was trying to achieve, as it relied on obtaining the correct value through JavaScript. Interestingly, this issue does not occur in Firefox; where I can accurately retrieve both the displayed and computed values.

Jsfiddle: http://jsfiddle.net/techsin/dbj2un2e/

d.css( 'top', d.css('top') ); alters the actual position in Chrome. (Uncomment to observe its impact)

To provide further clarification, I have included a screenshot. (View image in new tab for clearer visibility)

jqueryhtmlcssgoogle-chrome

Answer №1

try using position().top in place of css('top')

let element = $('<div>').addClass('zzz');

$('.abc').append(element);

console.log(element.position().top);

FIDDLE

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

CORS problem in Chrome when using AngularJS and Symfony 3

I've been dealing with a bug on my backend and frontend for the past week. I created a REST API (php/symfony) to manage books and authors. Initially, I had trouble with cross-origin requests on DELETE, which has been resolved. However, now I am facin ...

javascriptphpangularjssymfonygoogle-chrome

Should a tabindex attribute be added to an input field with type="reset"?

Would adding a tabindex attribute to an input[type="reset"] serve any accessibility or semantic purpose? Or would it be better to avoid it to prevent forms from being inadvertently and frequently reset? ...

htmlformsaccessibilitysemantics

Selecting Options for a Dropdown Menu from a List of String Values

I have a list of weather locations stored in a file called WeatherLocationDatabase.txt that I need to use with the AccuWeather API. The content of the file looks something like this: CityName="Aachen, DE" Location="EUR|DE|GM011|AACHEN" Country="Germany" C ...

jqueryajaxregexlistpopulate

Struggles with Managing 5-Digit Unicode Characters with jQuery

I need some assistance with using larger Unicode images in JQuery, as I am encountering difficulties that I cannot seem to resolve. For example, when I use the following line of code: if ( IsItOverFlowing() ) { $HM.text("\u2302"); } a charming litt ...

jquery

What is the best way to design a large grid layout using HTML5?

I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell. Below is my current progr ...

htmlcss

How can I fetch the ID from a posted AJAX request in PHP?

Is there a way to retrieve the data from an ajax request in PHP? I am able to successfully return a string of data using ajax, but I'm having trouble accessing the variable passed as a json object. How can I access a json object that only contains one ...

phpjavascriptjquery

Initiating an AJAX call to fetch JSON data

I am attempting to retrieve JSON data from https://twitter.com/i/search/timeline?f=realtime&q=blogger&src=typd Despite my efforts, I have encountered an error while making a cross-domain request: $(document).ready(function() { var contentType ...

jqueryjsonajax

PHP not cooperating with AJAX POST method, only GET is functioning as intended

I'm having trouble sending a POST request to php using Ajax. When I use GET everything works fine, but with POST the data received in php is empty. I am sending the data as json. Below is the JavaScript code: $.ajax( { type: &ap ...

phpjqueryjsonajaxpost

Create a shiny application that makes text bold in the user interface

Can someone please guide me on how to make specific words bold in a sentence within the UI using HTML tags under the h() function? Your assistance is greatly appreciated. Thank you. library(shiny) ui <- navbarPage( title = 'Benvenuto&apos ...

htmlrshiny

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

javascriptjavajqueryhtmlthymeleaf

Update the color of the angular material input text box to stand out

Hey there, I'm currently using Angular Material and I want to change the color of the input focus when clicked. At the moment, it's displaying in purple by default, but I'd like it to be white instead. https://i.stack.imgur.com/vXTEv.png ...

htmlcssangularangular-materialmaterial-ui

Is it possible to execute HTML5/JS code without relying on the client side?

Looking to develop animations using HTML5 canvas and then convert them into a video by capturing each frame. The challenge lies in running the HTML5/JS code on the server side without requiring a client(browser). Is there a way to execute it without displ ...

jqueryhtmlffmpeghtml5-canvascss-animations

PHP Troubleshooting: Resolving Ajax Problems in Symfony 4

I am currently learning Symfony and attempting to integrate Ajax with Symfony. I have placed the Ajax code within a javascript block in Twig and added a simple function in the controller file to test its functionality. However, it seems that the Ajax is no ...

javascriptphpjqueryajaxsymfony

AJAX function failing to trigger for the second time

I'm currently facing an issue with my JQuery AJAX function. It's supposed to populate a dropdown in a partial view based on the user's selection from another dropdown menu. The first part of the function is working as expected but the secon ...

jqueryajaxasp.net-mvc

Change the information displayed on buttons when clicked and provide options for users to navigate between different

In order to change the content when a button or number is clicked, you can utilize the buttons "1,2,3,4" or the Next and Prev buttons shown in the snippet. Both methods allow access to the same article. If you want to switch between articles using the Next ...

javascripthtmljquerycssbutton

What is the reason for parent rows not stretching fully across the width of the page?

I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting display:flexbox; flex-direction:column; Here is the HTML tabl ...

cssvue.jsbootstrap-5

How can I submit a form using Ajax and save the response data?

I'm currently using a form to send SMS data to the sms.php page for processing. However, I want to submit the form data without redirecting to the sms.php page. Instead, I would like the data to be processed on the same page using Ajax. Although I hav ...

javascriptphpjqueryajax

Using Jquery's append() method to dynamically alter the HTML content

I am attempting to create a table with rows that are added dynamically. The challenge I am encountering is that each row consists of form elements, including multiple inputs. I have a PHP function that generates the correct row, and I have been able to sen ...

javascriptjqueryajax

Position the colored div on the left side of the page

Here is the CSS I am currently using... <style type="text/css"> .widediv{width:1366px;margin-left:auto;margin-right:auto} </style> This CSS code helps me create my webpage : <body><div class="widedivv"> <!-- Content go ...

javascripthtmlcss

what's the reason for ajax constantly sending requests back-to-back?

Today, I find myself pondering. In my current project, the ajax calls are not behaving asynchronously. Each request is being sent one after the other. As one request is being processed, all other requests are getting stuck in a pending state. You can ob ...

javascriptjquery.netangularjsasp.net-mvc