Resources > Coding

Small HTML Bug

(1/1)

Kren:
I have been learning how to make websites and was able to make one, yet I got into a bug that involves FlexSlider, I have to add multiple flexsliders one in each accordion, everything looks fine, yet the slider doesn't work all the time, it seems that the hidden attribute of the accordion is messing with it, the website is: http://iplagunera.com/modelos.html the first two accordions have flexslider, sometimes it works sometimes it doesn't, the code I'm using is the following:


--- Quote ---<div class="accordion">
            <div class="accord_cont">
                <div class="flexslider">
                    <ul class="slides">
                        <li>
                        <img src="./index2_files/sa/1.jpg" alt="">
                        </li>
                        <li>
                        <img src="./index2_files/sa/2.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>
</div>
--- End quote ---
While the Jscript code is the following:


--- Quote ---<!-- CALL FLEX SLIDER -->
<script>
      $(".accordion h3").click(function(){
        $('.flexslider').flexslider({
        pauseOnHover: false,   
        slideshow: true,     
        slideshowSpeed: 4000
        animationSpeed: 1300,
        animation: "slide",
        easing: "swing",
        direction: "horizontal",
        controlNav: false,
        directionNav: true
        });
      });
</script>   
<!-- CALL ACCORDION -->
<script>
    $(".accordion h3").eq(0).addClass("active");
    $(".accordion .accord_cont").eq(0).show();
    $(".accordion h3").click(function(){
        $(this).next(".accord_cont").slideToggle("slow")
        .siblings(".accord_cont:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
</script>
--- End quote ---
I'm pretty sure it's something simple, like the accordion loading at the same time as the flexslider, while it should be first the accordion and once loaded the flexslider, so zfgc any help D:?

AJAX:
Okay, this is easy. I don't know why this person is adding and removing that <h3>. I would suggest removing that code and adding in a <div class="button"> within accordion or something.

I'm not sure how this accordion tool works. It looks a bit convoluted.

Darth RPG:
It's not an HTML error but a Javascript error, you have the Javascript functions calling ".accordion h3" elements, when they should be calling ".accordion img".

AJAX:
Oh damn, didn't see that!

    $(".accordion h3").eq(0).addClass("active");
    $(".accordion .accord_cont").eq(0).show();

^^ my bad. What an odd.. way of doing this, though?

Navigation

[0] Message Index