The powerful duo of jQuery and CSS shine brilliantly on iOS devices

I attempted to determine the position of an element from the right side. This is how I defined it in my CSS

.container {
   position: absolute;
   right: 8%;
   bottom: 7%;
}

When trying to get the position using jQuery, I used the following code:

$('.container').css('right');

This resulted in 142px on Chrome and Mozilla browsers,

but displayed 8 (percentage) on iOS browsers like Safari and Chrome.

Are there any other jQuery options available to retrieve the value in pixels for both iOS browsers and others?

javascriptjqueryhtmlioscss

Answer №1

Calculate the value based on the percentage...

var px_right = ('.container').css('right');
/* --- however --- */ 
if ( /*iOS*/ navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    px_right = (('.container').css('right'))/100.0  * window.width();
}

`

UPDATE! Oops, I forgot to include this: /100.0. Here is the revised version:

px_right = (('.container').css('right'))/100.0  * window.width();

for example: 'px_right = 8% of 980px = 0.08*980 = 78px

Answer №2

Consider implementing 

let style = Window.getComputedStyle($('.container')[0])
console.log(style.right);

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 it possible to still get Push Notifications on my mobile device if I remove the Authentication Key from my Apple Developer Account?

After setting up an authentication Key in my Apple Developer Account to enable push notifications for my iOS app, I utilized Firebase to send notifications by including a .p8 file and providing Team ID and Key ID. Currently, I am successfully receiving n ...

iosswiftapple-push-notifications

What is the process for importing a node module in React-Kotlin?

After creating my app using the create-react-kotlin-app command, it loaded successfully in Chrome. I then installed the React Material UI package via NPM without any issues. However, I am now facing the challenge of incorporating the Material UI module int ...

javascriptreactjskotlincreate-react-kotlin-app

Grails - Instant file upload without the need for refreshing the page

My approach to file attachment and handling in my main form/document is unique because I use a hidden iframe for users to dynamically upload files. Whenever a user adds or removes a file, it undergoes a process where it gets deleted from or persisted to t ...

javascriptajaxgrails

Leveraging implode function to populate data into the columns of a database table

Currently, I am successfully using PHP implode to insert values fetched from an array of input fields into a column in a database table. Here is the code that is working for me: $insert_row = mysql_query("INSERT INTO ActivityProduct (Ideal) VALUES (" . im ...

phphtmlmysqldatabase

A loop that iterates through only the initial element of an array

When trying to call in the array values using the code snippet below, I encountered an issue. Upon clicking, I am able to successfully retrieve the first material in the array, but then it stops looping through the rest of the materials. Can someone plea ...

javascriptarraysthree.js

Unable to render JSON string with jQuery

My jQuery mobile web service is returning a JSON array named jsonString containing user information. The data in the array looks like this: { "id": "10844", "password": "acddcd", "role": ["PortalAdmin,ViewAllJob,SetupAdmin,Budget Approval,Mark ...

jqueryjson

JavaScript heap running out of memory after upgrading from Angular 11 to versions 12, 13, or 14

I need assistance with resolving a JS heap out of memory issue that has been occurring when trying to start the local server ever since migrating from Angular 11 to Angular 12 (or 13 or 14, all versions tested with the same problem). This occurs during th ...

javascriptnode.jsangulartypescriptnpm

What is the best way to showcase an item from an array using a timer?

I'm currently working on a music app and I have a specific requirement to showcase content from an array object based on a start and duration time. Here's a sample of the data structure: [ { id: 1, content: 'hello how are you', start: 0 ...

javascriptarraysreactjsreact-hooks

What specific event triggers the AVAudioSessionSilenceSecondaryAudioHintNotification?

As stated in the documentation for Xcode, The AVAudioSessionSilenceSecondaryAudioHintNotification is posted on the main thread when external audio from other applications starts and stops. To ensure that your app is alerted when optional secondary audio ...

iosobjective-cavfoundationcore-audio

Tips for automatically checking a form's accuracy before moving to the next stage in a multi-step form with zod and react-hook-form

In my application, there is a multi-step form. Currently, if a user skips some steps and tries to submit the form, it won't go through because they missed non-optional fields. The error messages appear at the previous steps, leaving the user unaware t ...

javascriptreactjsformsreact-hook-formzod

UICollectionView organized into different sections

Hello everyone, I am trying to showcase 2 sections in a collectionView with horizontal scrolling. The first section should have 10 cells and the second section should have 9 cells. I thought I had it all set up correctly, but when I try to select cells i ...

iosswiftuicollectionviewuicollectionviewcellsections

What is the method for superimposing a div with a see-through input field?

I am currently designing a compact upload feature. It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport. Within this element, there is a form containing an input field and a ...

csshtml

Easily log in and create an account on a single webpage with the help of PHP and

I'm currently engrossed in a web project. The initial version of the project had separate login.php and register.php files. The login functionality called a .js file for ajax validation, and the same process occurred with the registration. In the re ...

javascriptphpajax

The opacity setting in THREE.ShaderMaterial is not functioning as intended

I've made the switch from MeshBasicMaterial to ShaderMaterial to implement filters on my mesh textures. While ShaderMaterial inherits from Material and includes an opacity parameter, changing this parameter doesn't seem to affect the object' ...

javascriptthree.jsshaderfragment-shader

Is there a method to exempt a particular input field from form validation?

Is there a way to prevent a form validation error message from displaying in other input fields when using an input url field within a rich text editor component (RTE) placed inside a form element? <input type="url" v-model="state.url ...

htmlformsvue.jsvalidation

Transfer data from a MySQL table into a PHP array and send it to an AJAX request

I am attempting to retrieve values from a standard table using the traditional mysql_query and mysql_fetch_array methods through an ajax call in php if ($comtype==3){ $getsteps = mysql_query("SELECT id FROM steps WHERE id = $id"); $row = ...

phpjquerymysqlarraysajax

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

htmlcssfooter

Seeking a quick conversion method for transforming x or x[] into x[] in a single line of code

Is there a concise TypeScript one-liner that can replace the arrayOrMemberToArray function below? function arrayOrMemberToArray<T>(input: T | T[]): T[] { if(Arrary.isArray(input)) return input return [input] } Trying to cram this logic into a te ...

javascriptarraystypescriptone-liner

Can you explain the contrast between borderBottomStartRadius and borderBottomLeftRadius in React Native?

Could someone please clarify the distinction between these two elements? Despite appearing to serve the same purpose, I am unsure of how they differ. I attempted to research online, but unfortunately came up empty-handed. ...

cssreact-nativemobile

The Node/Express Rest API appears to keep directing requests to the same controller function, despite the mappings being correctly

Currently, I am in the process of developing a node/express REST API. When making requests to the following endpoints: http://localhost:5000/api/news and http://localhost:5000/api/news/?id=c5f69d56be40e3b56e55d80 I noticed that both URLs trigger the same ...

javascriptnode.jsrestexpressmean-stack