Different menu color for each slide on Fullscreen slider
-
-
@arminunruh This doesn't work in the current version of Laytheme, am I right?
-
-
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 -
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
-
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 theon("click")
after leaving the current slide?Thanks
David -
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
-
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!
-
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 -
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 -
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
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- 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:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it