Different Menu color on Fullscreenslider adding id/class to row

[paola-ming]

Hi Armin and friends,

On the fullscreenslider horizontally I have many slides with black background, at the moment I'm targeting each of these slides with the below CSS. But every time I add a new slide the fp-viewing number changes and the code won't work anymore.

body.fp-viewing-0-39, body.fp-viewing-0-25 {
background-color: rgb(8, 9, 11);
-webkit-transition: background 700ms ease;
-moz-transition: background 700ms ease;
-ms-transition: background 700ms ease;
-o-transition: background 700ms ease;
transition: background 700ms ease;
}

body.fp-viewing-0-39 .laynav a, body.fp-viewing-0-25 .laynav a {
color: #fff !important;
transition: color 600ms ease;
-webkit-transition: color 600ms ease;
}

body.fp-viewing-0-39 ._Caption, body.fp-viewing-0-25 ._Caption {
color: #fff;
transition: color 600ms ease;
-webkit-transition: color 600ms ease;
}

Is possible to add a id/class to the specific row to change menu and caption color, anyone achieved this with javascript?
Thanks in advance.

[arminunruh]

yes just right an empty part of the row and click "set html class and id" and add the class "black"

then:
for when u use vertical fullscreen slider:

jQuery(window).on('fpAfterLoad', function (event, obj) {
var $row = jQuery('.row-' + (obj.index - 1));
if($row.hasClass("black")){
// do something
}
});

for when u use horizontal:

jQuery(window).on('fpAfterSlideLoad', function (e, obj) {
var $row = jQuery('.row-' + (obj.slideIndex - 1));
if($row.hasClass("black")){
// do something
}
});

maybe its obj.slideIndex instead of obj.slideIndex - 1
maybe if you use a custom phone grid layout too, then you may need to change your code to target only the rows in the desktop grid

[paola-ming]

This post is deleted!

[paola-ming]

This post is deleted!

[paola-ming]

@arminunruh

I used your code and have made some progress. Now if I add the class "black" to any row, the previous row(slide) is also targeted, and transition only happens once. I tried both "obj.slideIndex" and "obj.slideIndex - 1".
Can you please help me?

<script>
jQuery(window).on('fpAfterSlideLoad', function (e, obj) {
  var $row = jQuery('.row-' + (obj.slideIndex));
  var $fontcolor = jQuery('._Caption, nav.primary a span');
  if ($row.hasClass("black")) {
    $row.css({
        'background-color': '#08090b',
        'transition': 'background-color 0.7s ease-in-out'});  
    $fontcolor.css({
        'color': '#fff',
        'transition': 'color 0.4s ease'
    });
  } else {
    $fontcolor.css({
      'color': '', // Reset font color
    });
  }
});
</script>

Thanks,
Paola

[arminunruh]

do you have a link?

[paola-ming]

@arminunruh I'm using Local to build the website offline =(

Also if I add the class "black" to consecutive rows, there's a transition to white in between... what's making this happen? Thanks!

<script>
jQuery(window).on('fpAfterSlideLoad', function (e, obj) {
  var $row = jQuery('.row-' + (obj.slideIndex));
  var $navcolor = jQuery('._Caption, nav.primary a span');
  if ($row.hasClass("black")) {
    $row.css({
        'background-color': '#08090b',
        'transition': 'background-color 700ms ease-in-out',
        '-webkit-transition': 'background 700ms ease-in-out',
        '-moz-transition': 'background 700ms ease-in-out',
        '-ms-transition': 'background 700ms ease-in-out',
        '-o-transition': 'background 700ms ease-in-out'
    });  
    $navcolor.css({
        'color': '#fff',
        'transition': 'color 600ms ease-in',
        '-webkit-transition': 'color 600ms ease-in'
    });
  } else {
    $navcolor.css({
      'color': '', // Reset font color
      'transition': '' // Reset transition
    });
  }
});
</script>

[arminunruh]

hey paola!
im too busy to help you out more with this, sorry about that! this is more of a custom code issue than a lay theme issue