Different menu color for each slide on Fullscreen slider

[arminunruh]

Oh, I changed the html markup a bit with the latest updates. This way it should work:

body.fp-viewing-0 .sitetitle-txt-inner span{
    color: pink;
}
body.fp-viewing-0 nav.primary a{
    color: pink;
}

[antonioprado]

@arminunruh Hello Armin!! Thank you very much! It works very well!!! :D

The only thing is when "Scrolling down in the last section scrolls down to the first section" is activated, when the last slide goes to the first one, this "effect" does not work... Is there any way for it to work when this option is activated?

Thank you again!!

[mariusjopen]

Hey Antonio!

I was able to reproduce the issue you were talking about.
In fact you are right.

When you activate the "Scrolling down in the last section scrolls down to the first section" and scroll down the .fp-viewing-0 changes to .fp-viewing-1 and does not change back to .fp-viewing-0 when you continue scrolling more down.

That means that your custom CSS code does not work anymore:

body.fp-viewing-0 .sitetitle-txt-inner span{
    color: pink;
}
body.fp-viewing-0 nav.primary a{
    color: pink;
}

What you can do is to activate the CSS also for the second slide. That is a compromise until we will have fixed that issue.

body.fp-viewing-0 .sitetitle-txt-inner span,
body.fp-viewing-1 .sitetitle-txt-inner span{
    color: pink;
}

body.fp-viewing-0 nav.primary a,
body.fp-viewing-1 nav.primary a{
    color: pink;
}

I hope I could help!

Let us know if you have further questions!

All the best!

Marius

[antonioprado]

@mariusjopen Hello Marius! Wow! That really helps! Thank you very much for the answer and the patient! Both of you!

Have a nice week guys! :)

[mariusjopen]

Hi Antonio!

Great! Very happy to hear :-)

[adam]

Hey guys, this post has been really helpful in getting the navbar and site title changing. I am trying to get the same change happening on text within a full-page slider however the only success I have had is when I target the universal setting of my text-formats.

for example

body.fp-viewing-1 .text .lay-textformat-parent > *, ._Default, ._Heading {
color: #FFFFFF;
}

This works however it doesn't change out when landing on a different slide. Basically I need to target slide 1, 3, 5, 7 and 8.

Any help would be great!

Thank you

[mariusjopen]

Hey Adam,

it is a bit complicated to solve this issue without actually knowing the site.

Can you provide us with a link?

All the best!

Marius

[dgknkrpnr]

@mariusjopen said in Different menu color for each slide on Fullscreen slider:

Hey Antonio!

I was able to reproduce the issue you were talking about.
In fact you are right.

When you activate the "Scrolling down in the last section scrolls down to the first section" and scroll down the .fp-viewing-0 changes to .fp-viewing-1 and does not change back to .fp-viewing-0 when you continue scrolling more down.

That means that your custom CSS code does not work anymore:

body.fp-viewing-0 .sitetitle-txt-inner span{
    color: pink;
}
body.fp-viewing-0 nav.primary a{
    color: pink;
}

What you can do is to activate the CSS also for the second slide. That is a compromise until we will have fixed that issue.

body.fp-viewing-0 .sitetitle-txt-inner span,
body.fp-viewing-1 .sitetitle-txt-inner span{
    color: pink;
}

body.fp-viewing-0 nav.primary a,
body.fp-viewing-1 nav.primary a{
    color: pink;
}

I hope I could help!

Let us know if you have further questions!

All the best!

Marius

@mariusjopen Is there a way to use this technique without using fp-viewing classes? I want to give a single class to all rows with same color using "Set HTML class & ID" option (lets name this class "blackbg"). And I want to change menu color when we are looking to blackbg slide (or when it have "active" class too)

If I use fp-viewing classes I have to write different slug classes for every project in custom css because slides with black background isn't have same order. My projects have different slide count.

[mariusjopen]

Hi dgknkrpnr!

Well, if you want to have a specific color for a slide you need to use those classes. They are the only class which allows you to style this specific slide.

But maybe that helps:

Then you can call each row by its own.

Best!

Marius

[Hayo Gebauer]

Is it possible to delay the color switching?
The first slide I have the menu/title in white (opposed to black like in the rest of the slides)
When i scroll from the first slide, the white instantly switches to black, but it would be nice to have a 700ms delay (duration of the fullscreen slide)

edit: adding "transition-delay: 700ms" does not work, it delays the appearance of the white font by 700ms, but not the switching to black.

[mariusjopen]

Dear @Hayo-Gebauer
with jQuery you can add a wait or delay effect.

Best!

Marius

[Hayo Gebauer]

@arminunruh This doesn't work in the current version of Laytheme, am I right?

[mariusjopen]

Dear @MAN
you probably need to hack yourself through this…

Best!

Marius

[dmlzr]

Hi @mariusjopen, thanks for the support.
I'm also trying to make this work.
I want to adress a slide by its class and change the menu color if the slide is shown.
I tried this it by checking if it has the class "active" and I get a disturbingly random result. Sometimes it gets it right sometimes not.
Here's what I did:

<script>
    var $blackRows;
    var $nav;
    var $title;

    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".blackrow");
        $nav = jQuery("nav");
        $title = jQuery(".sitetitle-txt-inner");
        $nav.removeClass("white");
        $title.removeClass("white");        
    });

    function colorchanger() {
            if($blackRows.hasClass("active")){
                $nav.addClass("white");
                $title.addClass("white");
                return false;
            }else{
                $nav.removeClass("white");
                $title.removeClass("white");
            }
    }
    jQuery(document).on("click", function(){
      colorchanger();
    });
</script>

Did I miss something?
What's the best way to target the current slide?

Thanks!
David

[mariusjopen]

Dear @MAN
have a closer look in the docs about this :

 jQuery(document).on("click", function(){
      colorchanger();
});

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

Best!

Marius

[dmlzr]

Tanks @mariusjopen for the qick response.

I think the problem is that the on("click") event happens before the slide changes. So the current .blackrow still has the class .active.
Is there a way to target the next slide?
Or alternatively run the on("click") after leaving the current slide?

Thanks
David

[mariusjopen]

Dear @dmlzr
what I meant is: This is not how you do an onclick call.
Have a look in the documentation link about click-binding-events.

Best!

Marius

[dmlzr]

Hi @mariusjopen,
I changed the onclick but I'm not sure if that's the problem.
I want to click on the current slide and if the next slide has the class blackrow the menu color should change. But the onclick is happening before the next slide has loaded. How can I check if the next slide has a certain class? Or else run the function after the next slide has loaded?

Greets!

[mariusjopen]

Dear @dmlzr
ok, this is not an easy one if you are a beginner.
For the fullscreen-slider we are using this library https://alvarotrigo.com/fullPage/. You can look in their Docs of how to access it to change its behaviour.
Many wishes!
Marius

[dmlzr]

Hey @mariusjopen ,
thanks a lot for the link. And yes this is a hard one for me.
I saw this fullpage.js already and tried to use the 'fpAfterLoad' described here: http://laythemeforum.com:4567/topic/4437/change-colour-of-sitetitle-on-black-row-backgrounds
But I didn't get it to work. Perhaps you could give me a hint.
Anyway I found a (not very elegant) workaround. I run the colorchange funtion several times after the slider has been clicked. That pretty much does the trick.
Greets!
David