3

I have div which transform property is getting changed by 3rd party Js application, what I want is to fix the transform property at some instance according to current transform property it have.

For that I need to add class with property transform: current_transform!important here with !important if any change in element style by 3rd party app will not be effective.

here I created a example snippet for better explanation 

//let this is third party app which is changing the paragraph width and html which code can't be manipulated
function changeHeight(e) {
  var x = e.clientX;
  var y = e.clientY;
  $('p').html(y);
  $('p').css('width',x+"px");
}

// Here we need to write Js code so that any change in paragraph css will not be effective, if zoom is yes

$('[name="zoom"]').on('change',function(){
  if($(this).val()=='y'){
    // Here need to change to the .zoomed propery as widht: current_width!improtant so that paragraph width get fixed to lastly it have.
    
    $('p').addClass('zoomed');
  }
  else{
    $('p').removeClass('zoomed');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .zoomed{
    width: 50px!important;
  }
 </style>
<label>zoom yes</label>
<input type="radio" name="zoom" value="y" />
<label>zoom no</label>
<input type="radio" name="zoom" value="n" checked/>

<div style="height:70px;border:1px solid #000000;" onmousemove="changeHeight(event)">
</div>
<p style="background-color:red;"></p>

This is only for example only, real scenario is different(about transform property and zoom) but the key is to change the class property dynamically so that change in style by third party is not effective.

Pankaj Sharma
  • 2,185
  • 2
  • 24
  • 50
  • Does this help: https://stackoverflow.com/questions/2655925/how-to-apply-important-using-css – Kalimah Nov 27 '19 at 21:45
  • it will change in element style, which will again changed by 3rd party app, how can it help. – Pankaj Sharma Nov 28 '19 at 05:47
  • It sounds like you are wanting to re-define a css class? If that's the case, there's nothing stopping you from writing js logic that inserts and manipulates a – Taplar Nov 29 '19 at 20:42
  • inserting a class with – Pankaj Sharma Nov 29 '19 at 20:50
  • It will only insert again and again if you write it that way. You could either change the existing one, or replace it entirely. ` – Taplar Nov 29 '19 at 21:05
  • https://jsfiddle.net/y6cj9eou/ Dummy little example showing the concept. – Taplar Nov 29 '19 at 21:13
  • @Taplar thanks a lot, you saved me. – Pankaj Sharma Nov 29 '19 at 21:32
  • I'm not sure fully I understand the question. **C**ascading **S**tyle **S**heets are, well, cascading. If you want to override style rules from a class, apply the style rules directly to the element. [CSS Specificity](https://www.w3schools.com/css/css_specificity.asp) – PoorlyWrittenCode Dec 06 '19 at 00:09
  • @PoorlyWrittenCode element style is getting changed by 3rd party js application, that's why I need to change the of CSS class property – Pankaj Sharma Dec 06 '19 at 21:14

3 Answers3

1

You can use CSS custom properties.

The idea is that the custom property --last-p-width is set to the element's width property value when you add the class zoom. Making it stay with the same value.

This post goes more into detail: https://css-tricks.com/updating-a-css-variable-with-javascript/

CSS

::root {
  --last-p-width: 50px;
}

.zoomed{
  width: var(--last-p-width) !important;
}

JS

$('[name="zoom"]').on('change',function() {
  if ($(this).val() === 'y') {
    $(":root").css("--last-p-width", $('p').css('width'));    // <-- HERE
    $('p').addClass('zoomed');
  }
  else {
    $('p').removeClass('zoomed');
  }
});


function changeHeight(e) {
  var x = e.clientX;
  var y = e.clientY;
  $('p').html(y);
  $('p').css('width',x+"px");
}

$('[name="zoom"]').on('change',function() {
  if ($(this).val() === 'y') {
    $(":root").css("--last-p-width", $('p').css('width'));    // <-- HERE
    $('p').addClass('zoomed');
  }
  else {
    $('p').removeClass('zoomed');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  ::root {
    --last-p-width: 50px;
  }
  
  .zoomed{
    width: var(--last-p-width) !important;
  }
 </style>
<label>zoom yes</label>
<input type="radio" name="zoom" value="y" />
<label>zoom no</label>
<input type="radio" name="zoom" value="n" checked/>

<div style="height:70px;border:1px solid #000000;" onmousemove="changeHeight(event)">
</div>
<p style="background-color:red;"></p>
Maurici Abad
  • 1,012
  • 9
  • 20
-1
$("body").mousemove(function(e) {
        window.mx = e.pageX;
        window.my = e.pageY;
        if (window.dragging) {
            // Calculate drag distance difference
            let diffX =
    window.drag_width =
parseInt((window.item_width + (window.mx - window.drag_x) * 1.75));
            let diffY =
   window.drag_height =
parseInt((window.item_height + (window.my - window.drag_y) * 1.75));
            // Absolute values ensure the item dimensions
            // never become negative
            $(window.dragging_target).css("width",
                Math.abs(diffX) + 'px');
            $(window.dragging_target).css("height",
                Math.abs(diffY) + 'px');
            $(window.dragging_target).css("lineHeight",
                Math.abs(diffY) + 'px');
            // Change cursor to either left-right or up-down arrow,
            // based on which direction the drag is the greatest
            if (diffX > diffY) {
                /* Optional, maybe a future feature... */
            }
        }
    })
});
Sarah Sundar
  • 38
  • 2
-1

//let this is third party app which is changing the paragraph width and html which code can't be manipulated
function changeHeight(e) {
  var x = e.clientX;
  var y = e.clientY;
  $('p').html(y);
  $('p').css('width',x+"px");
}

// Here we need to write Js code so that any change in paragraph css will not be effective, if zoom is yes

      let styleOverride = document.querySelector('#styleOverride');
  
  if (!styleOverride) {
   styleOverride = document.createElement('style');
    styleOverride.id = 'styleOverride';
    document.body.appendChild(styleOverride);
  }
     styleOverride.innerHTML = '';
$('[name="zoom"]').on('change',function(){
  if($(this).val()=='y'){
    // Here need to change to the .zoomed propery as widht: current_width!improtant so that paragraph width get fixed to lastly it have.
    let wid= $('p').css('width')+"!important";
    styleOverride.innerHTML = `
 .zoomed{
     width: ${wid};
    }
  `;
    $('p').addClass('zoomed');
  }
  else{
    $('p').removeClass('zoomed');
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .zoomed{
    width: 50px!important;
  }
 </style>
<label>zoom yes</label>
<input type="radio" name="zoom" value="y" />
<label>zoom no</label>
<input type="radio" name="zoom" value="n" checked/>

<div style="height:70px;border:1px solid #000000;" onmousemove="changeHeight(event)">
</div>
<p style="background-color:red;"></p>
Pankaj Sharma
  • 2,185
  • 2
  • 24
  • 50