Updating CSS property names with jQuery: A step-by-step guide

My issue involves a div with inline style "left: Random Number". I have attempted to use various CSS change functions, but none have been successful. The problem lies in the fact that the property of left is random, and I am trying to change it to right.

<div class="portfolio" style="left:0">Content</div>
<div class="portfolio" style="left:230">Content</div>
<div class="portfolio" style="left:446">Content</div>
<div class="portfolio" style="left:841">Content</div>

I want jQuery to change all instances of left to right without changing the property itself.

I have tried the following solutions, but they did not work:

$(".portfolio").css({"left": "", "right": ""});

I also attempted this:

$(".portfolio").css({"left", "right"});

Does anyone have a solution for this issue?

jqueryhtmlcss

Answer №1

If you are looking to switch the values from left:0 to right:0 and left:230 to right:230 (remember they need units such as px), you will need to retrieve the original value, set the new value, and then clear the original. This process needs to be done for each individual element since the initial left values vary:

$(".portfolio").each(function() {
    var $this = $(this);
    var left = $this.css("left");
    $this.css({left: "", right: left});
});

Illustrated Example (I have specified units in the left values [px]):

setTimeout(function() {
    $(".portfolio").each(function() {
        var $this = $(this);
        var left = $this.css("left");
        $this.css({left: "", right: left});
    });
    $("#header").text("After:");
}, 500);
.portfolio {
  position: absolute;
}
<div id="header">Before:</div>
<div class="portfolio" style="left:0px">Content</div>
<div class="portfolio" style="left:230px">Content</div>
<div class="portfolio" style="left:446px">Content</div>
<div class="portfolio" style="left:841px">Content</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Exclusive Pages in NextJS for Development Purposes

I want to set up a /storybook page specifically for development purposes. However, I do not want this page to be accessible in production mode. How can we make that happen? ...

htmlnext.jshidden

using jquery to select multiple checkboxes with not() and contains()

I have a situation where I need to read multiple checkboxes and combine their values into a comma-separated string. Using this string, I aim to hide certain elements in a table that do not contain the specified values from the checkboxes. Each checkbox cor ...

jquerycontains

Refreshing a node in Jqgrid Treegrid by updating the local source data

I have constructed a Treegrid using local data $("#historyGrid").jqGrid({ datatype: "jsonstring", datastr : treeGridObject , colNames:["Id","Channel","Current","History","Delta"], colModel:[ {name:'id', index:'Id&apo ...

javascriptjquerynode.jsjqgrid

Using Angular/Typescript to interact with HTML5 Input type Date on Firefox (FF)

Are there any Angular/Typescript projects that are completely built without relying on third-party libraries? I am encountering problems with Firefox and IE11. It works fine on Chrome where the value can be read, but the calendar does not display when us ...

htmlangulartypescript

Exploring an object of arrays with jQuery

I have a straightforward object with some basic arrays. My goal is to iterate through each item in the object and check a specific part of the array. For instance, if it contains '0' or '1', I need to perform an action. var formvalidat ...

javascriptjquery

How do I make the dropdown menu in a navbar stretch horizontally to cover the entire width of the page container?

When I hover over an item in the navbar, a horizontal dropdown menu currently opens as shown below (note the width of the dropdown menu): https://i.sstatic.net/824OVkWT.png What am I aiming for? I want to expand the horizontal dropdown menu like in the i ...

javascripthtmlcssfrontendbootstrap-5

Tips for integrating JavaScript code into React JS applications

I am attempting to create a scrollable table that scrolls both horizontally and vertically, using the example provided by . In my project directory under src/components/ScrollExample.js, I have copied and pasted the HTML code. In addition, in src/styles/c ...

javascriptcssreactjsscroll

The list of suggestions is not populating when triggered by the 'change' event

Using the typeahead jquery plugin in Rails 4.2.4 for autocompletion of lists has a specific issue: The typeahead list only loads with custom parameters the first time; it doesn't reload the second time. Here's an example code snippet from the vi ...

jqueryruby-on-railstypeahead.js

Add a plethora of images to the canvas

Just starting out with Fabric.js and trying to figure out how to draw a picture on the canvas after a drop event. I managed to do it once, but am struggling with inserting more pictures onto the canvas (each new drop event replaces the previous picture). ...

javascripthtmlcanvasfabricjs

What's the best way to shrink the size of a hyperlink without affecting the height of the text alignment?

I am currently designing a straightforward menu layout similar to this <div className="main-menu"> <ul> <li className="main-menu__app-menu"><a href="#">link 1</a></li> ...

htmlcsssass

Words program with the header feature incorporated

Hello, I am currently working with Laravel to build an HTML page and have successfully converted it to MS Word. However, I am now trying to add a header inside. Can anyone help me achieve this? Here is a snippet of my code: <body> <a class= ...

javascriptphpjqueryms-word

Is it possible to consolidate all CSS and JS links into a single PHP file for easier management?

Having spent years working with spaghetti code in my PHP projects, I've decided to make the switch to Code Igniter to gain experience with an MVC Framework (even though I know it's not as popular now, Laravel/Composer blew my mind). I have an ol ...

javascriptphpjquerycsscodeigniter

Create a customized navigation bar using Bootstrap 5 with double rows

I am trying to create a fixed navbar at the top with two rows instead of just one. The code I currently have is as follows: <nav class="navbar navbar-expand-md navbar-dark fixed-top red-900 bg-light"> <div class="container-fluid ...

htmlcsstwitter-bootstrap

Create a tree view structure from JSON data using a combination of jQuery and ASP.NET

I am working with asp.net and ajax to create Json data. While attempting to build a tree using the code provided, I encountered issues. On the other hand, Code 2 section works fine when it's static. Please note that I am using the treant.js library. ...

jqueryasp.netjsonajax

Using React to incorporate the necessary jquery for a separate library

I am looking to incorporate Trumbowyg library into my React project, however, I have encountered an error stating that jQuery is not defined. I found information suggesting that jQuery needs to be made available as a global variable in the window object. ...

javascriptjqueryreactjstrumbowyg

Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...

htmlcss

Retrieve the past week's data based on names using JavaScript

Is there a way to dynamically fetch the past seven day names, starting from today, in JavaScript? I am looking to format the result as follows: (Wednesday, Tuesday, Monday, Sunday, Saturday, Friday, Thursday, Wednesday). ...

javascriptjquerydatenamesdays

What is the process for constructing a regular expression (regex) in JavaScript to validate an id?

My validation requirements are relatively straightforward, but as someone who is new to regex, I am in need of quick assistance. The format should be either 1234567890 or 123456-7890, allowing for any number ranging from 0 to 9 and a total character length ...

javascriptjqueryregexvalidation

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

javascriptjquerycssextjsextjs4

Tips on how to specify the file media type of an uploaded file when utilizing Uploadify and JQuery in ASP.NET MVC 3

I am working on a project where I need to save files to a SQL Server 2008 database using Uploadify in an ASP.NET MVC 3 web application. One of the requirements is to retrieve the internet media type (e.g. application/msword, application/pdf) or at least th ...

jqueryasp.net-mvc-3uploadify