Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Different Menu color on Fullscreenslider adding id/class to row

Different Menu color on Fullscreenslider adding id/class to row

Scheduled Pinned Locked Moved General Discussion
8 Posts 2 Posters 209 Views
  • 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 Offline
    P Offline
    paola-ming
    wrote on last edited by
    #1

    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
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by arminunruh
      #2

      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
      0
      • arminunruhA 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 Offline
        P Offline
        paola-ming
        wrote on last edited by
        #3
        This post is deleted!
        1 Reply Last reply
        0
        • arminunruhA 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 Offline
          P Offline
          paola-ming
          wrote on last edited by paola-ming
          #4
          This post is deleted!
          1 Reply Last reply
          0
          • P Offline
            P Offline
            paola-ming
            wrote on last edited by
            #5

            @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
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              do you have a link?

              P 1 Reply Last reply
              0
              • arminunruhA arminunruh

                do you have a link?

                P Offline
                P Offline
                paola-ming
                wrote on last edited by
                #7

                @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
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  šŸ’æ Email me here: šŸ’æ
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search