Using jQuery to pass UI positions as percentages instead of screen positions

Currently, I have implemented the following code to send $_GET values to a PHP page:

$.get('/includes/sticky_notes/update_position.php',{
    x       : ui.position.left,
    y       : ui.position.top,
    z       : zIndex,
    id  : parseInt(ui.helper.find('span.data').html())
});

Is it possible to pass the position of the UI item as a percentage instead of using pixels on the screen?

The reason behind this query is that the UI items appear on the page with the last set positions and if the screen size is smaller for some users, the items may display off-screen.

jqueryhtmlcss

Answer №1

In CSS, positioning based on a percentage is not directly possible, but you can achieve the desired effect by calculating the percentage using the formula: $(window).width() * .30. This will result in 30% of the screen width being used horizontally.

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

JQuery is having trouble locating a variable in a different JavaScript file

Currently, I am utilizing the cakephp framework and have developed 2 distinct javascript files which I have stored in my webroot/js directory. The first javascript file includes modal dialog variables that define the settings for the dialog boxes. The seco ...

javascriptjqueryvariablesundefined

Using Angular 5 to integrate a jQuery plugin

Recently, I've started learning Angular and am currently using version 5. I need to integrate a plugin called 'jquery-circle-progress' into my project. The plugin can be found at this link: I managed to install the plugin using npm and adde ...

jqueryangularimportangular5angular-cli

The absence of button.onclick=func in the HTML code is notable

I am facing an issue where adding an onclick attribute to an input element via JavaScript does not display in the HTML, but the function gets executed. On the other hand, when I add the input element directly in the HTML code, the onclick attribute shows u ...

javascriptjqueryhtml

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

csshtmllayout

Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

I've been facing a roadblock in my coding project since yesterday afternoon. I'm trying to transform a classic unordered list menu into a tiled "gallery" within a 12 column grid, with fluid square tiles. When the squares are floated, the first s ...

resizecss-floatfluid-layoutcss

My website is being cut off

After creating this website with a viewport setup, I noticed that it is not fully visible on certain screens. When viewed on a CRT monitor at 800x600 desktop resolution or lower than 1280x800, such as on mobile devices, the content gets clipped. Is there a ...

csswrapperviewport

Implementing a progress bar in Rails 4 to delete a remote file using Fog and waiting for controller respond_to

I've been searching for solutions to implement a progress bar in my Rails 4 application. I have a scenario where users can delete images associated with a record, and the images div is updated via jQuery after deletion. However, since the deletion pro ...

jqueryruby-on-rails-4fog

Adding fresh information to a data entity

I'm currently in the process of updating a data object with a new value. Upon checking, if the data associated with event.data.id exists within $("#ArticlesHolder"), I proceed to update it as follows: if($("#ArticlesHolder").data(event.data.id) != n ...

javascriptjquery

Artistically connect the main navigation bar to the secondary one

I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this: When a user c ...

jqueryhtmlcss

Generating a new display div element using an anchor link

I've set up a div container with a button that, upon clicking, adds a class to an element in my markup causing it to expand and take over the entire screen. Markup before: <section class="isi" data-trigger="toggle" data-trigger-class="isi--show-i ...

javascriptjquerycss

Trigger a warning pop-up if a selection has not been made in a dropdown menu using jQuery

I am attempting to display an alert popup when the user fails to select a value from the dropdown menu. Below is my HTML code: <div id="reminder" class="popup-layout"> ... ... </form> </div> In my JavaScript function page, I have tried ...

javascriptjqueryzend-framework

Select an item by populating it with JQuery

Here is the select HTML code I am working with: <div class="form-group col-lg-6 row"> {{ Form::select( 'state',array( 0 => '' ),null, array( 'class' => 'form-control', 'data-placeholder' =&g ...

phpjqueryhtmllaravel

When deploying a website with the default Hugo theme on Netlify, I encountered a strange issue where the webpage appeared blank. Sur

After coming across a question similar to mine about creating a static page using blogdown with the same Hugo theme as the main site on Stack Overflow, I still find myself struggling to understand the solution provided. As an absolute beginner, I am curren ...

htmlrstudionetlifyhugoblogdown

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

Utilize a function to send an AJAX email

In my JavaScript function, I have been attempting to send an email from a contact form. The validation checks are working correctly, but when the code reaches the point of sending the form, it gets stuck and doesn't receive any response from $.ajax. I ...

javascriptajaxjquery

Tips on ensuring data cleanliness in jQuery input fields

Before sending the ajax request, I want to sanitize the form fields for added security. Currently, my Javascript code looks like this: jQuery(document).ready(function($) { $('#login-form').submit(function(e) { e.preventDefault(); // pr ...

javascriptjquerysanitization

PHP query will execute even in the absence of clicking the button

I'm encountering an unusual issue. I've defined a query to insert two names into the database, and I've used Javascript(Jquery) to ensure it only runs when the create button is clicked. However, the script seems to be executing every time I ...

javascriptphpjquerymysqldatabase

Finding the label that is linked to the current DIV or textarea by its "for" property

I am working on a project that involves two elements - a textarea and a div. Each element has a label attached to it using the "for" attribute in HTML. <textarea id="txta_1" class="txta" cols="40" rows="3" onkeyup ...

javascripthtmlfor-loopdom-events