Lay Theme Forum

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

    Change colour of sitetitle on black row / backgrounds

    General Discussion
    3
    19
    643
    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.
    • D
      DLB last edited by

      Re: Change color of fixed sitetitel/menu when scrolling down page (according to changing row-background)

      Hi @arminunruh / @mariusjopen

      I'm trying to change the colour of my sitetitle (text) to white for certain areas of a webpage when scrolling, based on when there is a black row – for example, a cover intro section, or a dark colour photo with a viewpoint height of 100%.

      Both the sitetitle and the menu are fixed, I’ve managed to successfully get this to work for the menu / nav for both desktop and mobile using Armin’s JS code from this post: http://laythemeforum.com:4567/topic/699/change-link-color-on-fixed-nav-based-on-current-row-background

      I noticed that there was also a revised JS code by Marius, to include the sitetitle on this post: http://laythemeforum.com:4567/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background

      However, after several attempts, I can not get this to work for the sitetitle using Marius’s JS for some reason. I've assigned the required areas with a ‘blackrow’ HTML class / ID, and have added the CSS too – but no luck!

      Can you advise and help, please?

      Thank you and best,

      Des

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

        Dear @Des
        the first example you posted is not relevant because it is only for Fullscreen Sliders.

        Mine should work:
        http://laythemeforum.com:4567/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background

        Can you share a link to a page where you set it up?

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • D
          DLB last edited by

          Hi @mariusjopen

          Thanks for your reply.

          I can’t seem to get your code to work for some reason?!

          The page I'm referring is currently set to private, whilst being designed. Could I send you the details privately, with a link to this post for reference?

          Best,

          Des

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

            Dear @Des

            it works.

            Have a look at my test-oage. It will be online for a couple of days. Open the Devtool Inspector to see the Log messages:
            http://www.laytheme.mariusjopen.com/change

            0_1563349934004_Bildschirmfoto 2019-07-17 um 09.52.00.png

            <script>
                var offset = 50;
                var $blackRows;
                var $nav;
                
                Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
                    $blackRows = jQuery(".blackrow");
                    $nav = jQuery(".navbar");
                    $nav.removeClass("white");
                    $sitetitle = jQuery(".sitetitle span");
                });
                
                jQuery(document).on("scroll", function(){
            
                    $blackRows.each(function(){
                        var rect = this.getBoundingClientRect();
                        if(rect.top - offset < 0 && rect.bottom - offset > 0){
                            $nav.addClass("white");
                            $sitetitle.text( "NEW TITLE" );
                            console.log("WHITE");
                            return false;
                        }else{
                            $nav.removeClass("white");
                            $sitetitle.text( "OLD TITLE" );
                            console.log("BLACK");
                        }
                    });
                });
            </script>
            

            I added a log message when a class should get changed.

            Try again :-)

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • D
              DLB last edited by

              Hi @mariusjopen

              Thanks for your reply, and for the details on the test page.

              I've tried again, but no luck – even with the log message!

              I've made the page public for a short while so you can see – https://deslloydbehari.co.uk/portfolio/logos

              Essentially, I just want the sitetitle text and the menu items text to be white on black backgrounds, then return to the default colour, once scrolled past.

              Perhaps I'm not applying the right CSS classes to target the ‘blackrow’ – maybe that's why it's not working?

              Thank you again,

              D

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

                Dear @Des
                it recognises the switch. Now you just need to add the class to the body:

                0_1563954785370_Bildschirmfoto 2019-07-24 um 09.52.24.png

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • D
                  DLB last edited by

                  Dear @Marius

                  Thanks for your reply – I've got it to work!

                  However, I think there might have been some confusion in our correspondence. It's not the actual navbar I wish to turn white – the navbar is actually hidden from from site, but when I made it visible, and added the CSS, your code worked.

                  I actually just want the sitetitle text and menu text items to change to white, whilst on a black background – https://deslloydbehari.co.uk/portfolio/logos

                  Could your JavaScript code be adjusted to make this work? Do you have any tips?

                  Thank you and best,

                  Des

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

                    Dear @Des
                    great!

                    Well, you could give the class to the body element.
                    And then use the CSS hierarchy to trigger the element you need.

                    <script>
                        var offset = 50;
                        var $blackRows;
                        var $nav;
                        
                        Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
                            $blackRows = jQuery(".blackrow");
                            $nav = jQuery("body"); // YOU CAN CHANGE THIS
                            $nav.removeClass("white");
                            $sitetitle = jQuery(".sitetitle span");
                        });
                        
                        jQuery(document).on("scroll", function(){
                    
                            $blackRows.each(function(){
                                var rect = this.getBoundingClientRect();
                                if(rect.top - offset < 0 && rect.bottom - offset > 0){
                                    $nav.addClass("white");
                                    $sitetitle.text( "NEW TITLE" );
                                    console.log("WHITE");
                                    return false;
                                }else{
                                    $nav.removeClass("white");
                                    $sitetitle.text( "OLD TITLE" );
                                    console.log("BLACK");
                                }
                            });
                        });
                    </script>
                    
                    .blackrow .site-title {
                     background: red;
                    }
                    
                    .whiterow .site-title {
                     background: blue;
                    }
                    

                    Did not test it - but it will give you the idea.

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • D
                      DLB last edited by DLB

                      Dear @mariusjopen

                      Thank you for the tip – much appreciated!

                      I’ve got to it work as intended – I changed the class to body, as you noted, then added the following to CSS…

                      .white .sitetitle span {
                          color: white;
                      }
                      
                      .white nav.primary a {
                          color: white;
                      }
                      

                      One minor thing, the white sitetitle and white menu only appear when you start scrolling down, is there a way to make them appear when the page is loaded, before scrolling? Any tips? The reason I ask is because some pages will have blackrows with a 100% vh as the first image – see this page as an example – https://deslloydbehari.co.uk/portfolio/logos

                      Thanks again, and best,

                      Des

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

                        Dear @Des
                        you could do that with CUSTOM CSS to have it visible on specific pages.

                        Or you run a Javascript event to make the site title visible on only those pages which you want.

                        http://laytheme.com/documentation.html#custom-css-styling
                        http://laytheme.com/documentation.html#custom-javascript

                        Glad you figured it out!

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • D
                          DLB last edited by

                          Thanks @mariusjopen

                          I know I can't use the jQuery(document).ready(function(){ for Lay Theme. But would I need to amend the scroll function – jQuery(document).on("scroll", function(){ to something else, in order for the white sitetitle text / white menu text to load before scrolling?

                          I'm not sure if CSS would be applicable, as I only need to target certain rows, not the whole page?!

                          Thanks again and best,

                          Des

                          1 Reply Last reply Reply Quote 0
                          • D
                            DLB last edited by

                            Hi again @mariusjopen

                            Just following up the above post – additionally I’ve noticed this jQuery code does not work when the scroll bar option is deactivated, when using Lay’s Fullscreen Slider plugin.

                            As noted above, would I need to change the function?
                            jQuery(document).on("scroll", function(){

                            I had to deactivate the scroll bar option in the Fullscreen Slider, as it flickers when using Chrome – looks fine in Safari and Firefox, but for some reason it flickers when testing in Chrome. The auto-scrolling speed is 1000 milliseconds.

                            Any thoughts?

                            Thanks and best,

                            Des

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

                              Dear @Des
                              can you show us a link where it is flickering?

                              What exactly do you try to achieve?

                              Best!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply Reply Quote 0
                              • D
                                DLB last edited by

                                Hi @mariusjopen

                                Here is a link: https://deslloydbehari.co.uk/portfolio/logos

                                When using Chrome (macOS) the Fullscreen Slider seems to flicker with the scroll bar displayed, and doesn’t feel as smooth compared to Safari and Firefox. However, when the scroll bar is disabled the slider navigation is much smoother on Chrome. I've also tested on another Mac, with and without the scroll bar, same result.

                                Subsequently, when the scroll bar is disabled the JS code I've been using, which makes the sitetitle and menu items text white on dark/black rows no longer works as a result, which I think is due to the scroll bar not being displayed?

                                For reference, here is the JS code, I’m using:

                                <script>
                                    var offset = 50;
                                    var $darkBackgrounds;
                                    var $nav;
                                    
                                    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
                                        $darkBackgrounds = jQuery(".darkbackground");
                                        $nav = jQuery("html, body");
                                        $nav.removeClass("white");
                                        $sitetitle = jQuery(".sitetitle span");
                                    });
                                    
                                    jQuery(document).on("scroll", function(){
                                
                                        $darkBackgrounds.each(function(){
                                            var rect = this.getBoundingClientRect();
                                            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                                                $nav.addClass("white");
                                                $sitetitle.text("Des Lloyd Behari");
                                                console.log("white");
                                                return false;
                                            }else{
                                                $nav.removeClass("white");
                                                $sitetitle.text("Des Lloyd Behari");
                                                console.log("dark");
                                            }
                                        });
                                    });
                                </script>
                                

                                I've re-enabled the scroll bar on the above website link, so you can see for yourself.

                                To summarise, ideally I would like to use the Fullscreen Slider, but with the scroll bar visible, but am willing to compromise and not have it visible, to ensure the scrolling on Chrome is smooth. But this now means the above JS no longer works!

                                If you need any further details, please let me know.

                                Many thanks,

                                Des

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

                                  Dear @Des
                                  maybe you can call the JS whenever the fullscreen slider gets called.

                                  But the flickering when the scrollbar is displayed is weird. That looks like a bug.

                                  We will check this.

                                  Best!

                                  Marius

                                  www.mariusjopen.world

                                  1 Reply Last reply Reply Quote 0
                                  • D
                                    DLB last edited by DLB

                                    Thanks @mariusjopen

                                    I thought it might be a bug with Fullscreen Slider – please do let me know when it’s been checked. Ideally, I would prefer the slider with a scroll bar.

                                    For the JS code, I've added a "mousemove" call, that seems to work, when the scroll bar is deactivated on the Fullscreen Slider.

                                    Thanks again for your help.

                                    Best,

                                    Des

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

                                      Hey!

                                      Hey please update the fullscreen slider addon and the stuttering should be fixed.

                                      For the fullscreen slider you could also use the events:

                                      <script>
                                      
                                      jQuery(window).on('fpOnLeave', function(obj){
                                      console.log('fp on leave');
                                      console.log(obj.index);
                                      console.log(obj.nextIndex);
                                      console.log(obj.direction);
                                      });
                                      
                                      // and
                                      jQuery(window).on('fpAfterLoad', function(obj){
                                      console.log('after load');
                                      console.log(obj.index);
                                      console.log(obj.anchorLink);
                                      });
                                      
                                      </script>
                                      
                                      1 Reply Last reply Reply Quote 0
                                      • D
                                        DLB last edited by

                                        Hey @arminunruh

                                        Thanks very much, I’ve updated the slider – works perfectly with the scroll bar in Chrome!

                                        Thanks also, for the events code for the slider – much appreciated! Could I use this to make the white sitetitle and white menu appear on any of the first slides that have a black background before scrolling / moving the mouse?

                                        Best,

                                        Des

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

                                          Dear @Des
                                          yes. This should work.

                                          Best!

                                          Marius

                                          www.mariusjopen.world

                                          1 Reply Last reply Reply Quote 0
                                          • First post
                                            Last post

                                          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. Now see if your problem solved itself
                                          5. 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

                                          • T

                                            OpenType Feature

                                          • T

                                            Split Screen just on front page / subpages without the split?

                                          • T

                                            problem when I click on the category filter buttons on mobile

                                          • G

                                            z index has different behaviors on different pages

                                          laytheme.com