Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Different Menu color on Fullscreenslider adding id/class to row

    General Discussion
    2
    8
    62
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      paola-ming last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by 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

        P 2 Replies Last reply Reply Quote 0
        • P
          paola-ming @arminunruh last edited by

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • P
            paola-ming @arminunruh last edited by paola-ming

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • P
              paola-ming last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • arminunruh
                arminunruh Global Moderator last edited by

                do you have a link?

                P 1 Reply Last reply Reply Quote 0
                • P
                  paola-ming @arminunruh last edited by

                  @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>
                  
                  1 Reply Last reply Reply Quote 0
                  • arminunruh
                    arminunruh Global Moderator last edited by

                    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

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post
                    Post a link to where the problem is if possible, please <3
                    I don't answer or check forum DMs, please just post on the forum.
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                    Before you post:

                    Use the Search Feature. Maybe there is already a solution to your issue.

                    1. Update Lay Theme and all Lay Theme Addons
                    2. Disable all Plugins
                    3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                    4. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
                    Go here, see if your problem is listed here:
                    Troubleshooting

                    When you post:
                    1. Post a link to where the problem is
                    2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                    Thanks!

                    Online Users

                    Recent Topics

                    • Search as icon instead of text?

                    • FILTER Categories showing all projects

                    • H

                      Vimeo embed with autoplay and loop is really slow...help!

                    • A

                      website not loading on iphone safari

                    laytheme.com