FlexSlider doesn't load when hidden div appears / shows
Hi together,
I'm working with Joomla 2.5 and am using this here:
My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.
The Slider is loaded like this:
- <script type="text/javascript" charset="utf-8">
- jQuery(window).load(function() {
- jQuery('.flexslider').flexslider({
- animation: "slide",
- directionNav: false,
- controlNav:false,
- keyboardNav:false,
- direction: "horizontal",
- slideshowSpeed:3000,
- animationSpeed:600,
- randomize: false
- });
- });
- </script>
It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked like before, but not if I toggled the divs.
Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!
This is how I change (outside jQuery document.ready()):
- function changeSection(section) {
- if(activeSection != section) {
- $('#'+activeSection).fadeToggle("slow");
- $('#'+section).delay(500).fadeToggle("slow");
-
- $('#menu-'+activeSection).removeClass('active');
- $('#menu-'+section).addClass('active');
-
- document.title = activeSectionTitle;
- history.pushState({}, '', section);
-
- activeSection = section;
- }
- }
Thanks in advance!