If specific element is display, change css of another element

Question

I have a slider image running with bootstrap. I would like, depending of the slide being display, to change the CSS of another div.

For example, if Slide (item in the class) is display, my other div get a margin-left of 50px, if Slide 2 is displayed (active), the other dive get a margin-left of 100px

I tried the following jQuery without success:

if (!$('.item.one').is(':visible')) {
    $(".result").css("margin-left", "50px");
};

If anybody has any advice it would be fantastic! Thanks in advance.

-- EDIT --

Here my Html:

<div class="carousel-inner" role="listbox">
    <div class="item one active">
        <img style="width:500px" src="assets/images/pattern/04.jpg">
    </div>
    <div class="item two">
        <img style="width:500px" src="assets/images/pattern/02.png">
    </div>
     <div class="item three">
         <img style="width:500px" src="assets/images/pattern/03.jpg">
    </div>
    <div class="item four">
        <img style="width:500px" src="assets/images/pattern/01.jpg">
    </div>
</div>
<div id="result" class="result">
    <img src="assets/images/silouhette.png" alt="Silhouette placeholder">
</div>

I have change by the following Jquery from Poonan:

if (!$('.item.one').is(':visible')) {
    $(".result").css("margin-left", "50px");
};
if (!$('.item.two').is(':visible')) {
    $(".result").css("margin-left", "150px");
};
if (!$('.item.three').is(':visible')) {
    $(".result").css("margin-left", "250px");
};
if (!$('.item.four').is(':visible')) {
    $(".result").css("margin-left", "350px");
};

This apply fine - but If I change to item one - it keep the css from item four of the Jquery . . .. anyway that it changes when I change the slide do you think ???

-- Bootsrap slider settings --

http://getbootstrap.com/javascript/#carousel

$('.carousel').carousel({
    pause: true,
    interval: false
});

Answer 1

Try this instead (event when it has slided):

$('.carousel').on('slid.bs.carousel', function() {
  if ($('.item.one.active').length > 0) {
    $(".result").css("margin-left", "50px");
  };
  if ($('.item.two.active').length > 0) {
    $(".result").css("margin-left", "150px");
  };
  if ($('.item.three.active').length > 0) {
    $(".result").css("margin-left", "250px");
  };
  if ($('.item.four.active').length > 0) {
    $(".result").css("margin-left", "350px");
  };
});

See this working fiddle

Answer 2

Check this demo out, hopefully it's what you search for, it would be better if you'd create a basic yet working fiddle. Anyway, you can use .hasClass("active") to check if a specific item is active and change the margin accordingly.

 fixMargin(); function activate(){ $('.item').removeClass('active'); var item = $('#selector').val()-1; $('.item:eq("'+item+'")').addClass("active"); fixMargin(); } function fixMargin(){ if ($('.item.one').hasClass("active")) { $(".result").css("margin-left", "50px"); }; if ($('.item.two').hasClass("active")) { $(".result").css("margin-left", "150px"); }; if ($('.item.three').hasClass("active")) { $(".result").css("margin-left", "250px"); }; if ($('.item.four').hasClass("active")) { $(".result").css("margin-left", "350px"); }; } 

 #selector{ width:20px; } .one { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Make item<input id="selector" type="text" value='2'/>(type number 1-4) active <button onClick="activate()">now</button></br/> <div class="carousel-inner" role="listbox"> <div class="item one active"> <img style="width:500px" src="assets/images/pattern/04.jpg"> </div> <div class="item two"> <img style="width:500px" src="assets/images/pattern/02.png"> </div> <div class="item three"> <img style="width:500px" src="assets/images/pattern/03.jpg"> </div> <div class="item four"> <img style="width:500px" src="assets/images/pattern/01.jpg"> </div> </div> <div id="result" class="result"> <img src="assets/images/silouhette.png" alt="Silhouette placeholder" </div> 

Answer 3

Instead of using

if (!$('.item.one').is(':visible'))

use

setTimeout(function() {
    if ($('.item.one').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.two').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.three').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
    if ($('.item.four').hasClass('active')){
        $(".result").css("margin-left", "50px");
    }
}, 5000); // 5000 is the default interval