0

I have to use on my site a jQuery responsive carousel with 4 displayed items that slide one at a time, etc etc. The point is: this carousel is placed in a div with display:none and it appears clicking on a button with a slideToggle script (jQuery). Well, when the div appears the carousel is not displayed. Nothing! Notice that if I remove the display:none the carousel shows perfectly. I've tried a bunch of carousel plugin (bxslider, caroufredsel, elastislide, flexslider) and this issue happens for all of them. And then... I'm going crazy!!

Excuse meSorry friends, here is the code:

HTML (here is the case of FlexSlider but the code is similar for the other plugins)

<div id="hiddenDiv">
  <div id="hiddenDivInner">
    <div class="flexslider">
      <ul class="slides">
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</div>

CSS

#hiddenDiv{
    display:none;
    padding-bottom:10px;
    background: url("../img/xxx.gif") repeat left bottom #FFFFFF;
}

SCRIPT (copy-paste from the site. This script is between $(document).ready together with other scripts. Alredy tried to remove the load function)

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 300,
    itemMargin: 5,
    minItems: 1,
    maxItems: 4
  });
});


$("#trigger").click(function () {
    $("#hiddenDiv").slideToggle(400, "easeInOutExpo");
});

I remind you that with this code and no display:none every carousels work, also if I slide up and then down the div using the slideToggle button (#trigger).

7
  • Are you sure the button is setting the display property of that div to block?
    – Liftoff
    Dec 7, 2012 at 17:42
  • 7
    please show your code. Dec 7, 2012 at 17:42
  • 1
    I've tried a bunch of carousel plugin (bxslider, caroufredsel, elastislide, flexslider) and this issue happens for all of them. And then... I'm going crazy!! This means its not the Carousel
    – VIDesignz
    Dec 7, 2012 at 17:43
  • can u please provide ur jquery code.
    – mohan.gade
    Dec 7, 2012 at 17:45
  • 2
    Most likely the carousel needs to be visible when you initialize it so that it can correctly get it's own height/width for the animations. Try initializing the carousel either before you hide it, or after you show it.
    – Kevin B
    Dec 7, 2012 at 18:21

3 Answers 3

0

"Hide" the div by putting it outside the viewport

#hiddenDiv {
    position:absolute;
    top: -3000px;
}

the script will be able to initialize, because the div is not hidden, but it will not be visible.

You can set display to none and position to relative in your onload or in your trigger onclick

Edit Absolute positioning removes the element from the document flow so it will behave like display:none.

3
  • Hi enrico, could you write the code that do this: "You can set display to none and position to relative in your onload or in your trigger onclick" ? I've tried to put some code in the trigger onclick before the slideToggle but it doesn't work. I'm not sure to do it correctly.
    – Fred K
    Dec 10, 2012 at 10:41
  • I was thinking something like this fiddle. It's not a great demo, but see if it works on your full implementation.
    – Enrico
    Dec 10, 2012 at 19:44
  • thanks enrico! i've tried that code on my work and doesn't work! :( i'm trying with some callback function... I think it's the only way.
    – Fred K
    Dec 13, 2012 at 13:19
0

Instead of using display: none; to hide your carousel, use visibility: hidden;

Then when you're ready to show it, use visibility: visible;

The carousel needs its container to have dimensions when it's initialized. When you use display: none;, the dimensions are zero and the carousel is not initialized properly.

Also, display: none; takes the element out of the flow, where visibility: hidden; keeps the element in place, but hidden. The benefit of this is that your surrounding content flow will not be disrupted when you make the element appear.

See: https://developer.mozilla.org/en-US/docs/CSS/visibility

I can't see all of your code/layout, but maybe try something like this. Modify to suite your layout...

#hiddenDiv{
    visibility: hidden;
}


$("#trigger").click(function () {
    $("#hiddenDiv").css('visibility', 'visible');
});

EDIT:

Another possibility would be to hide it only after it's been constructed, instead of within your initial CSS.

$(document).ready(function() {

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 300,
        itemMargin: 5,
        minItems: 1,
        maxItems: 4
    });

    $("#trigger").click(function () {
        $("#hiddenDiv").slideToggle(400, "easeInOutExpo");
    });

    $("#hiddenDiv").css('display', 'none'); // the very last thing

});

CSS:

#hiddenDiv{
    padding-bottom:10px;
    background: url("../img/xxx.gif") repeat left bottom #FFFFFF;
}
4
  • Hi sparky. Already tried the visibility:hidden but as you said it keeps the space of the div and I have to hide it.
    – Fred K
    Dec 7, 2012 at 19:58
  • @FredKafka, you don't have a choice. As you've already discovered, the carousel plugins all need to be initialized within a non-hidden div. Another possible solution... check my edited answer.
    – Sparky
    Dec 7, 2012 at 22:46
  • Hi! very thanks, but it doesn't work! it doesn't initialize the carousel. it's not displayed.
    – Fred K
    Dec 10, 2012 at 10:34
  • @FredKafka, edited again. Removed load() function as it's probably not needed. The only thing unique to my solution vs. the code you say is working is that I've moved the display: none from CSS into the last thing jQuery does on DOM ready.
    – Sparky
    Dec 10, 2012 at 16:56
0

This is my fix! I think it's correct!

.hidden{
  visibility: hidden;
  position: absolute;
  width: 300px;
  overflow: hidden;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.