How do I change a CSS class attribute when another div class has a certain value in another attribute?

Question

I'm kinda new to this but I'm trying to get this to work.

<script>
if $('.twentytwenty-handle').css({ 'left': '400px' })
{
    $('.hero').css({ 'display': 'none' });
}
</script>

What I actually want to achieve is when <div class=twentytwenty-handle style=left: 400px;> and it is equal or greater than 400px, for .hero to dissapear and let's say give .hero2 a display: block; attribute to make .hero2 appear.

EDIT:

The .twentytwenty-handle is not a div in my .html file, but a div in the jquery.twentytwenty.js file of the ZURB twentytwenty plug-in github. What I essentially want is that when the .twentytwenty-handle is moved all the way ( or almost all the way if possible ) to the right it makes my .hero div change into .hero2. And also I want it to change into .hero3 when moved all the way to the left.

ulittle · Accepted Answer · 2021-10-08 01:36:31Z

Here's a mechanism using javaScript to get see what is happening within and element CSS properties. Based on CSSStyleDeclaration.

function testPosition(){  
  var element = document.querySelector('.twentytwenty-handle');
  var cssProps = getComputedStyle(element);
  // console.log(cssProps);
  var trackItem1  = parseInt(cssProps.left);
  console.log("trackItem1:" + trackItem1);
   if (trackItem1 >= 400) {
      //alert("You went over 400");
      //$(".hero").last().addClass( "hilite" );
      //$(".hero").hide();
      $(".hero").fadeOut(500);
   } else{
    $(".hero").fadeIn(500);
  };
    $("#infoBox").html(
  "CSSStyleDeclaratio: " + '<br>' +   
  cssProps.left + '<br>' +
  cssProps.top + '<br>' +
  cssProps.color + '<br>' +
  cssProps.width + '<br>' +
  cssProps.height
  );

}

body {
  margin: 1rem;
  font-size: .9rem;
}

.twentytwenty-handle {
  position: relative;
  display:block;
  left: 0px;
  top: 20px;
  width: 300px;
  height: 80px;
  background: #333;
  color: yellow;
}

.hero {
  position: relative;
  display:block;
  left: 0px;
  top: 30px;
  width: 300px;
  height: 80px;
  background: #333;
  color: yellow;
}
.twentytwenty-handle > p, .hero > p {
    padding: 25px 20px;
}

.hilite {
  font-color: red;
  font-size: 3rem;
}

#infoBox {
  margin-top: 30px;
  padding: 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button onclick="testPosition()" type="button" class="btn btn-primary btn-sm">Check CSS properties</button> <span>Change 'left' value for .twentytwenty-handle and then click on button. </span>
<div class="twentytwenty-handle">
  <p>This is twentytwenty-handle</p>
</div>

<div class="hero">
  <p>This is hero</p>
</div>
<div id="infoBox">
</div>

Jeromy French · Accepted Answer · 2021-10-07 23:47:21Z

0

I think you want this:

if ( $('.twentytwenty-handle').css('left').replace(/[^-\d\.]/g, '') >= 400 )
{
    $('.hero').css('display', 'none');
    $('.hero2').show();
}

I created a jsFiddle of working example.

Hat tip to zakovyrya for https://stackoverflow.com/a/1100653/1430996

edited Oct 7, 2021 at 23:47

answered Oct 7, 2021 at 23:32

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

2 Comments

Overflow_hidden Over a year ago

It doesn't seem to work for me still

Overflow_hidden Over a year ago

I should have clarified that in CSS .twentytwenty-handle has a value of 50%. But if I move the handle in my browser all the way to the right its value is 400px.

Collectives™ on Stack Overflow

How do I change a CSS class attribute when another div class has a certain value in another attribute?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related