tibewww tibewww - 5 months ago 21
CSS Question

If specific element is display, change css of another element

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

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