Eliminate inline CSS using jQuery

Generated by the jssor-slider, this inline CSS includes

position: absolute; 
top: 0px; 
left: 0px; 
width: 1500px;
height: 700px; 
transform-origin: 0px 0px 0px; 
transform: scale(0.876644);

I aim to replace it with,

position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 700px;

My attempt is as follows,

$('#slider_container').width('100%');
$('#slider_container > div').css({'position': 'absolute', 'top': '0px', 'left':' 0px', 'width':' 10%', 'height':' 700px'});

Although successful, the following part remains unchanged.

transform-origin: 0px 0px 0px; 
transform: scale(0.876644);

Is there a way to remove this using jQuery?

jquerycss

Answer №1

To reset the transform property to its default value, simply set it back to scale(1), and for transform-origin use 50% 50% 0.

Using jQuery:

$('#slider_container > div').css({'transform': 'scale(1)', 'transform-origin': '50% 50% 0'});

JSFiddle (Before)

JSFiddle (After)

*Important Note: This solution is suitable if the styles are specified in a stylesheet. However, if the styles are inline (as clarified by the OP), then Rudi Urbanek's approach would be more appropriate.

$('#slider_container > div').removeAttr("style");

Answer №2

One simple fix is to delete the inline style attribute prior to applying the new style.

$('#slider_container > div').removeAttr("style");
$('#slider_container > div').css({'position': 'absolute', 'top': '0px', 'left':' 0px', 'width':' 10%', 'height':' 700px'});

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 Hide-and-Seek: A Fun Way to Manip

I am facing a challenge with a set of divs that I need to dynamically show and hide based on user interactions with questions. Essentially, the user will be presented with a question. Based on their answer, specific content with a title and description wi ...

javascriptjqueryhtmlcss

`The problem of time management within ASP.NET`

Currently working on an asp.net project where I have implemented a countdown timer using jQuery. The timer functions effectively, however, the issue arises when navigating to another page within the project and returning to the countdown page. Ideally, t ...

.netasp.netjquery

The jQuery .html() function is only functional in Internet Explorer when the Developer Tools are visible on the screen

On a particular page, users have the ability to add, edit, and delete items. This functionality is made possible through a series of Ajax calls that communicate with server-side code to update data on the backend. Once the data is successfully updated, the ...

jqueryajaxinternet-explorer

JavaScript - Unexpected fluctuations in variable values

After studying Japanese language, I decided to try my hand at experimenting with JavaScript by creating a simple FlashCard game for a project. The game generates an array of random numbers, fills the divs with 6 possible choices using jQuery, randomly sele ...

javascriptjqueryfunctionvariables

Concealment vs Deletion of DOM components

Conceal or Erase When dealing with changing DOM elements, is it better to hide them or delete them? Consider that the environment may change frequently and that elements can have various event callbacks. Hide: What is the best approach when hiding eleme ...

javascriptjquerycssoptimization

Tips for implementing a function within a toggle button

I am looking to enhance the functionality of a toggle button when it is changed. Currently, there is no action associated with the toggle change event. I want to create a method that will be executed when the toggle is switched on or off. Additionally, I n ...

javascriptjqueryhtmlcss

What is the best way to send a JQuery variable using JSON.stringify and retrieve it on the server-side?

I need to pass the value in JSON.stringify and receive it on the Server side. Please note: When I attempt to pass the value directly without utilizing a JQuery variable, everything works smoothly. Without using a JQuery variable (it's functional) d ...

javascriptc#jqueryjsonajax

What is the best way to choose all sibling children at once?

I'm looking to dynamically add the 'abc' class to other div elements when hovering on a specific div. .abc{ color:Red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> & ...

jqueryjquery-traversing

Is it possible to target inputs by class using jQuery.serializeArray() method?

I am experimenting with posting various columns of a table using jQuery's ajax feature... So far, I have had success with this code: var fields = $(":input").serializeArray(); However, when attempting to reduce the set, it does not work as expected: ...

serializationjqueryjquery-selectors

Error message: "Error creating tags using the Tag-It jQuery plugin"

I recently started using the tag-it jquery plugin available at https://github.com/aehlke/tag-it var ip_elem = $('#my-tags'); ip_elem.tagit({ removeConfirmation: false, caseSensitive: false, allowDuplicates: false, allowSpaces: t ...

javascriptjqueryjquery-pluginstag-it

Issues with displaying images in CSS when using HTML 5 canvas drawing

In attempting to draw an image on a canvas using a pre-loaded image and CSS, such as: img.style.backgroundColor="red"; ctx.drawImage(img,0,0,100,100); I have observed that the image is drawn without incorporating the CSS modifications. Are HTML canvases ...

javascriptcsshtmlcanvastransparency

I am puzzled by the presence of the 'x' value in the JSON object when creating a column chart using CanvasJS. Its origin remains unknown to me

I'm exploring the use of canvasjs and I have a test code snippet that I'm working with: 9 $con = pg_connect("host=localhost port=5432 dbname=testdb user=postgres") or die ("Could not connect to server\n"); 10 $query ="SELECT id as label, ...

javascriptphpjqueryjsoncanvasjs

Steps to fix issues with Cross-Origin Read Blocking (CORB) preventing cross-origin responses and Cross Origin errors

var bodyFormData = new FormData(); bodyFormData.set("data", "C://Users//harshit.tDownloads\\weather.csv"); bodyFormData.set("type", "text-intent"); //axios.post("https://api.einstein.ai/v2/language/datasets/upload", axio ...

javascriptjquerynode.jsreactjsaxios

Issue with deploying responsive background image on Github platform

My responsive background image isn't displaying properly on mobile devices after I deployed my project to Github. Although it appears correctly under the Google Chrome inspect mobile tool, when accessed live on a mobile device, the image covers the ba ...

cssgithubresponsive-designbackground-imagematerialize

Grid-Image Bootstrapping

I am looking to design a responsive image grid similar to the one shown in the image below: https://i.sstatic.net/x4G88.png How can I utilize bootstrap columns and rows to accomplish this task? <div class="row"> <div class="col-md-3 sm-12" <i ...

htmlcssbootstrap-4

I'm encountering layout issues with my table when using the repeater in Bootstrap

I am experiencing an issue with nested repeaters inside a repeater while trying to incorporate Bootstrap for layout purposes. The layout appears distorted when placed within a div with the class "row". Even when isolated, the layout remains problematic. Re ...

htmlcssbootstrap-4asprepeaternested-repeater

Flashing event triggers a modification in input value

I have a flash object that updates the value of a textarea element. I am looking for a jQuery event that will be triggered when the value of the textarea is changed by the flash object. My goal is to have a specific checkbox automatically change to a &apo ...

javascriptjqueryflash

PHP/Mysql web hosting on nodejs servers

I recently delved into the world of NodeJS and PHP hosting Currently, I have a website that combines PHP/MySQL with Node.js. I find that common functionalities like login, register, and managing users can be efficiently handled in PHP, saving me time, whi ...

phpjquerynode.jsexpresssocket.io

Why won't my navbar shift to the right when using mr-auto?

I attempted to use mr-auto to shift the navbar to the right, but it doesn't seem to be working as expected. I'm a bit confused as to why. Can someone provide some insight? Below is the relevant code snippet: <nav class="navbar navbar-expa ...

htmlcssbootstrap-4

Generate a Bootstrap 2 popover when hovering over an element

Is there a place where I can find a straightforward example of a popover for the Bootstrap 2 version? Appreciate any help or guidance. Thank you! ...

jquerytwitter-bootstrappopover