CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user11103713
user11103713

Reputation:

jquery - Control CSS properties of elements according to CSS properties of other elements

How do I change CSS properties of elements according to CSS properties of other elements? For instance; I want to change the default position of "bigbutton" if the color of "div1" is black. This is what I've tried:

HTML

 <div> <div class="div1"> </div>  <div class="div2"></div> <div class="div3"></div> <button type="button" class="bigbutton">bigbutton </button> </div>

CSS

.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; } .div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; } .div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal; .bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }

JQUERY

$(document).ready(function(){ $('.div1').mouseenter(function(){ $(this).css('background','black'); }); $('.div1').mouseleave(function(){ $(this).css('background',''); }); $('.div2').mouseenter(function(){ $('.div1').css('background','yellow'); }); $('.div2').mouseleave(function(){ $('.div1').css('background',''); }); $('.div3').mouseenter(function(){ $('.div1').css('background','black'); }); $('.div3').mouseleave(function(){ $('.div1').css('background',''); }); if($('.div').css('background') == 'black'){ $('.bigbutton').css('left','200px'); } else{ $('.bigbutton').css('left','100px'); } });

Is it possible to do it without if-else? PS:I apologise for the formating problem, as it's nearly impossible to properly format with my phone.Thank you.

Upvotes: 0

Views: 88

Answers (3)

Morteza Fathnia
Morteza Fathnia

Reputation: 435

you can try it, html code:

  <div id="container">
   <div class="div1"> </div>
   <div class="div2"></div>
   <div class="div3"></div> 
   <button type="button" class="bigbutton">bigbutton </button>
  </div>

css code:

.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; }
.div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; }
.div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal;} 
.bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }

javascript code:

container.onmouseover = container.onmouseout = handler;
function handler(event){
  if (event.type == 'mouseover') {
    if(event.target.className=='div1'){
       event.target.style.background = 'black';
       moveLeft();
    }
    if(event.target.className=='div2'){
      document.getElementsByClassName('div1')[0].style.background = 'yellow';
    }
    if(event.target.className=='div3'){
      document.getElementsByClassName('div1')[0].style.background = 'black';
       moveLeft();
    }
  }
  if (event.type == 'mouseout') {
    if(event.target.className=='div1'){
       event.target.style.background = '';
    }
    if(event.target.className=='div2'){
      document.getElementsByClassName('div1')[0].style.background = '';
    }
    if(event.target.className=='div3'){
      document.getElementsByClassName('div1')[0].style.background = '';
    }
    moveRight();
  }
}

function moveLeft(){
    $('.bigbutton').css('left','200px');
}
function moveRight(){
   $('.bigbutton').css('left','100px');
}

Upvotes: 0

Peter Wilson
Peter Wilson

Reputation: 4319

first of all you need to get the color of the bigbutton

var color = $('.bigbutton').css('color');

then do your check

if(color == "red"){ //example
 $('.div1').css('top':'10px') // finally do your changes [for example]
}

Upvotes: 0

Florea Ionut Micu
Florea Ionut Micu

Reputation: 106

When you say "change x according to y", you're basically describing an if conditional. Given your example, you can also get the desired result by changing the button's position in the same code block where the div1 becomes black: https://codepen.io/pen/RvXQMP

Update

To get the desired result for any input that would change the color of div1, you can use Mutation observer, works like an eventListener for DOM changes: https://codepen.io/pen/PVMVzw

Upvotes: 1

Related Questions