Using jQuery variables as selectors for CSS key-value pairs

Is there a way to transform code like this:

$("div").css({
    "top": var1,
    "height": var2,
     etc.
});

Into something like this:

var dir = "top";
var length = "height";

$("div").css({
    dir: var1,
    length: var2,
     etc.
});

Currently, I can only make it work by declaring each line separately, for example:

$("div").css(dir, var1);
$("div").css(length, var2);
$("div").css(etc.);

Anyone have alternative suggestions? I'm trying to create a universal variable for direction so I can easily rotate my module 90 degrees (left to right or top to bottom).

Answer №1

{ "start": value1, "width": value2 }
creates a custom JavaScript Object with two defined properties. Unfortunately, JavaScript does not support using variables as property names when creating an Object in this manner.

An alternative approach would be:

var obj = {};
obj[position] = value1;
obj[size] = value2;
$("section").css(obj);

Answer №2

Check out this solution...

let styles = {};
styles[property] = value;
$("div").css(styles);

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

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

What is the best way to use jQuery ajax to send various row identifiers when updating table data on another PHP page by selecting checkboxes?

When I select both of the green checkboxes, only the most recent table id is sent. The code below includes both the checkbox markup and jQuery function. Checkbox: <div class='md-checkbox has-success'> <input type='checkbox&apo ...

Using JQuery, you can easily add a new row right after the row that you have

I need to insert a new row after the selected row, but my current code inserts the row at the end if no row is selected. Is there a way to fix this issue? strGridId = update_GridID(strGridId); var grid = jQuery('#' + strGridId); var columnModel ...

What is the best way to populate an array with JSON data using jQuery?

As a newcomer to jQuery, I decided to experiment with the getJSON function. My goal was to extract the "id" section from a JSON file and store it in an array called planes using jQuery. This array would then be utilized in an autocomplete function to popul ...

What is the process for switching from browser touch emulation mode to regular 'simple screen' display?

When booting from emulation mode in Chrome and then switching to normal mode, the console will display a 'touch' message. How can I display a simple screen instead? https://jsfiddle.net/dwfvb1hy/3/ function isTouchDevice() { if (isTouch) { ...

Navigate from the upper left corner to the lower right corner while hovering

Can you animate the movement of an element from the top-left to the bottom-right using CSS transitions like this? #example { width: 40px; height: 40px; background: red; position: absolute; top: 0; left: 0; transition: all 300ms ea ...

Looking to optimize iframing for various screen dimensions

Apologies for the basic question. I am looking for a way to make my iframe responsive on all screen sizes, adjusting both height and width accordingly. Could anyone provide guidance? The current iframe code I have is as follows: <iframe name="ROL_ ...

Problem with using .append and .prepend

Hey there! I've encountered a strange issue while using the .append and .prepend methods in JQuery. I'm quite familiar with these methods, but something odd is happening when I implement this code: $("#nashgraphics-menu ul li a.toplevel-a") .pr ...

What is the correct method to implement the jQuery document ready event?

When it comes to writing the document ready event in jQuery, there are several methods available. Which of the following syntax options would be considered the most correct way to write the document ready event, and why? 1) jQuery(document).ready(functi ...

Decoding JSON data from serialized form in Symfony2

When I submit my form using ajax, this is what I receive in the controller: $request->getContent() The result is: string 'comment[header]=vcvdfgdfg&comment[body]=dfgfdgdf&comment[_token]=nV0QYu82KWFb-wRIlIoY4MKM6-WUfeFoMidjBHfpupA' ...

Experiencing a 400 error while transitioning from ajax to $http?

I am facing an issue while trying to make a GET request using $http instead of ajax. The call functions perfectly with ajax, but when attempting the same with $http, I encounter a 400 (Bad Request) error. I have referenced the Angular documentation and bel ...

How can I ensure a checkbox remains checked even when the page is reloaded

A clock has been designed based on a unique fantasy timezone. An "alarm" function has also been set up to trigger an alert when a checkbox is checked. Efforts are being made to use local storage to ensure the checkbox remains checked even after the page i ...

Using JQuery Datepicker with an icon and custom format in ASP.NET

I am looking to incorporate jQuery into my Textbox. Specifically, I would like to use the Datepicker with the format yyyy-mm-dd and include an Icon as well. <script> $( "#txtVon" ).datepicker({ showOn: "button", buttonImage: "ima ...

Placing text inside a designated element on a different web page upon clicking a button

Imagine a scenario where a user is browsing a website and lands on the 'prices' page. They come across a product that catches their eye and decide to click on the associated button. This action redirects them to the 'contact us' page, w ...

Having trouble extracting the selected date from a datetimepicker to pass it via AJAX

The datetimepicker on my webpage is structured like this: <table class="table borderless" id="schedule_time"> <tbody> <tr> <td align="center"> <div id="timepicker" class="form-group" style="width:30%"> ...

changing the default property value within an object

I'm looking to send an ajax request to a PHP file that will retrieve a user's information in JSON format. I then want to take this data and assign it to a property within an object. For example: User = { prop1: '' } I simply need to ...

What is the best way to include a padding at the top of the second row?

I have two rows with three columns each. I am trying to create some spacing between the two rows. I attempted to achieve this by wrapping the rows and adding padding to the last child (which should be the second row). However, this approach did not work a ...

What steps can I take to set up AJAX-based long-polling in Microsoft Edge?

I have been working on setting up a basic long-polling skeleton that functions across different browsers. While my solution works perfectly in Chrome, I am facing difficulties getting it to work in Edge. Upon loading the page in Edge, there are no visible ...

Navigating multi-level drop-down menus on touch devices can be tricky, but there are ways to effectively

I recently created a website using HTML and CSS with a three-level navigation menu that worked perfectly on desktop. However, the issue arises when users access the site from touch devices like smartphones or tablets because the sub-menu does not appear wh ...

Opting for Bootstrap modal over Colorbox for a better user experience

Here is a script that uses JavaScript to trigger Colorbox and open specific PHP pages with parameters on the server: $(document).ready(function() { $('#example tbody').on( 'click', 'input', function () { var d ...