Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

I'm currently working on a simple sliding animation. However, the div that slides in is utilizing percentages for its width and right positioning.

The issue arises specifically in Webkit browsers. When using jQuery to retrieve the value, it returns the percentage itself rather than the calculated value based on the parent element's width, which is the case in Firefox.

Check out this example here: http://jsfiddle.net/flisterz/ChZLu/

Click the trigger, and you'll notice that the "right" value displays as a percentage on your first click in Webkit (only on the first click). In contrast, Firefox correctly calculates the "right" value even on the first click.

Any advice would be greatly appreciated. Thank you!

javascriptjquerycss

Answer №1

If you're looking to determine the position, you may need to utilize the position() method. Typically, elements are positioned using top/left values so I have demonstrated the example with left rather than right. The layout is still achieved using percentages in the CSS.

With a bit more calculation, you can also implement right if required.

Check it out here: http://jsfiddle.net/ChZLu/1/

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

Tips for updating a reactive form with multiple layers of nested JSON values

I am tasked with retrieving and working with the data from a deeply nested (potentially infinite levels) reactive form that includes formArrays, formGroups, and formControls. This data is stored in a database. Currently, my approach involves patching the ...

javascriptangularangular-reactive-forms

Tips on defining the specific CSS and JavaScript code to include in your Flask application

I am currently working on a web application using Flask and I need to specify which CSS and JS files should be included in the rendered HTML page based on a condition. There are times when I want to include mycss1.css and myjs1.js: <link href="/sta ...

javascriptpythonhtmlcssflask

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

javascriptjqueryhtmlcss

Activating gzip compression using fetch.js

I am utilizing fetch.js (https://github.com/github/fetch) to transmit a rather substantial JSON object to the backend. The size of the JSON is significant due to it containing an SVG image string. My question is whether fetch.js applies gzip compression a ...

javascriptjsongzipfetch-api

Incorporate CSS styling into ScalaHelpers

Is it possible to customize the CSS for Scala Helpers and remove certain text from the textfield? https://i.sstatic.net/eG6HY.png @inputText(advForm("weeknr")) @inputText(advForm("jaar")) @inputText(advForm("datum")) --------------------EDIT 1---------- ...

cssformsscalaplayframework

Tips for altering CSS using the `:hover` pseudo-class

CSS Style for Navbar .navbar li { color: #B7B7B7; font-family: 'Montserrat', sans-serif; font-size: 14px; min-width: 70px; padding: 22px 16px 18px; } .navbar #menumain ul { width: 120%; } .navbar ul ul { display: none; } <div ...

htmlcssdisplaymousehover

What is the process for setting environment variables in a Svelte project?

I'm brand new to working with Svelte and I want to incorporate environment variables like base_url into different components. I've read that I can set up a store to hold these values, for example: const DataStore = writable([ { base_url: & ...

javascriptsveltesvelte-store

Swapping out the Close Icon for a Button in Modal Box

Currently, I am utilizing JQuery UI to launch a Modal Window. The existing setup features an X Icon on the right side of the header titlebar for closing the Modal Window. However, I am interested in replacing this X icon with a labeled Button that says C ...

jqueryjquery-ui

"An error has occurred in the file system, make sure to handle it when

I am encountering an issue with submitting a form using jQuery's ajaxSubmit() function. The problem arises when the file selected in the form is renamed, deleted, or made inaccessible before submission, leading to potential discrepancies in whether th ...

jqueryhtmljspfile-uploadstruts2

From AJAX response to React state attribute, store the JSON data

I have a component where I need to fetch freight values via ajax and store them in the state property of this class. import React, { Component } from 'react'; import Freight from './Freight'; import CreateFreightEntryModal from '. ...

javascriptjsonajaxreactjs

Comparison of fields using JQuery validation rules

What is the process to use jQuery validate.js to compare the values of two textboxes? When it comes to a required field, I typically implement something similar to this: <script> $(document).ready(function () { $('[id$ ...

jqueryjquery-validate

Is it possible to utilize ko.observableArray in the form of a map?

Can an ko.observableArray be used as a map or dictionary? For instance: var arr = ko.observableArray(); arr.push('key', { '.. Some object as value ..' }); And then retrieve the value using the key: var value = arr['key']; ...

javascriptknockout.js

What steps can be taken to enlarge the select button within a <select> field?

Is there a way to enlarge the size of the downward-pointing arrow button within a <select> element? Here is an example of what my code looks like: <select> <option>Select City</option> <option>City1</option> <o ...

htmlcss

jquery counter is malfunctioning

I noticed a strange issue with the counters on my website. They count up as expected when the page loads, but for some reason, when the screen width shrinks below 800px, they don't start automatically. However, if I quickly scroll to where the counter ...

javascriptjqueryhtmlcsscounter

Accessibility issues detected in Bootstrap toggle buttons

I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...

javascriptjqueryhtmltwitter-bootstraptoggle

Utilize Google Maps in jQuery to visualize the distance between two points by inputting the names of the cities or counties

I am in need of creating a map that includes a starting point marked as A and an end point marked as B using Google Maps. Currently, my database stores the names of Regions/Counties as strings rather than geolocation data (longitude and latitude). Is it fe ...

jquerygoogle-mapsdrawdistance

Conceal a div element after initial visit

There is a button (B) that displays a menu (C) when clicked, and a pop-up (A) that also shows the same menu (C) when clicked. There are 4 tasks to accomplish here. 1) Clicking B reveals C. 2) Clicking A reveals C. 3) Clicking B hides A. 4) A should be hi ...

javascriptjquerycookieslocal-storage

Identify whether the user is a legitimate browser or a bot or crawler

Greetings everyone! I have implemented a function on my website to retrieve the user's country using a cookie and ajax in jQuery when they first visit. However, this function takes around 800ms to run, affecting my page speed statistics. I have search ...

jqueryuser-agent

Guide to making a Java Servlet for a specific jQuery.ajax () request?

In one of my files named wfd.proxy.js, I have the following code snippet: if (!WFD) { var WFD = {}; }; if (!WFD.Proxy) { WFD.Proxy = {}; }; WFD.Proxy = { SERVICE_URL : "/delegate/WFD/WFService?", PDF_SERVICE_URL : "/delegate/pdf-exporter?", ...

javajavascriptjqueryajaxjson

What are the steps for establishing a connection to Heroku using node-mongodb-native?

I'm feeling lost when it comes to connecting to MongoLab on Heroku. I came across an example that was supposed to help, but it just left me more confused. You can check it out here. After looking at both the web.js and deep.js files, I noticed they b ...

javascriptnode.jsmongodbheroku