How do I change a CSS class attribute when another div class has a certain value in another attribut-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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>