Different menu color for each slide on Fullscreen slider

[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

[mariusjopen]

Dear @dmlzr
there is not really a hint I can give you here.
It is Javascript. Best is to ask a friend who knows Javascript :-)

Best!

Marius

[g.chng]

Hello everybody,

I tried changing my menu color on specific slides of a fullscreen slider with the code below but it didn't work. The page I tried it on is https://www.domaine-des-creisses.com/les-creisses/.

The code is :

CSS :
@media (min-width: 601px) {
/* White menu and logo on specific slides */
body.slug-les-creisses.custom-slide-1 .sitetitle-txt-inner span,
body.slug-les-creisses.custom-slide-1 nav.primary a,
body.slug-les-creisses.custom-slide-1 nav.laynav a,
body.slug-les-creisses.custom-slide-2 .sitetitle-txt-inner span,
body.slug-les-creisses.custom-slide-2 nav.primary a,
body.slug-les-creisses.custom-slide-2 nav.laynav a {
color: white !important;
border-bottom-color: white !important;
}

/* Instant transition for color and underline */
.sitetitle-txt-inner span,
nav.primary a,
nav.laynav a {
    transition: color 0s ease, border-bottom-color 0s ease;
}

/* Underline for active menu items */
nav.laynav .current-menu-item > a span {
    border-bottom-color: white !important;
}

}

JS :
<script>
// Function to update the colors of the menu and logo
function updateMenuColors() {
const siteTitle = document.querySelector('.sitetitle.position-top.is-fixed.img img');
const body = document.body;
const navItems = document.querySelectorAll('nav.primary a, nav.laynav a');

if (body.classList.contains('slug-les-creisses')) {
    const slides = document.querySelectorAll('.row');
    let isCustomSlideActive = false;

    // Check if a custom slide is active
    slides.forEach(slide => {
        if (slide.classList.contains('fp-section') && slide.classList.contains('fp-completely')) {
            if (slide.classList.contains('custom-slide-1') || slide.classList.contains('custom-slide-2')) {
                isCustomSlideActive = true;
            }
        }
    });

    // Update colors based on the active slide
    if (isCustomSlideActive) {
        siteTitle.src = 'http://www.domaine-des-creisses.com/wp-content/uploads/2024/06/LOGO-BLANC-1.svg';
        navItems.forEach(el => {
            el.style.color = 'white';
            el.style.borderBottomColor = 'white'; // For underline
        });
    } else {
        siteTitle.src = 'http://www.domaine-des-creisses.com/wp-content/uploads/2024/06/TAMPON-ROUGE-SANG.svg';
        navItems.forEach(el => {
            el.style.color = '';
            el.style.borderBottomColor = ''; // Reset to original underline color
        });
    }
}

}

// Initialize the updateMenuColors function on new page shown
window.laytheme.on("newpageshown", function() {
updateMenuColors();
jQuery(document).on('mousewheel', function() {
updateMenuColors();
});
jQuery('.fp-controlArrow, .fp-slidesNav a').on('click', function() {
setTimeout(updateMenuColors, 10);
});
});

// Ensure updateMenuColors runs on page load, scroll, and new page shown
jQuery(document).ready(function() {
updateMenuColors();
jQuery(document).on('newpageshown', function() {
updateMenuColors();
});
jQuery(document).on('scroll', function() {
updateMenuColors();
});
});
</script>

I hope yall can help,

Have a good day

[arminunruh]

mh it seems like this page doesn't have a fullscreen slider active anymore:

https://www.domaine-des-creisses.com/les-creisses/

// "afterLoad" is called everytime the animation is done and we arrived (for the standard vertical sliding)
jQuery(window).on('fpAfterLoad', function( e, obj ){
console.log(obj.index)
console.log(obj.anchorLink)
})

when you scroll down or up, the above event will be fired. based on "obj.index" you can do things. the index is 1 based, so: 1, 2, 3, 4

this is for horizontal sliding:

// this is for when you have horizontal sliding:
jQuery(window).on('fpAfterSlideLoad', function( e, obj ){
console.log(obj.slideIndex)
})

maybe this will be useful!

the body also has a class: fp-viewing-4
the number changes based on which slide you're on, you can use this body class for styling instead of using javascript

some of the code you wrote wont work i think:

body.slug-les-creisses.custom-slide-1

i think this should have a space between, and should be like this:

body.slug-les-creisses .custom-slide-1 

sorry for the late answer